Linking two or more Artboards is the quickest way to create a simple prototype. You can add Links from any layer to any Artboard.
Adding interactions
Adding a link
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.
When you select a layer on the Canvas while the Prototype tab is open, a + icon will appear in the middle of the layer’s right-hand selection boundary. Click and drag it to start creating a Link.
You can choose to link to a previous Artboard or any other Artboard in your document. Both of these options are also available when you select multiple Artboards, so you can Link multiple Artboards at the same time.
The Artboard containing the layer or Hotspot you used to create your first Link will automatically become the Start Point for your prototype, so you can play it in the web app. A Start Point icon will appear next to the Artboard’s name in the Canvas, and also in the corner of its icon in the Layer List.
You can change the Start Point and have more than one — for more details see Using Start Points.
Artboards can display in two different ways in prototypes: either as a Screen where every Artboard replaces the previous one, or as an Overlay where Artboards will appear on top of the previous Artboard. See Using Overlays. You can choose between these two options for each Artboard in the Prototype tab in 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 you’ve created your Link, it will update automatically if you switch the order of your Artboards.
Editing Links
Editing interactions
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
Select Previous Artboard in the Target dropdown menu 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.
Removing a Link
To remove a Link, choose Prototype > Remove Links from Selection, then set your Link’s target to None. Alternatively, click the Trash icon in the Interaction section in the Prototype tab of the Inspector.
Using Links with Symbols
Interactions within 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 be None if you don’t want it to link to another Artboard. You’ll find overrides in the Design tab of the Inspector.