View prototype connections
This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →
Who can use this feature
Available on any team or plan.
Anyone with can view
or can edit
access access can view prototype connections and flows.
Anyone with can view or can edit access to the file can view prototype flows and connections. This applies to anyone who views or accesses the file without explicit edit permissions.
People with view access can see interactions between variants in a component set (interactive components). Viewers can only see variant interactions on main components, not instances.
Note: There isn't currently a way to share a file with prototype connections turned on by default for viewers.
View access
Viewers can access all prototype connections on the current page, including any flows and starting points.
To view connections on another page, viewers can select another page in the left sidebar.
Connections and interactions
- Use the shortcut ⇧ ShiftE to toggle the visibility of any prototype connections. Figma will show any connections between frames, as well as the starting points for any flows.
- Frames can have connections related to multiple flows. To view details of a specific interaction, select the connection and not the frame.
- If a starting frame has multiple connections, select the starting frame to view all connections and interactions.
- View the connection details in the Properties > Interactions section of the right sidebar.
- Type of interaction that triggers the flow.
- Prototype action and the destination.
- Type of prototype animation. If this is an animation that supports a direction, you'll see the origin direction next to the animation name. For example, if the next frame comes from the right and moves left, Figma will show this as Right.
- The easing curve for the interaction. This can be a preset value, like Ease out, or a custom easing curve.
- Duration of the animation in milliseconds (ms).
Tip: You can also toggle prototype connections from the toolbar. Select view settings (current zoom percentage) and toggle Prototyping off or on.
Prototype flows
View prototype flows in the Properties tab of the right sidebar.
- Deselect all objects by clicking on a blank spot on the canvas.
- Select Properties in the right sidebar.
- View a list of any Flows on the current page.
- Prototype connections are hidden by default for anyone with view access.
- Select to toggle visibility on.
- Select to toggle visibility off.
-
Hover over the flow to view the actions you can take:
- Select Select frame to select the starting frame in the canvas. This will also allow you to view details in Interaction section of the sidebar
- Select Copy link to copy link to clipboard
- Select Preview to open the flow in inline preview
Edit access
If you have edit access to the file, you can view and edit any prototype flows and connections. This applies to any flows and starting points, as well as variant interactions on both main components and instances.
Anyone with edit access to the file can access prototyping settings in the right sidebar. The Prototype tab allows you to view, edit, or create interactions and animations.
There are a few ways people with edit access can interact with prototype settings:
- Select Prototype tab in the right sidebar to enter prototype mode.
- Use the shortcut ⇧ ShiftE to open the Prototype tab and view any connections.
Note: Figma won't display the inherited connections on the canvas by default. Select the instance to view its inherited connections.
Who can use this feature
Supported on any team or plan.
Anyone with can view or can edit access access can view prototype connections and flows.
Anyone with can view or can edit access to the file can view prototype flows and connections. This applies to anyone who views or accesses the file without explicit edit permissions.
People with view access can see interactions between variants in a component set (interactive components). Viewers can only see variant interactions on main components, not instances.
Note: There isn't currently a way to share a file with prototype connections turned on by default for viewers.
View access
Viewers can access all prototype connections on the current page, including any flows and starting points.
To view connections on another page, viewers can select another page in the left sidebar.
Connections and interactions
- Use the shortcut ⇧ ShiftE to toggle the visibility of any prototype connections. Figma will show any connections between frames, as well as the starting points for any flows.
- Frames can have connections related to multiple flows. To view details of a specific interaction, select the connection and not the frame.
- If a starting frame has multiple connections, select the starting frame to view all connections and interactions.
- View the connection details in the Properties > Interactions section of the sidebar.
- Type of interaction that triggers the flow. Prototype triggers →
- Prototype action and the destination. Prototype actions →
- Type of Animation. If this is an animation that supports a direction, you'll see the origin direction next to the animation name. For example: If the next frame comes from the right and moves left, Figma will show this as Right. Prototype animations →
- The easing curve for the interaction. This can be a preset value, like Ease out, or a custom easing curve. Prototype easing curves →
- Duration of the animation in milliseconds (ms).
Tip: You can also toggle prototype connections from the toolbar. Select view settings (current zoom percentage) and toggle Prototyping off or on. Adjust view settings →
Prototype flows
View prototype flows in the Properties tab of the right sidebar.
- Select Properties in the right sidebar.
- View a list of any Flows on the current page.
- Prototype connections are hidden by default for anyone with view access.
- Select to toggle visibility on.
- Select to toggle visibility off.
Note: This is the same setting as both the Prototype flows view setting and the keyboard shortcut (⇧ShiftE). Adjusting either of those settings will also toggle visibility in the Inspect panel.
-
Hover over the flow to view the actions you can take:
- Select to select the starting frame in the canvas. This will also allow you to view details in Interaction section of the sidebar
- Select to copy link to clipboard
- Select to open the flow in inline preview. Play your prototypes →
Edit access
If you have edit access to the file, you can view and edit any prototype flows and connections. This applies to any flows and starting points, as well as variant interactions on both main components and instances.
Anyone with edit access to the file can access prototyping settings in the right sidebar. The Prototype tab allows you to view, edit, or create interactions and animations.
There are a few ways people with edit access can interact with prototype settings:
- Select Prototype tab in the right sidebar to enter prototype mode.
- Use the shortcut ⇧ ShiftE to open the Prototype tab and view any connections.
Note: Figma won't display the inherited connections on the canvas by default. Select the instance to view its inherited connections.