Linking Mockups Together

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.

The list is pre-populated with the names of all the mockups in the same project as the mockup you’re editing.

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 pull-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.

Linking to a Web Page

You can also link to web URLs instead of other mockups, to show links to external sites or existing product pages. To do this, select the “Web address…” option from the drop-down and enter a web URL in the dialog that pops-up.

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.

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 mockup or web page for the link.

Click on a link to show the referenced mockup or web page. Clicking on a control that has a web link will open a new browser window when in Full Screen Presentation mode or in a PDF.

One more thing: you can use the left and right arrow keys on your keyboard to go back and forth between the mockups you have visited in your run-through.

Here’s a screencast (1:21 long, no audio) showing linking up some mockups and running through the resulting prototype:

You can view the full tutorial for creating these mockups here.

Edit this page