Adding Links

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.

Adding a link

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

• Press W and drag to create a Link, then click on a target frame or layer.
• Click on Create an Interaction in the Prototye tab of the Inspector.
• Switch to the Prototype tab, then click and drag the icon on the right side of the selected layer.
• Select the menu option Prototype > Interaction > Add Link to Frame.

The key concept behind Links is simple: one layer triggers the interaction when you tap or click on 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.

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. You can choose either option for any frame in the Prototype tab of the Inspector.

The first frame you link in a document automatically becomes the Start Point of your prototype. A Start Point icon 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 autolink 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 autolink 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.

The direction auto Links have is based on the Frame Export option in Settings > Layers. The default is left to right.

Editing Links

You can edit two properties of Links: the Target, which is where the interaction links to, and the Animation which defines how the transition from one Frame to another will look like when you play the prototype.

Edit a Link’s target

• 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 that has link overrides and select a new target from the Overrides section in the Inspector

Editing a Link’s animation

• Switch to the Prototype tab of the Inspector and click on the Animation dropdown menu to change the Animation type.

Tip: 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.

Maintaining scroll position after click

As the name implies, when you enable this option the target Frame will be displayed on the same scroll position of the layer that triggered the interaction.

Removing a Link

There are several ways to remove a Link:

• Use the Command Bar to remove all Links from a selection or the current page.
• In the Menu Bar, choose Prototype > Remove Links from Selection.
• On the Inspector, select a Hotspot or layer with a Link and click the Trash icon in the Interaction section.
• Click and drag the arrow end that connects a Link to its target Frame and drop it on an empty spot of the Canvas.

Using Links with Symbols

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 interaction overrides in the Design tab of the Inspector, under the Overrides section.