On this page
About UI flows for Figma
UI flows for Figma is a free Figma plugin published by tamasally in 2023. It works in Figma Design and has 16,563 users and 155 likes on the Figma Community. It ranks #9 in Flowcharts & User Flows on our lists.
In the developer's words
What it is:
Easily create screen transition diagrams with text.
Screen transition diagrams can also be converted to text.
It's based on the "A shorthand for designing UI flows" technique as published by Ryan Singer. Reading this 5 minute read is highly recommended.
How to use:
(1) Below is a simple example. Paste it into the text area of the plugin and press the Create UI flows button.
[Login] Username input field Password input field -- Login Forgot password [Forgot password] e-mail input field -- Submit
(2) Use arrows to connect screens as needed.
In addition, you can change characters and edit instances directly from Figma.
Use your favorite plugins for the arrows.
Recommended: Simpleflow
(3) If you want to change the contents of the Figma to text(UI flows markdown format), select some frames and press the Export markdown button to copy it to the clipboard.
This function is useful when you want to put the information on other tools.
Acknowledgements:
We would like to take this opportunity to thank.
Ryan Singer, creator of the UI flows method.
@hirokidaichi, creator of the UI flows markdown format.
@k1rn for sharing ideas on how to create a UI flow with Figma.
What's new
Version 4 · released Mar 5, 2024
- Figma Plugin API Update - Dynamic Page Loading
Permissions and privacy
Network access
UI flows for Figma declares no network access, so it runs entirely inside Figma and can't send your file anywhere.
Extra permissions
None beyond the standard access to the file you run it in.
Read from the plugin's published manifest.
Where UI flows for Figma ranks
UI flows for Figma alternatives
- 1
Simpleflow
by Lichin
107K users1.9KFree + $10 upgrade🪄 Create flowcharts in Figma with native FigJam connectors — stay perfectly in sync as you design!
- 2
ProToFlow
by Saeed Alipoor
81K users1.1KFreeGenerate Flow Arrows based on Prototype Interactions
- 3
Simple Arrow Drawer
by John Cho
70K users85FreeSimple Arrow Drawer
- 4
Mermaid in Figma
by art
46K users291FreeEnable to use Mermaid code in Figma
- 5
Flowy
by Nathan
41K users439FreeEffortlessly create and customize connections (user flows) between components in Figma.
- 6
Flow Connect
by Yunser
33K users27Free
UI flows for Figma FAQ
What does UI flows for Figma do?
Easily create screen transition diagrams with text. It's a Figma plugin by tamasally that runs in Figma Design.
Is UI flows for Figma free?
Yes. UI flows for Figma is free to install and run from the Figma Community, with no paid tier listed.
Is UI flows for Figma safe to use?
Figma plugins can only reach the internet through domains listed in their manifest. UI flows for Figma declares no network access, so it runs entirely inside Figma and can't send your file anywhere. As with any plugin, check the developer's privacy policy before using it on client work.
How do I install UI flows for Figma?
Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.
What are the best alternatives to UI flows for Figma?
By user count, the closest alternatives are Simpleflow, ProToFlow and Simple Arrow Drawer. Compare all of them on the best Figma plugins for flowcharts & user flows.
Built this plugin?
Use this page as a landing page for UI flows for Figma: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.
Style
Label
Size
Code
<a href="https://figmaplugins.co/plugins/ui-flows-for-figma/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="UI flows for Figma on figmaplugins.co" width="220" height="48"></a>