View prototype connections
If you're using UI3, Figma's new design, some parts of this article might not match what you see in the product today. We appreciate your patience while we make updates. Learn more about Figma’s redesign →
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.