Skip Navigation

Adding Links

4 min read

Links let you connect frames and create prototypes to add interactivity to your designs. You can add links from any layer and connect them to any frame.

There are different ways to add a link. Start by selecting a frame or layer and choose one of these options:

  • Press I and drag to create a link, then click a target frame.
  • Click the Circle with plus icon in the Navigate section of the Prototyping panel.
  • Select the menu option Prototype > Interaction > Create Interaction.
  • Launch the Command Bar, search for Interaction and press .

The key concept behind links is simple: a layer triggers the interaction when you tap or click it, and a frame is the target it links to.

You can link to any frame in your document — even ones on other pages. You can also link multiple frames at once and they’ll all share the same target.

How to add links in the Mac app using the keyboard shortcut, the on-canvas controls, and the Prototyping panel.

Frames in prototypes can appear in two ways: as a Screen or an Overlay.

  • Screens show one at a time — each new frame replaces the previous one.
  • Overlays appear on top of the current frame, and can even stack on top of other Overlays.

The first frame you link in a document automatically becomes the Start Point of your prototype. A Start Point icon Start Point appears next to the frame’s name on the Canvas and in the corner of its icon in the Layer List. You can set any frame as a Start Point, and add as many Start Points as you need.

Automatically linking frames

To quickly link frames, choose Prototype > Interaction > Auto Link to Right Frame to create a link from the selected frame to the one immediately to its right. Similarly, you can link to the frame on the left using Prototype > Interaction > Link to Previous Frame. You can also set Auto Link by dragging a link and hovering over the Go to Frame icon in the top-right or top-left corner of your frame.

If there are no frames to the left or right, but there’s one below, the Auto Link option will target the frame below instead.

Auto Links update automatically when you reorder frames — perfect for prototypes with linear navigation, like presentations or onboarding experiences.

Auto Link direction is based on the Frame Export option in Settings > Layers. This determines whether Auto Link targets frames to the right or left first. The default is left to right.

You can edit two link properties: the Target, which is where the interaction links to, and the Animation which controls how the transition between frames looks when you play the prototype.

How to edit a link’s target, choose an animation type (such as slide, dissolve, or Smart Animate), and set the transition direction in the Mac app.

  • Select a layer with a link and drag the connecting arrow to a new target. You can also use the Go to Frame icons that appear when you click and drag the link and hover over the upper left or right sides of the Frame containing the link.
  • Select a layer with a link, switch to the Prototype tab of the Inspector and click on the Target dropdown menu to select a new target.
  • Select a Symbol instance with link overrides, then choose a new target from the Overrides section in the Inspector.

Set a link’s target to None to disable it without deleting it.

Open the Prototyping panel and click the Animation dropdown menu to change the Animation type.

Linking back to the previous frame

Select Previous Frame in the Target dropdown menu to return to whichever frame you were previewing before the current one. This is helpful when you have lots of links leading to a single frame — like a settings screen that multiple screens can open. Instead of creating separate links back to each origin, a single “Previous Frame” link handles all cases.

Maintaining scroll position after click

When you enable this option, the target frame opens at the same scroll position as the layer that triggered the interaction. You’ll find this setting at the bottom of the Prototyping panel when editing a link.

Where to find the Maintain scroll position after click toggle in the Prototyping panel.

There are several ways to remove a link:

  • Use the Command Bar to remove all links from a selection or the current page, search for remove links.
  • In the Menu Bar, choose Prototype > Remove Links.
  • Select a Hotspot or layer with a link and click the - icon in the Interaction section.
  • Click and drag the arrow end that connects a link Add Link to Artboard tool to its target frame and drop it anywhere outside a target frame on the Canvas.

You can add interactions directly to a Symbol Source. That way, every instance of that Symbol will include the interactions you’ve set — like a home button that always links to the same screen.

You can also override interactions set in the Symbol Source for any instance — or set the target to None to disable the interaction when needed. You’ll find these overrides in the Interactions section in the Inspector.