You can link mockups together to create a simple prototype for your site or software application. This can be useful for demonstrating click-through prototypes or for usability testing when you’re displaying your project in Full Screen Presentation mode or as an exported PDF.
Linking mockups together is as easy as choosing a mockup name from a drop-down menu. Simply click on a control that supports linking (most do, and here’s a workaround for those that don’t), and you’ll see a “Link” drop-down in the Property Inspector (click the “Show Link Inspector” link if you don’t see it).
Note: To learn how to create links from text strings inside other controls, see our article on making links in text actually work.
For controls that can have multiple targets, you’ll see something like this:
Once you have selected a mockup or web page to link to from the drop-down menu, the control will show a little arrow icon in the bottom-right corner. Links to mockups will show as a plain arrow, while links to web pages will show as an arrow with a box around it, as shown below.
Linking to Existing Mockups
The list is pre-populated with the names of the other mockups in the project. Select one to link to it.Note: You can even link to an alternate version by using this workaround.
Linking to a New Mockup
To link to a blank mockup that you haven’t created yet, click “Link to a New Mockup” and a new mockup will be created and linked from the selected control. Select “Link to a New Duplicate of This Mockup” to create a new mockup with the same content as the current mockup. A notification will be shown with the name of the new mockup. Clicking the notification will take you to that mockup.
Linking to a Web Page
You can also link to web URLs instead of other mockups, to show links to external sites or product pages. To do this, select the “Link to Web Address…” option from the drop-down and enter a web URL in the dialog that pops up.
Using Links in Presentation Mode
When you’re done linking your mockups up you can enter Full Screen Presentation mode and you’ll be able to click on the links you set up to test your prototype.
In Full Screen Presentation mode controls with links will have a red overlay on them and mousing over them will show a big hand pointer with the name of the target file or web page for the link (these options can be turned off in the Full Screen settings panel).
Click on a link to go to the referenced mockup file or web page. Web links will open in a new browser window. Links with a target of “Go Back (in Full Screen)” will go to the previous mockup when clicked (as shown here).
Here’s a short video showing the process of linking mockups together.