Create and manage prototype flows – Figma Learn - Help Center

Before you start

Who can use this feature

Requires can edit access to a file

When prototyping in Figma, you can create multiple flows to test different parts of a user’s journey.

A flow is a collection of connected frames that make up a single prototype experience. For example, you can create a prototype for a shopping app that includes a flow for account creation, another for browsing items, and another for the checkout process–all in one page.

Create a prototype flow

Flow starting points

A flow starting point is where the flow begins. Flow starting points are set on top-level frames.

When you add a connection between two frames with no existing connections, Figma will create a starting point on the top-level frame where the connection started. Flow starting points are shown on the canvas with a blue preview icon and the flow name.

A frame can only have one flow starting point.

A connection is created from one frame to another. A flow starting point is added to the first frame.

You can also manually create a flow starting point.

Select the starting frame.
Select the Prototype tab from the right sidebar.
Click the plus sign in the Flow starting point section.

create-flow-starting point.png

To see all flow starting points on the current page:

Deselect any objects by clicking an empty part of the canvas.
Select the Prototype tab from the right sidebar.
From the Flows section, view a list of all flow starting points.
Hover over a flow name and click Select frame to navigate to the frame where the starting point is located.

Add or remove frames from a flow

Once you have a flow starting point, the rest of the flow consists of any frames that are connected to the starting point with prototyping interactions. This includes frames that are directly connected to the starting point, as well as frames that are connected through other interactions.

For example, all purple frames in the image below are included in Flow 1:

To remove a frame from a flow, remove any prototype interactions that connect the frame to other frames in the flow.

Frames can be included in multiple flows. For example, the blue frame in the image below is included in both Flow 1 and Flow 2:

Once a user navigates to a frame that is included in multiple flows, they can use any interactions on that frame. This opens up the original flow to include any connections from that frame.

Manage prototype flows

Edit flow name

Once you've created a flow, Figma will name it Flow 1 by default, with additional flows being Flow 2, Flow 3, and so forth. You can rename a flow at any time.

To rename a flow:

Select the starting frame.
Select the Prototype tab from the right sidebar.
From the Flow starting point section, select the flow name field.
Enter in a new flow name.

Once renamed, the flow name is displayed in the frame's blue starting point icon and the left sidebar in presentation view.

Tip: You can also rename a flow by double-clicking the flow starting point name directly on the canvas.

Add flow description

Flow names and descriptions are displayed in the left sidebar when in presentation view. Use descriptions to provide prompts to usability test participants or additional context and documentation for your team. Descriptions can be formatted with bold text, numbered or bulleted lists, and hyperlinks.

To add a flow description:

Select the frame with the flow starting point.
Select the Prototype tab from the right sidebar.
From the Flow starting point section, click Edit description next to the name of the flow you’d like to edit.
Add a rich text description.
Click X to exit the Description panel and save the description.

Once added, the description is displayed in the left sidebar in presentation view.

Move flow starting point

By default, Figma uses the first connection you create as the flow starting point. You can move a starting point to another frame.

Find the blue starting point icon on the canvas.
Click and drag the flow name to a new starting frame.

The starting point is dragged from one frame to another.

Delete flow starting point

To delete a flow starting point:

Select the frame with the flow starting point.
Select the Prototype tab from the right sidebar.
From the Flow starting point section, click Remove starting point.

Tip: You can also delete a flow starting point by finding the blue starting point icon on the canvas, and clicking and dragging it off the frame to an empty part of the canvas.

Play and share prototype flows

Preview flows

You can preview your prototype flows directly in the editor, with an inline preview.

Deselect any objects by clicking an empty part of the canvas.
Select the Prototype tab from the right sidebar.
From the Flows section, view a list of all flows.
Hover over a flow name and click Preview to open the inline preview.

From the inline preview, navigate through your flow by triggering each prototype interaction.

Tip: You can also open the inline preview by clicking the blue preview icon on any flow starting point.

Copy and share flow links

You can share prototype flows with others in order to get feedback on specific user flows or journeys. When you share a prototype flow, users can play the prototype in presentation view. From presentation view, users can also select any other flow to play.

From the canvas:

Select the frame with the flow starting point.
Select the Prototype tab from the right sidebar.
Hover next to the Flow starting point heading.
Click Copy link.

From presentation view:

Select the flow you want to share from the left sidebar.
Click Share prototype in the toolbar.
Click Copy link.