👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Linking Wireframes Together


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.

To add a link, click on a control that supports linking (most do, and here's a workaround for those that don't) and it will display a "Link" drop-down in the Property Inspector (click the "Show Links Inspector" link if it's not visible).

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 link hint in the bottom-right corner when you scroll over it.

bracket_links.png

You can highlight all links on the canvas by pressing Option (macOS) or Alt (Windows).

bracket_links.png


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 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 a Web Address..." option from the drop-down and enter a web URL in the dialog that pops up.


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 demonstrated here).

Here's a short video showing the process of linking wireframes together.