Adding Links

The quickest way to create a prototype is to add a Link between two Artboards . You can add Links from any layer to any Artboard.

To add a Link, use the Create an Interaction button in the PROTOTYPE tab of the Inspector (or press W), then click on an Artboard you’d like to Link your Layer to.

Note: When you have the PROTOTYPE tab selected and you select a layer on the Canvas, a + icon appears in the middle of the layer’s right hand selection boundary, and you can click-and-drag on that to start creating a Link.

You can choose to Link to a previous Artboard or to any other Artboard in your document when you add a Link — the latter option is especially useful for complex documents. Both of these options are available when you select multiple Artboards, so you can Link multiple Artboards at the same time.

Note: The option to select multiple Artboards and add Links to all simultaneously is only available in version 87 of the Mac app and above.

The Artboard containing the layer or Hotspot used to create your first Link will automatically become the start point for your prototype, so you can play it in the web app. You’ll see the Start point icon appear in front of the Artboard’s name in the Canvas and in the corner of it’s icon in the Layer List. You can change the start point and have more than one, for more details see Using Start Points.

From version 90 of the Mac app, there are now two options for how an Artboard behaves when you Link to it:

1. Screen Artboards - will behave as always and simply replace the previous Artboard
2. Overlay Artboards - will appear on top of the previous Artboard. For more detail, see Using Overlays

You can choose between these two options for each Artboard in the PROTOTYPE tab of the Inspector.

Automatically Linking Artboards

You can use Prototype > Auto Link to Right/Left/Below to create a Link from the Artboard you have selected to the one immediately to the right, left or below. You’ll also find this option when you drag a Link you create to the Go to Artboard icon at the top-right of your Artboard. The menu option you see is based on the current Artboard Export setting in Settings > Layers. If you change this setting it will also change the direction of any existing auto Links.

Once the Link is created, it will update automatically if you switch the order of your Artboards.

How to edit Links

In the PROTOTYPE tab of the Inspector you can change:

• which Artboard a Link takes you to using the Target drop-down menu
• how to perform a Link’s transition using the Animation control The first option is useful when you want to Link between Artboards and Overlays on different pages in your document.

Select “Previous Artboard” in the Target drop-down menu, to tell the Mac app to return to whichever Artboard you were previewing before the current one. This is helpful when you have lots of Links leading to a single Artboard.

How to remove a Link

Choose Prototype > Remove Links from Selection, set your Link’s target to “None” or click the trash icon in the INTERACTION section in the PROTOTYPE tab of the Inspector to remove a Link.

How to use Links with Symbols

If you include a Link as part of a Symbol, you can reuse that same Symbol but individually override its Link’s target. You can also override the Link’s target to “None” if you don’t want it to link to another Artboard. The overrides appear in the DESIGN tab of the Inspector.