Balsamiq for Jira Cloud Documentation
- Introduction to Balsamiq Wireframes for Jira Cloud
- Editor Overview
- The Toolbar
- The Quick Add Tool
- The UI Library
- The Canvas
- The Navigator Panel
- The Property Inspector
- The Comments Panel
- Project Properties
- The Trash
- Working on Small Screens
- 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
Editor Overview
The Balsamiq Wireframes editor interface is made up of five primary areas:
- the Toolbar (Left Bar, Top Bar, Right Bar)
- the UI Library
- the Canvas
- the Navigator
- the Right Panels (Property Inspector and Comments).
Each area is described below.
The Toolbar
The outer edge of the Balsamiq Wireframes editor has a series of buttons and fields that allow you to wireframe with just the canvas.
We've split the toolbar into three main sections.
The Left Bar
The Left Bar has four buttons that help you to navigate and add wireframes to your project:
- Toggle Navigator - This allows you to diplay and hide the navigator. Great for clearing up screen real estate.
- New Wireframe - This adds a blank wireframe to your project.
- Previous Wireframe - This switches the selected wireframe to the one above it in the Navigator (it will be greyed out if there are no wireframes above this one).
- Next Wireframe - This switches the selected wireframe to the one below it in the Navigator (it will be greyed out if there are no wireframes below this one).
The Top Bar
The Top Bar has more functions than The Left Bar.
The upper-left holds three of the editor's menus.
- The Smiley Menu - This menu has a lot of the editor's view options as well as administrative options like Manage Your Subscription (only in Balsamiq Cloud). You can close the editor from here.
- Project Menu - This menu has all of the options for the project.
- Wireframe Menu - This menu has all of the options for the currently selected wireframe.
The middle part of the Top Bar has four buttons.
- Undo - This reverts the last change you made.
- Redo - If you undid the last action, you can use this button to redo it.
- Edit Menu - This menu has all of the editing options for the currently selected wireframe.
- Trash - This button only appears when there are items in the trash. It opens the Trash Menu.
Finally, the upper-right portion of the Top Bar has a couple more useful tools.
- Quick Add - This is the Quick Add field, which you can read more about here.
- Share Menu - This opens the Project's Sharing settings.
- Avatar Menu - This is where you can open your User Settings, change Spaces (if you have more than one), or Create a new Space.
Note: The Share Menu and Avatar Menu options listed above are specific to Balsamiq Cloud.
The Right Bar
The Right Bar is also split into three sections.
The top of the Right Bar is all about toggling pieces of the editor.
- Toggle UI Library - This button will toggle the UI Library.
- Toggle Property Inspector - This button will toggle the Property Inspector.
- Toggle Comments Panel - This button will toggle the Comments Panel.
The middle of the Right Bar allows you to control your view of the canvas.
- Zoom Out - Zooms the canvas out (making things appear smaller).
- Zoom In - Zooms the canvas in (making things appear larger).
- Zoom to Actual Size - Adjusts the canvas so that all the controls are their actual size.
- Zoom to Width - Adjusts the canvas to best fit the width of the wireframe in the current diplayed canvas.
- Zoom to Fit - Adjusts the canvas to best fit all the wireframe's controls in the current diplayed canvas.
The bottom of the Right Bar has only a single button.
- Full Screen Presentation Mode - Pressing this button will open Full Screen Presentation Mode
The Quick Add Tool
The Quick Add tool is the best way to add UI controls to your wireframes. To use quick add, click inside the quick add input box (or press / or + to enter it).
Type a few letters from the name of a UI control or icon and Quick Add will diplay a list of suggestions. Use your mouse or arrow keys to scroll down the list, and click (or press ENTER) to add the control or icon on the canvas. You can also use SHIFT+ENTER to place the control where your mouse cursor is on the canvas.
For example, typing "bu" diplays a list containing "Button", "Button Bar", "Help Button", "Radio Button" and "Round Button". Typing "hel", on the other hand, only returns "Help Button". Pressing the ESC key makes the list disappear.
Tip: As you become familiar with Quick Add, you can hide the UI Library and only use Quick Add to add UI elements to your wireframes. This helps to maximize your canvas area.
The UI Library
The UI Library, or User Interface controls Library, is the long strip of user interface controls just below the toolbar. It lists all of the UI control types that are included as well as Assets, Icons, and Symbols. The main goal of the UI Library is to let you add UI controls to the canvas, but you can also use it to get inspiration for your wireframes.
The UI Library is divided into four main sections: UI Controls, Icons, Images, and Templates. This helps you sort through a lot of controls efficiently without getting lost in a sea of Icons or Images.
To add a new UI control to the canvas, select the control type you wish to add and then either drag it to the canvas below, or double-click it.
The UI Library is resizeable. If you grab the bottom of the library you can drag it down to make the library bigger, or move it up to make it smaller.
The UI Library can also be toggled on and off by either clicking the icon in the Right Bar, or by using the keyboard shortcut CTRL/⌘+L.
Using Templates
Our Template section contains dozens of highly curated templates designed to speed up your wireframing.
Once you have pressed the Templates button, the UI library will expand and display all of the templates available. You can browse the various collections by selecting a filter from the filter button bar.
Once you find a collection or folder you want to explore, click on it to open it, and then you can drag any of the templates from that folder into your project.
You can also use the Quick Add tool to search for a template you would like. If there are multiple entries, the result will show a folder with the number of results next to it.
Selecting the result will display all the applicable templates in the UI Library. You can add any of them by dragging them onto your canvas or, if you want them all, you can press the Add All as New Wireframes button.
The Canvas
This is the main working area of the editor. You can add, move, resize, and tweak any control added to the canvas. Check out Adding and Arranging UI Controls to learn more.
The canvas is large - it's 20000px x 20000px - and flexible so you can scroll in every direction to make room for bigger wireframes or more controls if you need to.
When you zoom in or out, the Mini-map appears to help you navigate large wireframes with lots of screens or pages.
Note: If you are working on a small screen or have very large wireframes you might want to check out this section on hiding the panels to make more room for the canvas.
The Navigator Panel
The navigator panel on the left displays the list of wireframes. The currently selected wireframe is highlighted.
You can select multiple wireframes in the navigator panel by holding down CTRL or SHIFT and clicking on them. They can be displayed in text-only form, or with a thumbnail preview.
Jumping in-between wireframes can also be done using your keyboard via CTRL+TAB or by clicking on one in the navigator and using ↑ and ↓. You can also hide the navigator panel by clicking the navigator toggle in the Left Bar (keyboard shortcut: CTRL/⌘+J).
Note: Clicking on the two icons in the upper-right-hand corner of the Navigator will toggle the view between a list of wireframe names, and a thumbnail preview of your wireframes.
Wireframes can be reordered by dragging them up and down in the navigator panel. This can be useful when exporting to PDF, for example.
Using a Hierarchy
The navigator panel also offers a hierarchical structure to better organize your wireframes.
To use it, select the wireframe you wish to be the child and press TAB. The child wireframe will be placed in a tree hierarchy below the wireframe above it.
You can then use the arrows to the left of the parent wireframe to display and hide the wireframes under it.
To restore it to the top level, use SHIFT+TAB. The animation below demonstrates nesting wireframes in action.
Context Menu Actions
A context menu is also available for the wireframes that are open in the navigator panel. You can either right-click on the selected wireframe, or click the small caret that appears when you hover over it, to open the menu.
This menu contains options such as rename, cut, copy, move to trash, and duplicate. It also contains actions for working with alternates.
Note: You can select multiple wireframes (using SHIFT+Click) and copy/paste/cut (or duplicate) them all at once.
Renaming Wireframes
Renaming wireframes can be done via the context menu or by double-clicking on the name of the wireframe in the navigator panel. Wireframes with links will automatically be updated when a linked wireframe name changes.
The Property Inspector
The Property Inspector allows you to set some common properties for controls, such as alignment, position and size as well as specific settings for certain controls (selection state, text properties, color, etc.).
You can toggle the Property Inspector with the keyboard shortcut CTRL/⌘+; or ALT/OPTION+ENTER. When hidden you can also toggle it by right-clicking a control and selecting "Properties...".
If you have multiple controls selected it will display properties that are common to all the selected controls, as well as options for aligning and distributing the selection.
When no controls are selected, the Property Inspector shows notes for the selected wireframe.
Note: You can format notes text using the syntax described here to make text bold, underlined, etc.
For Symbols, it also shows the count and name of wireframes where the selected object is used.
The Comments Panel
The Comments Panel allows you to collaborate on your designs by sharing feedback asynchronously. It also is useful for taking notes for yourself as you work. You can display the comments panel by clicking on the icon in the Right Bar.
A blue dot indicates that a Comment is unread. Comments can be marked as read and unread by clicking the blue/grey dot. You can add Callout markers to indicate specific places in the wireframe where the comments applies or add a link to an alternate version.
You can learn more about comments in Sharing and Reviewing.
Project Properties
Every Balsamiq Wireframes project has a set of properties that you can define on a project level, including:
- Style: The Look and Feel of the project
- Font and Colors: The specific font and colors you want your project to use
- Project Description: A place to describe your project to stakeholders
All three properties are in the Project Menu of your project.
Project Style
Project Style is the first option in the properties section of the Project Menu, and gives you two options.
- The Sketch Style will more closely resemble as pen and paper sketch - something like you would design on the back of a napkin. Great for giving the feeling of fast ideation.
- The Clean Style is a much more straight-lined, clean corners style that is great for presenting your project.
The screenshots below show a comparison of a sample design in the default "sketch" and "clean" styles, respectively. Click to display larger images.
Font and Colors
Font and Colors is the second option in the properties section of the Project Menu, allowing you to adjust the font the project uses, the color used for links, and the color used for selections in controls (like menus).
The default font is our very own Balsamiq Sans font. To maximize compatibility across all of our products, we have also hand picked fonts from the Google Fonts catalog.
Note: If you want to use a specific project font, we recommend that you set it before you start creating your wireframes. Changing the project font may adversely affect existing wireframes in your project. Each font has different dimensions and proportions so switching fonts may cause controls to overlap or line up unevenly.
Project Description
Finally, the last option in the properties section of the Project Menu is the Project Description.
The Project Description Panel is a blank canvas where you can type whatever you'd like. We think it's best used for summarizing your project for prospective stakeholders and collaborators, but you can really use it for whatever you want.
The Trash
The Trash is available for the Wireframes, assets, and Symbols you have deleted. This allows to keep your project tidy as you make progress; browsing (and recovering) earlier concepts when needed.
Note: The Trash icon only shows up if there are items in the Trash.
To recover a trashed item, click on the Trash icon in the Top Bar, select the desired item and click "Restore". The other options allow to delete the selected item permanently or empty the entire Trash.
Working on Small Screens
When working on a small laptop screen, you might want to maximize the amount of canvas available.
For this reason the UI Library, Navigator, and Property Inspector can all be toggled on and off using the mouse or keyboard.
The keyboard shortcuts for toggling them are listed here:
- UI Library: CTRL+L
- Navigator: CTRL+J
- Property Inspector: CTRL+;
Note that you can still add controls to the canvas when the UI Library is hidden using Quick Add. And you can navigate between your wireframes using the dedicated icons in the Left Bar that appear when the Navigator Panel is hidden.
- Introduction to Balsamiq Wireframes for Jira Cloud
- Adding and Arranging UI Controls