- Introduction to Balsamiq Wireframes for Confluence Server
- Adding a New Project to a Confluence Page
- Using the Balsamiq Wireframes Editor
- Collaborating with Other Users in Real Time
- Copying or Moving Wireframes between Projects
- Importing from Other Versions of Balsamiq
- Exporting to Other Versions of Balsamiq
- Saving the Project
- Returning to Confluence (Closing the Editor)
- Using the Balsamiq Wireframes Macro
- Editing Existing Wireframes
- Using the Balsamiq Wireframes Macro Editor
- Editor Overview
- Adding and Arranging UI Controls
- Editing UI Controls
- Sharing and Reviewing
- How to Display Multiple Wireframes on a Confluence Page
- Collaborative Editing
- Using Images, Assets, and Icons
- Linking Wireframes Together
- Full Screen Presentation Mode
- Keeping Projects Clean and Organized
- Keyboard Shortcuts
- How to Display Wireframes on Multiple Confluence Pages
- Balsamiq Wireframes for Confluence Server Admin Guide
- Real-Time Collaboration Service Configuration
- Real-Time Collaboration Service Troubleshooting
- Updating from Old Versions of Confluence Server
- Balsamiq Wireframes for Confluence Server Transition Guide
- Troubleshooting 'Unable to Save Project Draft' Errors
- Migrating from Confluence Server to Confluence Cloud
Introduction to Balsamiq Wireframes for Confluence Server
This page contains usage instructions for Balsamiq Wireframes for Confluence Server.
Using Confluence Cloud? Please see this article instead.
Confluence Server Administrators: the Balsamiq Wireframes for Confluence Server Admin Guide is for you.
Balsamiq Wireframes for Confluence Server provides very similar functionality to the other versions of Balsamiq Wireframes.
The main difference is that the Balsamiq project files are stored and managed as Confluence Server attachments.
Adding a New Project to a Confluence Page
Adding a new Balsamiq Wireframes project to a wiki page is very similar to adding an image:
Simply edit the page, position the cursor where you’d like your wireframe to be, then click on the Insert menu and select “Balsamiq Wireframes” from the list.
This will launch the Balsamiq Wireframes editor, where you can create your wireframes (or import existing ones). This will also create a new Balsamiq Project file (.bmpr file extension) attached to your wiki page containing all the resources that belong to a project (wireframes, symbols, images, icons).
If you do not see the menu item, please check with your Confluence Server administrator that the Balsamiq Wireframes for Confluence Server app is installed and that you have editing permission on the current page.
Using the Balsamiq Wireframes Editor
The Balsamiq Wireframes editor allows you to create wireframes just like our other products. Start with the application overview to learn more about using the editor.
Collaborating with Other Users in Real Time
Balsamiq Wireframes for Confluence Server supports real-time collaboration between users. You only need to have everyone launch the editor on the same project. Everyone’s changes are shared in real-time with all your collaborators.
The other users connected will be shown in the top right corner of the editor. Hovering over their picture shows their Confluence username.
Copying or Moving Wireframes between Projects
Sometimes you might want to copy or move a wireframe (or a few) from one project to another. Here is a simple way to do it:
- Open the two projects (each in its own browser tab or window)
- In the source project, select the wireframe(s) you want to copy or move
- Copy the wireframe(s) (CTRL/⌘+C)
- In the target project, paste your wireframe(s) (CTRL/⌘+V)
That’s it! You may now delete the wireframe(s) from the source project if you wish.
This simple method works across all our Balsamiq Wireframes products.
Note: Symbols and Assets/Images are also transferred during this process so no need to worry about those.
Importing from Other Versions of Balsamiq
If you have a project created in another Balsamiq product (that uses the .bmpr extension), you can directly upload your project to your Balsamiq Cloud Space, as detailed here.
Another easy way to import it is to create a new project and use the "Project > Import > Import from BMPR.." option.
Exporting to Other Versions of Balsamiq
To export your project to another Balsamiq product, all you need to do is download it and open it there. Selecting the Project > Download Project BMPR option will create a .bmpr file to download containing all the wireframes, symbols, and images used in the current project.
Saving the Project
All the changes made on your project in the editor are always autosaved and visible by the collaborators that are editing the same project in real time.
However, the changes made in editing mode (i.e. inside the Balsamiq Wireframes editor) will not be flushed to the official version that is attached to the Confluence page until the project is expressly saved.
This can be done by selecting the Project > Save Project option or by simply closing the editor.
Returning to Confluence (Closing the Editor)
When you are done editing your wireframes, you can exit the editor by selecting Project > Exit Back to Confluence.
This will also save the current project and update the version that will be now visible in the Balsamiq Wireframes macro.
Alternatively, you can perform the same action by clicking on the breadcrumb link pointing to the Confluence page containing your BMPR project, on the top-left part of the menu bar.
Using the Balsamiq Wireframes Macro
Once you have created a new project, the Balsamiq Wireframes macro will appear on your Confluence page.
The macro looks like a plain image, but hovering it will reveal a control bar that allows you to launch the editor on the selected wireframe or enter the Full Screen Presentation mode.
Editing Existing Wireframes
There are two ways to open the Balsamiq Wireframes editor:
Click the "edit" icon that next to the wireframe name in the macro or Full Screen viewer.
Edit the wiki page, then double-click the macro or click the "Edit" button.
Note: If you have read-only permission on an page, you can access the Full Screen viewer but you cannot edit the wireframes.
Using the Balsamiq Wireframes Macro Editor
Once you have created a new project, the Balsamiq Wireframes macro editor will be accessible from the Confluence page editor. You simply need to edit the Confluence page, click the macro and press Config.
The macro editor lets you configure the views of the Balsamiq Wireframes project that will be shown in the Confluence wiki page.
You can chose to show a thumbnail grid or, if you are using the single wireframe view, you can configure the initial wireframe, its size and alignment. You can also launch the Balsamiq Wireframes Editor and continue to edit your project.
To add multiple views on the same project, just add more macros and select a different wireframe in the Starting Wireframe pulldown.