You can link wireframes 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 wireframes together is as easy as choosing a wireframe 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 wireframe 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 wireframes 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 Wireframes
The list is pre-populated with the names of the other wireframes in the project. Select one to link to it.
Linking to a New Wireframe
To link to a blank wireframe that you haven’t created yet, click “Link to a New Wireframe” and a new wireframe will be created and linked from the selected control.
Select “Link to a New Duplicate of This wireframe” to create a new wireframe with the same content as the current wireframe. A notification will be shown with the name of the new wireframe. Clicking the notification will take you to that wireframe.
Linking to a Web Page
You can also link to web URLs instead of other wireframes, 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 wireframes 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 wireframe 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 wireframe when clicked (as shown here).
Here’s a short video showing the process of linking wireframes together.