Balsamiq for Jira Cloud Documentation
- Introduction to Balsamiq Wireframes for Jira Cloud
- Adding a New Project to a Jira Issue
- 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 Jira (Closing the Editor)
- Using the Balsamiq Wireframes Panel
- Editing Existing Wireframes
- Adding a New Wireframe
- Deleting the Project
- A Couple of Little Treats for You!
- Editor Overview
- Adding and Arranging UI Controls
- Editing UI Controls
- Sharing and Reviewing
- Collaborative Editing
- Using Images and Icons
- Symbols
- Markup
- Linking Wireframes Together
- Full Screen Presentation Mode
- Alternates
- Exporting
- Importing
- Keeping Projects Clean and Organized
- Keyboard Shortcuts
- Balsamiq Wireframes for Jira Cloud Admin Guide
Introduction to Balsamiq Wireframes for Jira Cloud
This page contains usage instructions for Balsamiq Wireframes for Jira Cloud.
Using Jira Data Center (DC) or Server? If you are hosting Jira behind the firewall, please see this article instead.
Jira Cloud Administrators: the Balsamiq Wireframes for Jira Cloud Admin Guide is for you.
Balsamiq Wireframes for Jira Cloud 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 Jira Cloud attachments.
Adding a New Project to a Jira Issue
To add a new Balsamiq Wireframes project to a particular Jira issue, start by clicking the related Quick Add button, located under your Jira issue name.
This will reveal the Balsamiq Wireframes panel. From there, click on "Add Wireframes with Balsamiq" to add a new project.
Clicking this button will launch the Balsamiq Wireframes editor, allowing you to create your wireframes. This will also create a new Balsamiq Wireframes file (.bmpr file extension) attached to your Jira issue containing all the resources that belong to a project (wireframes, symbols, images, icons).
Alternatively, you can instead use an Image Link from a wireframe that you have already created. More details on this 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 Jira Cloud 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 Jira 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 how 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 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 (using the .bmpr extension), the easiest way to import it is to create a new project and use the "Project Menu > Import > Import from BMPR.." option.
Exporting to Other Versions of Balsamiq
You can export a project to another Balsamiq product by using the Project > Export... menu option and selecting the File tab from the dialog.
Selecting Everything will make an exact copy of your project and its resources.
Selecting Current Wireframe will create a BMPR file with only one wireframe.
Selecting A set of wireframes can be used for a few different reasons:
- To clean up a project by removing all the unused resources (no extra assets, symbols, or unwanted resources in the trash)
- To get feedback about specific wireframes, without sending the whole project which might be distracting
- To split a project into smaller ones that will be easier to manage
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 Jira issue until the project is expressly saved.
This can be done by selecting the Project > Save Project option or by closing the editor.
Returning to Jira (Closing the Editor)
When you are done editing your wireframes, you can exit the editor by pressing the Back to Jira button in the Top Bar of the editor.
This will also save the current project and update the version that will be now visible in the Balsamiq Wireframes Panel.
Using the Balsamiq Wireframes Panel
Once you have created a new project, the Balsamiq Wireframes Panel will appear on your Jira issue.
The panel will show the thumbnails of the wireframes contained in the currently saved version of the Balsamiq project. A variety of actions are available from the Balsamiq Wireframes Panel.
Note: The Balsamiq Wireframes panel follows your Jira personal setting for "Light and dark themes". If you set your theme to "Dark", the Balsamiq Wireframes panel appears dark:
Editing Existing Wireframes
There are two ways to open the editor from the Balsamiq Wireframes panel:
- You can click the "edit" icon that is shown when your mouse is over each thumbnail. The editor will open showing the selected wireframe.
- You can click the Edit button: the editor will open the project on the first wireframe.
Note: If you have read-only permission on an issue, you will still be able to access the Full Screen viewer but you will not be able to edit the wireframes.
Adding a New Wireframe
Clicking the Add Wireframe button will open the editor and create a new wireframes named "New Wireframe 1".
You can also add wireframes directly from within the Balsamiq Wireframes editor.
Deleting the Project
If you want to remove a project from the Jira issue you can use the Delete Project button.
Note: This action can not be undone.
A Couple of Little Treats for You!
Built-in Background Music
For years we've been suggesting people use headphones when working on wireframes, to help get in the creative zone. So we asked ourselves: why not give our awesome users a built-in, get-in-the-zone-inducing track to listen to? And so we did!
Just go to the View menu, click "Play Background Music", and get to work!
The track is called Ascension, by Dr. Christopher Lloyd Clarke B.Sc, Msc.D. Meditation music composer and founder of Royalty Free Meditation Music.com.
We cut the track down to 25 minutes, added a Zen bell, then added 5 minutes of nature sounds recorded by our own Michael Angeles in his hikes around Marin County, CA. We then made the resulting 30-minute track loop 4 times.
Why the (25 + 5)*4, you ask? Because this way you can use the music to time your Pomodoros, of course!
What Should I Make for Dinner?
We know how it is. It's 5pm, and you've just had a glorious day of work, creating awesome wireframes for your next project.
And then it hits you: what should I make for dinner tonight?
That's where we come in.
Go to the Help menu and select "What Should I Make for Dinner?". You'll be taken to this page.
Lots and lots of easy, every-day recipes straight from the Balsamiq team's kitchens, in super-quick video format you can watch while you put your jacket on to leave the office.
Just browse through the list of videos, pick one that looks good, jot down the ingredients and run out the door.
Nothing fancy here, this is what we cook for ourselves when we don't know what to make.
Buon appetito! 🙂