···

    View prototype 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.

    Expand page list at the top of the left sidebar to select another page

    Connections and interactions

    1. 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.
    2. View the connection details in the Interactions section of the sidebar.
      1. Type of interaction that triggers the flow. Prototype triggers →
      2. Prototype action and the destination. Prototype actions →
      3. 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 →
      4. The easing curve for the interaction. This can be a preset value, like Ease out, or a custom easing curve. Prototype easing curves →
      5. Duration of the animation in milliseconds (ms).

    Connection selected with the interaction details highlighted in the right sidebar

    Tip! You can also toggle prototype connections from the toolbar. Select view settings (current zoom percentage) and toggle Prototype flows off or on. Adjust view settings →

    Prototype flows

    View prototype flows in the inspect panel of the right sidebar.

    1. Select Inspect in the right sidebar.
    2. View a list of any Flows on the current page.
    3. 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.

    4. 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 presentation view. Present designs and prototypes →

    Select the flow in the canvas using the target in the right sidebar

    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 editors can access 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.

    Selecting a connection as an editor open the interaction details menu in the Prototype tab

    Note: Figma won't display the inherited connections on the canvas by default. Select the instance to view its inherited connections.

    Related Videos