Balsamiq for Confluence Cloud documentation

Sharing and reviewing

Balsamiq Wireframes is designed for collaboration and offers many ways for you to get feedback on your designs. This document outlines a few different ways so that you can pick the right one to fit each situation.

To learn how to work on the same wireframes together, see our article on Collaborative Editing.

Reviewing and commenting

The "Review and Comment" mode is a great option for anyone who does not need to edit the wireframes. you can switch to this mode from the top-right option in the toolbar.

gif

The border color around the profile picture switches from green to orange.

The comments panel allows you to collaborate on your designs by sharing feedback asynchronously or, if you prefer, making notes for yourself as you work. A new comment will generate a notification in the toolbar.

Callouts

You can add Callout markers to indicate specific places in the wireframe where the comments applies. See the image below to learn how.

gif

Linking to an alternate version

You can also add a link to an alternate version by using the "Add Link to Alternate" drop-down at the bottom of the comments panel.

Comment actions

Once a comment is added, each reviewer can reply to it and like it. You can also edit and delete your own comments.

Sharing an Image Link is a great way to share your wireframes with folks.

You can embed the Image Link in other Confluence pages, Jira issues, external webpages, or applications that support direct image links, and keep your clients or company updated on the progress of a project.

Creating an image link from the Balsamiq editor

To create an Image Link, select the dedicated option available in the navigator panel's context menu for any wireframe and click on "Create Image Link".

Note: You can either right-click or click the small arrow that appears when you hover the wireframe.

An Image Link will be created and copied to your computer's clipboard, allowing you to share it anywhere you want. What's more, the image will automatically update if you make changes to the wireframe and close the editor.

If you need to copy the link again (or manually update the image), you can click on the wireframe's link icon from your navigator.

Once clicked, the link will again be copied to your computer's clipboard.

Creating an image link from the Confluence page

You can also create an Image Link outside of the Balsamiq editor. To create it, open a Confluence page that has a Balsamiq Macro on it and grab the link from the published page.

This will present a window with a direct link to an image of your wireframe. you can copy it to your computer's clipboard by clicking the Copy button.

Embedding your image on another Confluence page

As an added bonus, you can use the Image Link to embed a copy of the entire project on a separate Confluence page, allowing stakeholders to review and comment on it, as if they were using the Balsamiq Editor. To do this, add a new Balsamiq Macro to the page, and you'll be presented with an option to create a new project, or embed a project with an image link.

Clicking on Image Link (and then pasting the link) will place a copy of the project on that page. This version of the project will also update if you update the original wireframe.

Deleting an image link

You can delete an Image Link at any time from the dialog available in the navigator panel's context menu. Deleting it will generate an error message for anyone that tries to use/share the Image Link.

Note: Creating Image Links will skip the Atlassian authentication. The created URL is hard to guess but you should know that if someone has the URL, they can have access to the image, the name of the wireframe and the name of the related project.

Using the Balsamiq Trello Integration (Power-Up) allows you to share a wireframe if your team works in Trello.

You can add it directly from Trello's Menu > Power-ups, or from any Trello Card.

Note: The Power-Up is included with any Balsamiq Wireframes subscription.

Once the Power-up is installed, here are the three steps for adding a wireframe to a Trello card:

Create an Image link in Balsamiq and copy it to your clipboard.
Click on the Balsamiq Wireframes Power-Up button in the Trello Card.
Paste your Image Link and click on "Add".

The Trello Card now includes an image of your wireframe, used as your Card cover.

Note: The image will automatically update if you make changes to the wireframe and close the Balsamiq editor.

From the Trello Card, people can directly access your Balsamiq project by clicking on your Project name next to the wireframe image, depending on their Confluence permissions.

Full Screen Presentation Mode

The Full Screen Presentation Mode is great for sharing your wireframes with stakeholders or for usability testing. If you have created links between your wireframes, the links will be clickable.

To enter it, click on the Full Screen icon in the top-right corner of your toolbar. Alternatively, you can select "Full Screen Presentation" from the View menu, or use the CTRL/⌘+f keyboard shortcut.

The application will expand to take up your whole screen, with your wireframe centered on it.

You can also share a direct link to this view by allowing it from the settings panel and copying the generated link.

Note: Sharing a direct link will skip the Atlassian authentication. The created URL is hard to guess but you should know that if someone has the URL, they can access the project in Full Screen Presentation mode.

You can learn more about this feature in Full Screen Presentation Mode.

PDFs generated in Balsamiq Wireframes are completely interactive. That means that they not only display your project as you have designed it, they will also respect any links you have added to the project. This is one of the best ways to share your project with collaborators and clients who don't need to make changes.

The PDF will be created in high resolution and with selectable text (good for the reviewers to copy/paste from). More details about exporting to PDF can be found here.

You can export all of your wireframes to static PNG images, and send those to your clients if needed. You can learn more about it here.