UI flows for Figma

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.