Balsamiq Mockups 3 For Desktop Documentation
Balsamiq Mockups 3 For Desktop Documentation
Balsamiq Mockups 3 For Desktop Documentation
Balsamiq Mockups 3 is the result of nearly a year of heads-down coding to create the
product that our customers have been asking for and the product we wanted for ourselves.
The most noticeable changes are the two "biggies" that people have asked for since the very
beginning: Support for projects (bundled files, multiple windows) and getting rid of that
"floating property thingy" (the property inspector).
But just as important was the work that was done under the hood to make it faster and
smarter and the little tweaks across every part of the experience that we hope will make
using it even better.
In this article you'll find information about how to update, what's new and, of course, how
to import your Mockups 2 BMML files. If you are new to Balsamiq Mockups or want to dive
deeper after reading this article you can head over to the documentation table of contents or
application overview next.
How to Update
Balsamiq Mockups 3 is the most current version of our powerful editor. If you are using any
of our web apps, it will update automatically. If you want to use it on the Desktop, you can
grab the latest version from our download page. It's a free update for existing customers,
you won't even need to re-register.
Balsamiq Mockups 3 for Desktop will run side-by-side with Balsamiq Mockups 2 for
Desktop (as a separate application) so no need to uninstall your current version to use it.
See below for how to import Mockups 2 BMML files.
While it has been rigorously tested, if you find any bugs or issues, tell us about it!
Projects!
A new user interface
Easier look and feel customization
Better Symbols
Better icons
Better images and assets
Full screen mode
Notes
Trash
Alternates
Music???
Projects!
Finally. Not only can you have separate windows for different groups of mockups, but all the
"stuff" that belongs to a project (mockups, symbols, images, icons) is in ONE file. This
makes it much easier to send and move files and keep everything together.
A New User Interface
Gone is the annoying flying property inspector! Now you have mockups on the left and
properties on the right. Simple, predictable and quick. The UI Library is at the top where it's
always been but now it's a bit more compact.
You can toggle the properties panels and UI Library independently by clicking the icons next
to the Quick Add box or via keyboard shortcuts.
And, of course, you can hide all panels using the icons for each panel, getting you into Zen-
like wireframing nirvana.
Getting around and performing common actions is easy with the icons in the toolbar.
We also moved the skin switching options into the new Project Info panel to make them
more obvious (many people never knew about our wireframe skin). Finally, the default
selection color is also configurable from this new panel.
Better Symbols
In the previous version, we called Symbols an "advanced feature." Well, no longer. Symbols
are now for everyone. Symbols allow you to create templates, masters, and other reusable
components to save time and ensure consistency. They are especially useful for big projects
and custom controls and are central to our Wireframes To Go site.
You can now just jump over to the Symbols panel and create a new one from scratch and it
will appear in the "Symbols" tab in the UI Library. You can still create them the old-
fashioned way (creating a named group and clicking the "Convert To Symbol" button).
We also now show Symbols as a list inside their Symbol Library, so you can more easily
navigate between them and know which Symbol you're editing.
Finally, we make it much easier to import Symbols. Just click the "Import Symbol Library"
icon and select the file to import.
Better Icons
Big changes here.
First of all, icons now have their own category in the UI Library so you can drag and drop
them just like any other control.
Not only that, they show up in the Quick Add results, saving you time when searching by
name or keyword.
Icon search results are shown below any UI controls that match the text you enter.
And you'll quickly notice that we have a completely different set of icons than the previous
version. We switched our icons over to the incredibly popular Font Awesome icon set. This
means that there are now over 500 icons pre-installed.
You can add images to your project without placing them in your mockups first. Click the
"Import Asset..." icon to add a file from your computer or the "Download Asset..." icon to
add an image from Flickr or the web. Or just drag an image onto the canvas from your
computer.
You can also delete, rename, replace and download images from the context menu in the
panel.
Trash
Balsamiq Mockups 3 now has a trash for mockups, assets, and Symbols you have deleted.
This makes it easy to keep your project tidy as you make progress but still allows you to
browse or recover earlier concepts.
To recover a trashed object from the Trash panel click the context menu arrow and select
"Restore." You also have the option to delete permanently.
Alternates
Alternates (also sometimes referred to as versions or branches) allow you to create
variations on a single mockup design without adding more mockups to your project. Read
the full documentation here.
Music???
Yes, built-in background music to help you get into your creative zone! Check out the blog
post for more details.
We hope all these changes are welcome and that Balsamiq Mockups 3 still feels like the
application you've come to know and love, but better! If you have any thoughts or feedback,
please let us know!
To convert your existing project folders or ZIP files into BMPR files, just head to the Project
> Import menu.
Select what you'd like to import and your old files will be imported and a new BMPR file will
be created.
Feedback Welcome
We'd love to know what you think of it. If you find any issues or have any comments, please
don't hesitate to shoot us an email or post Balsamiq Forums. We'll see you there!
Balsamiq Mockups is a user interface design tool for creating wireframes (also called
mockups or low-fidelity prototypes). You can use it to generate digital sketches of your
product ideas to facilitate discussion and understanding before any code is written.
Each Balsamiq Mockups file (with a .bmpr file extension) represents one project and can
contain many mockups and images, which are stored together in a single .bmpr file.
Mockups for different projects should be created in separate Balsamiq Mockups files. To
create a new project select Project > New Project from the menu.
The Balsamiq Mockups user interface is made up of five primary areas: the toolbar, the UI
Library, the canvas, the navigator panel and the properties panel. Each is described below.
Note: You can watch a video covering basic usage of the application in our Mockups
Intro Video tutorial.
The Toolbar
The toolbar contains a series of icons for performing actions on other areas of the user
interface.
The group of icons in the center of the toolbar is for commonly-performed canvas
functions. These are actions that you are probably used to from text editors or other
drawing tools, such as copy, paste, group, align and zoom. The last icon is for toggling
markup (read about markup here).
The final section of the toolbar on the far right contains the Quick Add tool, toggle icons for
the UI Library, Property Inspector and Project Info Panel, and an icon to enter Full Screen
Presentation Mode.
The top of the toolbar shows the name of the project, which you can double-click to rename
(or go to Project > Rename Project... in the menu).
For example, typing "bu" shows 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 ESCape key makes the list disappear, as one would expect.
Try out Quick Add now! As you become familiar with it, you could even hide the UI Library
and simply use Quick Add to add UI elements to your mockup. This maximizes both your
mockup canvas area and your speed!
The UI Library
The UI Library, or UI controls Library, is the long strip of UI controls just below the toolbar.
It lists all of the UI control types that come with Mockups as well as Assets, Icons, and
Symbols. The main goal of the UI Library is to let you add UI controls to the mockup canvas,
but you can also use it to see what's possible and to get inspiration for your UI mockup.
To add a new UI control to the canvas, select the control type you wish to add then either
drag it to the mockup canvas below or simply double-click and Balsamiq Mockups will place
it on the mockup canvas for you.
The UI Library can be toggled on and off in several ways: clicking the icon to the right of the
Quick Add box, using the keyboard shortcut CTRL/CMD+L, or by selecting View > UI Library
from the application menu.
The mockup canvas grows and shrinks with your application window, so you can make
room for bigger mockups if you need to.
The maximum size for each wireframe canvas in Balsamiq Mockups 3 is 4056x4056 pixels.
If your wireframe bumps against the maximum canvas size, you could try using a breakline
to indicate continuation. This is something that designers often do in wireframe specs.
Mockups supports breaklines in the Browser, Rectangle, Geometric Shape and Horizontal
Rule controls.
Note: If you are working on a small screen or have very large mockups you might want
to read this article on hiding the panels to make more room for the canvas.
You can move between mockups or assets using your keyboard via CTRL+Tab or by clicking
on one in the navigator and using the up and down arrow keys.
Mockups can be reordered by dragging them up and down in the navigator panel. This can
be useful when exporting to PDF, for example. The order of your mockups will be
remembered when you close and reopen your project, even if opened on a different
computer.
To use it, select the mockup you wish to be the child and press the Tab key. The child
mockup will be placed in a tree hierarchy below the mockup above it.
You can then use the arrows to the left of the parent mockup to show and hide the mockups
under it.
The contents of this menu vary depending on which type of object is selected (mockup,
asset, symbol, or trash) but it generally contains options such as rename, move to trash,
and duplicate. In the Mockups view it also contains actions for working with alternates.
Renaming Mockups
Renaming mockups can be done via the context menu or by double-clicking on the name of
the mockup in the navigator panel. Mockups with links will automatically be updated when a
linked mockup name changes.
Thumbnail grid view is available when viewing mockups and assets, and is the only view
available for trash.
Trash
Balsamiq Mockups 3 has a trash for mockups, assets, and Symbols you have deleted. This
makes it easy to keep your project tidy as you make progress but still allows you to browse
or recover earlier concepts.
To recover a trashed object from the Trash panel click the context menu arrow and select
"Restore." You also have the option to delete permanently.
For this reason the UI Library, Navigator, and Properties panels can all be toggled on and
off using the mouse or keyboard.
These panels are highlighted below along with the icons that can be used to toggle them on
or off.
UI Library: ⌘ + L
Navigator: ⌘ + J
Properties Panel: ⌘ + ;
Project Info Panel: ⌘ + ,
Hiding all of the panels results in a user interface that looks like this:
The associated toolbar icons turn from blue to white when the panels are not shown.
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 mockups using the additional toolbar icons that
appear when the Navigator Panel is hidden.
Balsamiq for Desktop Docs > Sharing in Balsamiq Mockups 3 for Desktop
Collaboration is the foundation of Mockups. From working with your clients and customers,
to collaborating with your designers and programmers, Mockups was built with
collaboration at its core. Here are the ways you can share your projects.
Tell your clients to install Balsamiq Mockups and open the file(s) you sent. They will be able
to go full screen and click around or view the mockups in the editor. During the 30 day trial
period they’ll be able to make changes and save them.
When the trial expires, they won’t be able to edit but they’ll still be able to view them, click
the links, and even copy the text strings if needed.
Share an Interactive PDF Document
PDFs generated by Mockups 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 as well. This is one of the best ways to share your project with collaborators
and clients who don't need to make changes.
Note: PDFs with links also work great on mobile phones and tablets!
Real-Time Collaboration
Real-time collaboration is available now in six of our apps:
Balsamiq Cloud
Balsamiq Wireframes for Google Drive
Balsamiq Wireframes for Confluence Cloud and Confluence Server
Balsamiq Wireframes for Jira Cloud and Jira Server
Yes No
CONTACT US TWITTER
Privacy Policy ·
Terms of Service · All trademarks © their respective owners
© 2008-2020
Balsamiq Studios, LLC · Federal EIN 26-2200095
(W9 Form)
Balsamiq for Desktop Documentation
Adding UI Controls
To add UI controls to your mockup, double-click or drag a control in the UI Library or type a
keyword into the Quick Add tool.
You can also duplicate controls already on the canvas using copy and paste or the duplicate
command (CTRL/CMD + D). ALT/Option + drag will also duplicate controls and allow you to
place them using your mouse.
To select a control that is behind another control, right-click on the top control to bring up
a menu that allows you to select controls behind it.
Note: To see this and the other techniques in this article demonstrated in a video, see
this tutorial on Tips for Working with Controls.
Moving UI Controls
Once you have selected one or more UI controls, there are a few different ways to move it
on the canvas.
You can drag it with your mouse (hold down the SHIFT key to maintain the original
horizontal or vertical position)
You can "nudge it" one pixel at a time with your keyboard's UP/DOWN/LEFT/RIGHT
keys
You can move it with bigger steps (10 pixels) by holding down SHIFT and using your
keyboard's UP/DOWN/LEFT/RIGHT keys
You can move controls to be aligned in one direction by using the align tools shown
below
If you ever want to temporarily disable this feature, you can hold down the CTRL/CMD key
while moving or resizing, and snapping will be turned off.
Resizing UI Controls
Resizing the selected controls is easy. You can just grab any edge or corner of the selection
rectangle and drag it.
If you want to constrain proportions while dragging from a corner, hold the SHIFT key while
dragging.
You can also use the keyboard to resize selected controls. CTRL/CMD+ALT+arrow keys to
resize in 1px increments, CTRL/CMD+ALT+SHIFT+arrow keys for 10px increments.
Another way to resize some controls to their "natural size" is to use the Auto-Size function
found in the Property Inspector.
To resize one or more controls to match the size of another (to be the same width or
height), you can use the "Resize To..." function in the Edit menu.
Select multiple controls and use this option to size all the selected controls to match the
narrowest, widest, shortest, or tallest control in the selection.
Aligning UI Controls
You can align and distribute (space out) controls by selecting multiple controls and right-
clicking to bring up the menu shown below.
The same options are shown in the property inspector when multiple controls are selected.
Layering UI Controls
You can layer controls as if they were pieces of paper on the mockup canvas. To do so, you
select the controls you want to layer and select one of four layering commands available via
the right-click menu or Property Inspector: Bring to Front, Bring Forward, Send Backward,
and Send to Back. Keyboard shortcuts are also available.
Locking UI Controls
Locking a control will prevent it from being selectable. This can be useful for background
controls that you want to stay in place or don't want to accidentally select (a browser or
iPhone control, for example). You can lock a control by selecting it and choosing "Lock
(control name)" from the context menu, or by clicking the lock icon in the toolbar.
Deleting UI Controls
To remove some UI controls from the mockup canvas, select them and hit the DELETE key.
Alternatively you can click on the trashcan icon in the toolbar or select "Delete" from the
Edit menu.
Rotating UI Controls
Some of our UI controls can be rotated via the Property Inspector (the label, image, and icon
controls, for example), but most can't. If you are used to generic drawing tools this might
be surprising. This limitation is intentional, and not due to programming complexity (it's
not hard to add technically).
The reason we don't support rotating all controls because we believe that in 90% of cases, it
is not needed in wireframes. In fact, adding the ability to rotate any control will likely result
in wireframes that are very hard if not impossible to implement by the development team.
If you feel that you need to rotate any other control, let us know on this forum thread and
we'll discuss whether to add it together. A workaround would be to rotate a control in a
drawing application and then import it as an image.
Transforming UI Controls
Many controls can be converted into other controls. This can be useful when you already
have content in your mockups but want to use a different control type without re-typing the
content (changing a text input to a combo box, for example).
Just click on a control and open the context menu next to the control name in the Property
Inspector to see which control types the selected control can be transformed to. Select the
control you want to convert it to or use the search to look for it.
You can transform controls quickly using the shortcut CTRL+T to bring up the transform
menu in the center of the canvas.
Cropping Groups
It is possible to crop (mask) a group of controls to only show a selected portion of it. When
a group is selected, a crop icon will show in the Property Inspector. Click on it to edit the
visible area of the group.
Note: To crop a single control, select it and group it (yes, a group with only one
element). You will then be able to crop it.
The Property Inspector is a panel on the right side of the application that allows you to set
some common properties such as alignment, position and size as well as settings specific to
certain controls (selection state, text properties, color, etc.). It is available when viewing
mockups, assets, and Symbols.
You can show and hide the Property Inspector by clicking the toggle icon above it (keyboard
shortcut CTRL/CMD + ; or ALT/Option + Enter). When hidden you can also show it by right-
clicking a control and selecting "Properties...".
If you have multiple controls selected it will show properties that are common to all selected
controls as well as options for aligning and distributing.
Note: You can format notes text using the syntax described here to make text bold,
underlined, etc.
For assets and Symbols it also shows the count and name of mockups where the selected
object is used.
Creating alternates can be useful during the early design phase when exploring concepts
and in later stages for reviewers to add their feedback and propose changes.
You want to create only one mockup per screen but have several ideas about each one.
You want suggestions for design improvements but don't want other people changing
your mockups.
You want to send your project around for feedback and track each person's feedback
individually.
You want to try out new design ideas without including them in the mockups for the
current release.
Creating Alternates
When viewing a mockup without any controls selected you will see a section of the Property
Inspector panel called "Alternate Versions" below the notes for that mockup.
To create a new alternate click the "+" (plus) icon next to "Alternate Versions"
The selection in the alternate versions list tells you which version of the mockup you
are working on. You can create as many alternates as you'd like.
Note: You can create an alternate of an alternate. Clicking the "+" (plus) icon when an
alternate is selected creates an alternate of the selected version rather than the official
version.
When an alternate exists an icon will appear next to the name in the Navigator panel
indicating that there are alternates. When you are working on an alternate version the
Navigator panel will show the alternate name in parentheses.
To rename the alternate double-click on the name in the alternates versions list or use the
context or right-click menu and select "Rename..."
Editing Alternates
Once you have created an alternate version you can edit it just like any other mockup,
including adding assets and symbols. Changes that you make will not affect the original
mockup (shown as the Official Version). You can also add notes in the notes panel for the
alternate to describe your thoughts on it or communicate to others about it.
To switch between alternate versions of a mockup select the name of a version from the list
in the properties panel or from the context menu in the Navigator panel. You may also
switch back to the Official Version by selecting it in the list.
Note: If you link to a mockup that contains an alternate the link will go to the version of
the mockup that is selected in the alternates list. The same rule applies to exporting.
The selected versions of your mockups will be exported.
Promoting Alternates
If you decide that you like one alternate better than the original mockup you can "promote"
it to the official version, which replaces and overwrites the original.
Note: You can undo this action by using the undo command (CTRL/CMD+Z) three
times.
The alternate that was promoted is retained in case you want to preserve it as part of the
change history. Otherwise you can discard it.
Duplicating Alternates
You can duplicate mockups from the contextual menu. Doing this will create a new,
randomly named alternate that is an exact copy of the alternate you chose to duplicate.
Sometimes, however, an alternate grows into a mockup all its own. If you would like to
create a whole new mockup based on an alternate, you can choose the "Duplicate As New
Mockup" option from the contextual menu.
The new mockup will be named using the Name of the Alternate and then the Name of the
Original Mockup. So if you had an alternate named "Rotated Header", in your "Homepage"
mockup, the mockup created from the alternate would be named "Rotated Header
Homepage".
Merging Alternates
If you want to combine parts of an alternate with the official version, you can use the merge
option.
Selecting "Merge with Official" will add the contents of the selected version to the official
version, to the right of the mockup contents, as shown below.
If the notes in the alternate are different than the notes in the original, they will also be
merged, separated by a dashed horizontal line.
You can then manually edit the contents to create a new official version that is a
combination of the preferred elements of each version.
Discarding Alternates
When you have finished reviewing or integrating alternate versions into an official version
you can delete alternates you no longer want using the "Discard" option.
Project Alternates
In some cases you might want to propose a set of alternate designs across several
mockups. This might happen if you are reviewing someone else's mockups and want them
to see your proposed design changes throughout the project.
When you rename an alternate you can choose from a list of existing alternate names in the
rename dialog. This makes it easy to use the same alternate name in several mockups.
In the Navigator panel next to the word Mockups a menu shows the names of all
alternates that appear in your project.
Selecting an alternate from this list will select that alternate in all the mockups that have
an alternate with that name.
Note: This is conceptually similar to creating a branch in a codebase, except that it only
applies to mockups that have specific alternate version names.
So, for example, if you create a series of alternates called "Leon's Proposal" and use the
context menu shown above to select that name, any mockup with an alternate called "Leon's
Proposal" would switch views to that alternate version.
Mockups without an alternate with that name would not be updated. Promoting, merging,
and discarding actions are not available across multiple mockups at once.
Many Mockups UI controls, such as Button, Label or DataGrid, have text in them. To edit the
text, double-click on the control and start typing. Or, if you have the control selected,
simply hit Enter or F2 to start editing. To commit the text you typed, simply click anywhere
other than the text field you typed in or hit Enter or CTRL+Enter. If you want to discard the
text changes you just made, hit the ESC key.
Some controls use certain characters as separators. For instance, to create multiple tabs in a
tabs bar, you separate them with a comma.
Or, a space character separates tags in a Tag Cloud control. Some other controls, like the
Tree, use other characters altogether. In such cases the default text for the Control includes
explanations on how to use it.
When editing text in a Label or Paragraph control you will see a small number in the lower-
right corner of the editing box. This is the number of characters, which can be useful for
copywriting or other purposes.
Basic Formatting
Text Style
You can use the following notation to format only certain parts of your control's text.
All of the above syntax works around words separated by white spaces, and underline will
work within words.
**Notes:**
1. The #FF0000 above is the color in HEX form, just like HTML. The macro will work with
or without the pound sign. You can also use certain color names (green, yellow, etc.)
which you can find by moving your mouse over the colors in the color palette in the
Property Inspector.
2. See the [next section](#making-links-in-text-actually-work) for how to turn [linked
text] into functioning links to websites or other mockups.
3. This formatting syntax also works for text entered into the [Notes panel]
(/wireframes/desktop/docs/inspector/#adding-notes-to-your-mockups-symbols-
and-assets) _except_ italic and strikethrough.
Here's a screenshot of what the above text looks like in a Paragraph control, for instance:
The shortcuts will work almost everywhere where it makes sense, and you can combine
them, so to make an italic link use [_this_] or _[this]_.
Some controls like Paragraph or Label allow you to "unbold" the text via the Property
Inspector panel. If you do so, the words you *bolded* will stay bold. A few controls use bold
text by default, so bolding text within those controls won't make a difference.
If you want to show these special formatting characters as actual text, you can escape the *,
_, -, [ and ] characters with \*, \_, \-, \[ and \], so if you want to write "this [is] some text"
and don't want the "is" to become a link, just type "this \[is\] some text".
Line Breaks
Most controls allow you to insert a line break to wrap text from one line to the next. You
can do this by writing \r in front of the text you want to start on a new line. See the
example below where a line break is used in the second item in a Radio Button control.
Bulleted Lists
In a paragraph control, you can create a bulleted list by preceding text with either a hyphen
or an asterisk followed by a space.
* item 1
* item 2
- item 3
- item 4
To do this, add the link destination in parentheses immediately after the link text. The
link destination can be a URL or the name of another mockup in the same folder. All the
following formats are valid.
Web addresses:
[Features Page](features)
Adding links in this way will cause them to show up in the Property Inspector as well, as
shown below.
This text
results in
You can link specific strings of text as well as the whole control.
Note: If the whole control is linked, text links will be disabled. If the whole control is
subsequently unlinked, the previous text links will return.
More Macros
Lorem
Type lorem in a Paragraph or Text Area to use our Lorem Ipsum generator.
{Mockup-Name}
Type {mockup-name} (all lower-case) in a Label, Text, Title or Subtitle control to show the
current mockup name.
Placeholder Text
Another option for creating placeholder text, besides the Lorem Ipsum text generator, is to
use the Line of Text and Block of Text controls.
Note: Read about drawing these controls directly on the canvas to learn how to add
them really quickly.
You can convert them to real text at any time by editing them and entering some text.
Balsamiq for Desktop Docs > Working with Data Grids / Tables
The Data Grid control functions like many other text-based controls. It uses commas as
column separators and new lines as rows. A basic table with three columns and two rows
would look like this:
You can choose whether to show the first row as a header row in the Property Inspector, as
well as specifying the row height, row colors, and grid lines.
Text in the Data Grid can be formatted as bold, italic, etc. using the same syntax as other
text controls.
You have to add a special line of text as the last line of text in your table, and it has to
be wrapped by { } curly brackets
For each column, use 0 if you want the column to be as small as possible to fit the text
in that column, or a number
Numbers specify the relative size of columns, so {2,1} means "make the first column
twice as big as the second one in this two-column
grid. Or {70,20,10} means "in this 3-column grid, make the 1st column 70%, the 2nd
20% and the 3rd 10% of the width of the whole table.
You can combine numbers and zeros, e.g., {1,0,4}
If you want to align column individually, add either L, C or R right after a number, like
so: {0R,2L,1}, which means "in this 3 column grid, make the 1st column as small as
possible and always align it to the right, the second twice as big as the third and
always align it left, and use the Data Grid's alignment (from the property inspector) to
decide how to align the 3rd column".
Ascending: ^
Descending: v
Data Grids support a single checkbox or radio button in a table cell using the following text:
Checkbox: [] or [ ]
Selected checkbox: [x] or [v] or [o] or [*] or [X] or [V] or [O]
Indeterminate checkbox: [-]
Radio button: () or ( )
Selected radio button: (x) or (v) or (o) or (*) or (X) or (V) or (O)
Indeterminate radio button: (-)
Name\r(job title)
Note: If you have commas in your cells, you will have to escape them with a backslash
like this:
1\,000\,000
The component recognizes both commas and tabs as delimiters. Anything else should be
populated into cells.
Balsamiq Mockups 3 includes the amazing Font Awesome icon set. It contains over 500
icons in a wide range of categories that can be sized from very small to very large. It is also
updated frequently and we plan to keep up with the updates whenever we release a new
version of our product (more about why we switched here).
It should meet all your icon needs, but if not, you can add your own icons or request new
ones from Font Awesome.
Icons from previous versions of Balsamiq Mockups have been remapped to the new icons.
Icon search results are shown below any UI controls that match the text you enter.
Icon Search
If the control you selected support icons, you will see the icon search box in the property
inspector. This works much like the Quick Add tool, just type a few letters from the name of
the icon you are looking for and a list of suggestions will pop up as a grid of icons to
choose from. Just click on the one you want to select it.
You can then size the icon from "XS" (16px) to "XXL" (128px). You can also rotate icons in
90 degree increments using the button next to the search box.
This will bring up the icon library dialog, where you can browse the icons by category and
preview them at different sizes. You can double-click an icon to select it immediately or
click once to select and then click the "Select" button to add it.
Once you have selected an icon, you can resize it, rotate it or remove it via the Property
Inspector.
Color
Mockups uses black as a color for replacement at 100% opacity.
Icons that aren't created with black can have undesirable effects when colorized.
We recommend using black as the color for your icons.
Transparent Areas
Mockups colorizes the entire opaque area of the icon.
For best results, we recommend knocking out "white" areas of your icon using
transparency. Transparent PNG works best.
The example below shows regular icons in the left column, a custom icon properly prepared
with black fills in the middle column, and a custom icon that doesn't work as well in the
right column. To fix the icon in the right column, the exclamation point should be made
transparent, and the icon color should be black.
← Working with Data Grids / Tables Working with Images and Assets →
Balsamiq for Desktop Documentation
Balsamiq for Desktop Docs > Working with Images and Assets
There are multiple ways to add images to your mockups. The easiest way is to simply drag
and drop an image file from your computer on to the Mockups canvas. Read on to learn
more about adding and using images and other assets in your projects.
You can modify the image properties in the Property Inspector, similar to other UI controls.
The properties specific to images are as follows:
The drop-down box shows you the name of the current image. Opening it allows you
to select a different image from the images you've already imported to your Assets.
The "+" icon next to the drop-down box allows you to add an image from your
computer. This is the same as dragging and dropping an image file.
Clicking the download icon opens a dialog to add image from the web by entering a
URL directly or by searching Flickr. Mockups supports GIF, JPG/JPEG, and PNG image
file formats. Files downloaded from the web will be copied to your project.
Click the rotate icon below the image drop-down to rotate your image in 90-degree
increments.
Clicking the square with an 'x' inside it will revert the image to the default
placeholder image.
The "Sketch it!" checkbox will convert your image to a black and white line drawing
version.
If you don't yet have an image ready or want to use a placeholder image to keep your
mockup low-fidelity, you can add an Image control from the UI Library and it will show up
as a box with an 'X' through it. You can later replace it with an image using the image
properties described above.
Once an image has been added to your project it will show up in the UI Library so that you
can easily add it to any mockup in your project. The "Assets" category will show all of the
images that you've added to your project.
This also means that you can add your images to your mockups from the Quick Add box.
Just type the first few letters of the image name and it will appear in the list.
Note: You can delete an image by right-clicking on it in the UI Library and selecting
"Move Image to Trash" or from the context menu in the Assets view.
The image properties panel also allows you to crop or mask images to only show a selected
portion of them. You can watch a tutorial on cropping images here. Images that have been
cropped will show an icon to remove the cropping in the properties panel.
Aside from the Image control, you can also embed images in the Cover Flow control.
You can add images in the Assets view by dragging and dropping from your computer or by
using the icons in the toolbar.
The "Import Asset..." icon allows you to select one or more images from your computer
while the "Download Asset..." icon brings up the same dialog as in the Mockups view to
enter an image URL or search for an image from Flickr.
Once you've added images, you can view them as thumbnails or a list, as well as in
Thumbnail Grid view.
The Properties panel on the right shows you the pixel dimensions of the selected image and
allows you to enter notes about it. The lower portion of the panel shows which mockups (if
any) the image is used in. This can be used for managing images to see if you can delete
any that aren't being used, for example. Clicking on a mockup name will take you to that
mockup in the Mockups view.
Note: Assets are limited to 20 Megabytes per file for performance reasons.
These files can't be viewed inside the application, but they are "packaged" with your project,
so if you give the project file to someone else they will be able to save the files from the
Balsamiq project to their computer using the "Save to disk" button or context menu item.
Deleting Assets
You can also use the context menu to delete assets from your project. Just like your
mockups, deleting will move assets to the trash, where you can delete them permanently or
restore them. Note that deleting an image from the mockups canvas doesn't remove it from
your project.
Selecting it will open the Assets view where all the unused images will be selected for you.
You can then delete them as explained above. This is a great way to reduce your project's
file size.
Using Images as Icons
You can use any of your imported image assets as an icon. They will automatically show up
in the icon library, under the Assets category at the bottom.
← Working with Icons Working with Markup →
Balsamiq for Desktop Documentation
Markup is a special kind of component in the UI Library that is used for adding annotations,
comments, and explanatory notes.
Commonly used Markup items include: Arrow / Line, Callout, Sticky Note, Red X, and Curly
Braces. The screenshot below shows the Markup button panel selected in the UI Library, and
markup items on the page.
Toggling Markup on and Off
When you're editing your mockups, you will sometimes want to see what the mockup looks
like with Markup off. You can do this by using the Show/Hide Markup toggle button at the
right end of the toolbar.
The screenshot below shows the previous page with Markup off.
Markup Toggling with Keyboard Shortcuts
There are keyboard shortcuts for toggling visibility on and off.
In Full Screen presentation mode you can just press the "M" (or "K") key.
If you want to make a Markup item Non-Markup, right click on the component and select
the "Do Not Treat as Markup" option in the context menu. This will allow the component to
be visible when the Markup visibility toggle is set to on or off.
You can use this "Treat As Markup / Do Not Treat As Markup" feature on any component. If
you right-click on a regular component, you can make it behave like Markup by selecting
"Treat as Markup." It will be hidden when you toggle Markup visibility off.
Balsamiq Mockups supports the concept of Symbols. A Symbol is a group of controls that
represents a single piece of functionality. It is often used for parts of the user interface that
show up on several screens. Other software sometimes refers to this feature as templates,
master pages, custom components, or widgets.
In essence, Symbols let you create reusable common elements that you can use across
different mockups.
Creating Symbols
There are two ways to create a Symbol, described below.
This new Symbol will be displayed in the Symbols category of the UI Library for all mockups
in your project so that you can easily add it to any mockup.
Tip: Once a Symbol has been created you can also add it via Quick Add using the first
few letters of its name, just like other controls.
To get to the Symbols view, use the navigator icon and select Symbols. You will see any
existing Symbols in a list in the left panel.
The toolbar contains two icons for creating Symbols: one for creating one from a blank
canvas and another for importing.
Click the New Symbol Library icon to create a new Symbol Library. The Symbols view shows
Symbols as well as their Symbol Library containers. In Symbols view it is helpful to know the
difference before creating them. Read on for an explanation.
In Symbols view Symbols are shown as a nested list inside their Symbol Library, as shown
below.
You can select the Symbol Library name to see all the Symbols it contains, or you can select
the name of an individual Symbol to see only that Symbol.
When viewing a Symbol you will see a small floating bar showing a breadcrumb path to the
Symbol Library. If you have groups within your Symbol the breadcrumb bar will help you
navigate back out of the groups.
The icon at the top of the list of Symbols allows you to choose whether you want to see
other Symbols in the Symbol Library along with the selected Symbol or not.
Note: The Symbol Library that a Symbol belongs to is ignored in the UI Library and
Quick Add. You will see a list of all your Symbols, regardless of which Symbol Library
they belong to.
As described above you can add a new Symbol to an existing Symbol Library or inside a new
one. To create a new Symbol, click the '+' icon to the right of a Symbol Library. This will
create a new Symbol inside that Symbol Library (called "New Symbol", for example).
When you create a new Symbol Library two sample Symbols are created automatically to
help you learn about how Symbols work. Feel free to modify or delete them.
Note: You can add controls to the Symbol Library itself, but these controls will not be
shown when the Symbols are used in your mockups. Adding controls such as sticky
notes to your Symbol Libraries can be useful for making notes about them that don't
need to be shown in the UI.
Importing Symbols
In addition to creating Symbols from scratch, you can import Symbols created in a previous
version of Balsamiq Mockups. Click the Import Symbol Library button to open a dialog for
importing Mockups files in BMML format.
You can also import Symbols from the Project > Import menu.
The imported Symbol will be created in a new Symbol Library.
The primary difference is that the properties for the Symbol itself are limited, similar to
other grouped controls.
The big advantage is, of course, that any changes you make to your Symbols will update
everywhere you use them. Read on to learn about editing Symbols.
Editing Symbols
When you select a Symbol on the Mockups canvas you'll see two Symbol properties in the
Property Inspector: Break Apart and Edit Source.
"Break Apart" breaks the connection between the individual controls inside the Symbol and
the Symbol itself for the selected instance, meaning that it is no longer a Symbol (although
the original Symbol remains intact). Any changes you make to a broken apart Symbol will
not get updated elsewhere and any changes made to the Symbol will not update where it
has been broken apart.
"Edit Source" does what you'd expect it to do, it takes you to the Symbols view where you
can edit the Symbol. The main benefit of reusable Symbols is that if you need to make a
change, you can just do it in one place and it will be propagated to all the instances (uses)
of that Symbol. When you are done editing a Symbol you can click the "Back to Mockups"
button on the canvas. Edits made to the Symbol will be immediately reflected in any
mockups that it is used in.
Tip: You can also edit a Symbol by right-clicking on it in the UI Library and selecting
"Edit Symbol Source."
Symbols allow you to achieve this result by letting you override certain Symbol properties
each time you use a Symbol. To do so, start by double-clicking on a symbol to "enter it".
Although this experience is very similar to editing a group's contents, you will notice that
Mockups 3 informs you that what you're doing is really overriding some properties of a
Symbol.
At this point, you can manipulate each control inside the symbols at will, as if you were
editing a group. Some operations are not permitted while overriding symbol properties,
such as adding, deleting or grouping controls. If, instead, you want to edit all instances of
the Symbol click the "Edit" button.
If you make a mistake, you can always undo to get back. If you want to remove a single
property change and go back to a Symbol's default property, you can click on the little
green "x" icon in the Property Inspector.
You can also revert all changes you made to a Symbol's instance at once, via the "x" icon in
the Property Inspector you see when selecting the whole symbol.
You can add notes to both your Symbols and Symbol Libraries in the Properties panel on the
right. When an individual Symbol is selected the lower portion of the panel shows which
mockups (if any) the Symbol is used in. This can be used to see if you can delete any
Symbols that aren't being used, for example. Clicking on a mockup name will take you to
that mockup in the Mockups view.
Renaming Symbols
To rename either a Symbol or Symbol Library you can double-click its name in the navigator
panel on the left or use the context menu.
Deleting Symbols
You can also use the context menu to delete Symbols and Symbol Libraries from your
project. In the case of Symbol Libraries, like with mockups and images, deleting will move
them to the trash, where you can delete them permanently or restore them. Deleting an
individual Symbol from a Symbol Library, however, deletes it permanently.
Tip: You can hold down Shift or Control/CMD to select multiple Symbols and delete or
move multiple Symbols at once.
Just like with images, deleting a Symbol from a mockup does not delete the Symbol, only
that instance of the Symbol.
Cloning Symbols
Cloning Symbols (also available via the context menu) can save you time when creating
Symbols or Symbol Libraries that are similar.
Moving Symbols
You can move individual Symbols from one Symbol Library to another by dragging them
around in the Symbols view. You can also copy Symbols from one project to another as
described above.
Start by creating a new project. Add to it any images, icons, or Symbols that you think you'll
want available to all your projects in the future. If you are designing for a specific platform
(e.g., mobile or web) you could also add a control such as Browser, Window or iPhone to the
first wireframe. This is your template project. You may want to save it with a name that
includes the word "template."
Then, whenever you want to create a new project using this template, duplicate the
project, rename it, and start editing!
You can do this for all new projects to easily start with a built-in library of commonly used
assets.
Balsamiq for Desktop Documentation
You can create simple site maps from a text outline using the Site Map control.
Edit the control by double-clicking or selecting it and pressing the Enter key. Edit the
outline to create parent-child relationships. Each line represents a box (or page/node) in
your sitemap. Use hyphens to indent child boxes beneath a parent. Here's an example:
Home
- Products
-- Product 1
-- Product 2
- About Us\rCompany
- Support
- Blog
Using the Property Inspector you can add links to the nodes in the map and change the text
properties and orientation of the map (vertical or horizontal).
This is what the outline above looks like in vertical orientation (default):
Each time you click the "Populate from Project" project the site map will be updated to
reflect the current project structure.
If you are using mockup hierarchy, child mockups will be shown as child nodes in the site
map, as shown below.
Links will be added to each node in the site map to the corresponding mockup in your
project.
Export to PDF...
Current or All Mockups to PNG
Mockup to Clipboard
Mockup to JSON
Project to BMMLs ZIP...
Exporting to PDF
You can export the mockups in your project as a PDF, which can be useful for printing,
sending by email, presenting to clients, or posting online. If your mockups contain links,
these will work in your exported PDF as well, which will allow you to create click-through
prototypes of your designs. (To learn more about linking, see Linking Mockups Together.)
Note: Links may not work in the default Windows 8 or 10 PDF viewer. If this happens,
you can download Adobe Acrobat or one of the many other free PDF viewers.
To export to PDF select the Project > Export to PDF... menu command (shortcut:
CTRL/CMD+P). Each mockup will be displayed on a separate page of a PDF document. The
mockups will be in the same order as in the project, so arrange them in the order you'd like
before exporting.
You can choose to export all mockups or a subset, including any alternates you have
created.
After exporting, a notification window will appear to show you where your PDF was saved.
Click the notification to open the containing folder.
Exporting to an Image
To save one or all of your mockups as image files choose one of the export to PNG
commands from the Export menu. Export > Current Mockup to PNG... will save the selected
mockup in PNG image format, while Export > All Mockups to PNG... will save all of the
mockups in your project as separate image files. If you check the "Use Transparent
Background" option the exported images will be transparent anywhere the canvas shows
through in the mockup.
The shortcuts for exporting a mockup and project to image files are CTRL/CMD+R and
CTRL/CMD+Shift+R, respectively. Exporting all mockups will also generate images for any
alternates you have created.
You can also export a subset of the controls in your mockup by selecting them on the
canvas and using the Export Current Mockup to PNG command. The export dialog will ask
you if you want to export only the selected controls or the entire mockup.
Printing
Balsamiq Mockups no longer supports printing directly to a printer. Instead you can export
to PDF and print from a PDF viewer.
Another method is to use the Import/Export Mockup JSON commands in the Project menu.
Exporting to Mockups JSON (Project > Export > Mockup to JSON) will copy the Balsamiq
Mockups code for the selected mockup to the clipboard. To create this mockup in a new
project switch to it and choose “Import Mockup JSON…” from the Project > Import menu
and paste the copied code.
Selecting Export > Project to BMMLs ZIP... will save your mockups as a ZIP file containing
individual BMML files (compatible with Balsamiq Mockups version 2) and images and
Symbols stored in an assets sub-folder. You can then unzip it and open the mockups with
an older version of Balsamiq Mockups.
← Working with Site Maps Working with Skins (Sketch vs. Wireframe) →
Balsamiq for Desktop Documentation
Balsamiq for Desktop Docs > Working with Skins (Sketch vs. Wireframe)
We know that some people need to shift from idea generation with internal teams to
presentation with clients or stakeholders, and in those situations the default "sketch" skin
may present challenges with certain audiences. To address this need, we created a
"wireframe" skin that allows you to switch from a sketchy, hand-drawn style to a crisper,
cleaner wireframe elements.
The screenshots below show a comparison of a sample design in the default "sketch" and
"wireframe" skins, respectively. Click to view larger images.
Our intention with adding the wireframe skin was to help add legitimacy to your Mockups
when presenting them to clients or stakeholders, people who may consciously or
unconsciously discount the thought and effort of your design work simply because it looks
like it was sketched on the back of a napkin. We'd hate for all your hard work to go
unappreciated just because it doesn't look "professional" enough!
However, while designing, the original sketch skin still offers all the advantages it always
has. It deliberately looks rough and tentative, which encourages you, the designer, to try
out lots of different ideas, to experiment and revise in order to come up with the best
design. Designing in the wireframe skin could cause you to get attached to a specific design
idea too soon because it looks "done", or it may prompt you to fine-tune the alignment,
colors, or fonts when you should be thinking about the workflow.
Just as the wireframe skin makes the design feel finished, the sketch skin makes the design
feel un-finished, which guides you to continue to ask questions and explore. The following
description of the differences between sketches and prototypes can also be applied to the
sketch and wireframe skins, respectively.
Since the beginning, Balsamiq Mockups has been optimized for that sweet spot of the
ideation phase of a project and will continue to be for the foreseeable future. We still don't
have any plans to add fancy interaction behavior to our family of products, for example, and
we're just fine with that.
To convert your existing project folders or ZIP files into BMPR files, open the Project >
Import menu.
Select what you'd like to import and your old files will be imported and a new BMPR file will
be created.
You can also just drag BMML files into Balsamiq Mockups 3 to import them to the current
project.
Importing Symbols
If you have Symbols files created with a previous version of Balsamiq Mockups you can
import them into Balsamiq Mockups 3 as Symbols using the Import > BMML Symbol
Libraries command. This will convert groups into named Symbols that will appear in the
Symbols category of the UI Library.
Alternatively you can copy mockups from one project to another using the Import/Export
Mockup JSON commands in the Project menu. Exporting to Mockups JSON (Project > Export
> Mockup to JSON) will copy the Balsamiq Mockups code for the selected mockup to the
clipboard. To create this mockup in a new project switch to it and choose “Import Mockup
JSON…” from the Project > Import menu and paste the copied code. Images and Symbols
won't be copied, however.
Importing Images
To learn about importing images, see Working with Images.
← Working with Skins (Sketch vs. Wireframe) The Project Info Panel →
Balsamiq for Desktop Documentation
New in Balsamiq Mockups 3 is the ability to define project-wide settings for skin, font, and
link and selection color. The Project Info panel contains these settings as well as an area to
add notes about the project. Click the icon next to the Property Inspector icon to toggle the
Project Info panel (keyboard shortcut: CTRL/CMD + ,).
These settings will be applied to all mockups in the project and will be saved with the
project (i.e., they persist when the project is closed and reopened or shared with others).
To learn more about the difference between sketch and wireframe skin, see Working with
Skins.
The default font is Balsamiq Sans, just as in previous versions (not Comic Sans as you might
think; although now you can set it to that, all you Comic Sans lovers out there!).
Note: If you want to use a specific project font we recommend that you set it before you
start creating your mockups. Changing the project font may adversely affect existing
mockups in your project. Each font has different dimensions and proportions so
switching fonts may cause controls to overlap or line up unevenly. Also, setting your
project font to a variant such as "thin", "light", or "extrabold" may override font style
settings on individual controls.
Balsamiq for Desktop Documentation
You can link mockups 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.
Linking mockups together is as easy as choosing a mockup name from a drop-down menu.
Simply click on a control that supports linking (most do, and here's a workaround for those
that don't), and you'll see a "Link" drop-down in the Property Inspector (click the "Show Link
Inspector" link if you don't see it).
Note: To learn how to create links from text strings inside other controls, see our article
on making links in text actually work.
For controls that can have multiple targets, you'll see something like this:
Once you have selected a mockup or web page to link to from the drop-down menu, the
control will show a little arrow icon in the bottom-right corner. Links to mockups will show
as a plain arrow, while links to web pages will show as an arrow with a box around it, as
shown below.
Linking to Existing Mockups
The list is pre-populated with the names of the other mockups in the project. Select one to
link to it.
Note: You can even link to an alternate version by using [this workaround]
(/tutorials/tips/linktoalternates/).
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 mockup 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
mockup when clicked (as shown here).
Balsamiq for Desktop Documentation
Mockups includes a full screen presentation mode for presenting your wireframes to
stakeholders or usability testing.
To enter Full Screen Presentation mode, just click on the full screen icon in the top-right
corner of Mockups, or select "Full Screen Presentation" from the View menu, or simply hit
CTRL/CMD+F.
Balsamiq Mockups will expand to take up your whole screen, with your mockup centered on
it.
The far left icon toggles the top bar on and off. You can turn it off to remove everything but
the mockup (even the icon will disappear until the cursor is placed over it), this is useful for
usability testing when you want a more realistic experience.
If you have created links between your mockups, the links will be clickable in full screen
presentation mode.
Settings
By default you will also see a big blue arrow pointer in place of the regular mouse cursor.
This is useful for presenting your mockups. The pointer will point towards the center of the
screen in order to always stay out of the way of your mockup as much as possible.
You can turn off the big blue arrow in the full screen settings by clicking the gear icon in the
top right to open the settings panel.
The settings panel also has an option to turn on and off link hints. When link hints are on
areas that contain links will be shown with a pink overlay so they can be seen easily.
The Markup setting is for showing and hiding markup elements, such as Sticky Notes,
Arrows and Callouts (any control under the "Markup" tab in the UI Library). This is useful if
you want to just look at your UI without the annotations that surround it.
The last setting is to set the view to zoom out to fit the largest mockup. All other mockups
will be zoomed relative to the largest mockup.
There are keyboard shortcuts for each setting, shown next to the setting name in the panel.
No modifier key is required in full screen mode (e.g., just L for link hints, not CTRL/CMD+L)
The info icon next to the settings icon will open a panel to view and edit notes for the
selected mockup, just like in normal edit mode.
To exit Full Screen Presentation mode, hit the ESC key or click the icon in the upper right
corner.
In the Settings panel, you will find a link called Project Centering Rules.
Clicking that link will open a window that gives you an overview of the size of all the
mockups in your project. It will show you the longest and widest mockups in project, and
the effective size they are making your project as a whole. The longest mockup will have its
width in red, while the tallest mockup will have it's height in blue. This should give you a
hint as to what mockup is causing your project to center incorrectly.
Clicking the checkbox next to the trouble mockup (or mockups) will take them out of the
centering calculation (and will recalculate the new longest/widest mockups, adjusting the
overall project size).
This should solve any centering issues you have!
Balsamiq for Desktop Documentation
Autosaving
← Full Screen Presentation Mode Keeping Projects Clean and Organized →
By default, Mockups 3 for Desktop will automatically save any changes you make. This
ensures that you will never lose any work.
Mockups 3 for Desktop automatically saves in two places. First, it commits all changes in
real time to the internal backup file. Then after a short period of inactivity, Mockups 3 for
Desktop will commit the changes to your original project file. This delay should help when
you're saving to a networked drive or folder.
Disabling Autosave
If you find that the autosave feature is causing you problems or your workflow is better
suited by manually saving, this is how you would disable it.
In the Project drop down menu, you will find an item named Auto Save Every Change. If
that menu item has a check mark next to it, that means autosave is enabled. Clicking on it
will disable autosave.
While autosave is disabled, your changes will only be committed to your original project file
when you manually save them, either via the Project > Save menu option, or by using the
keyboard shortcut (CMD+S on OS X and CTRL+S on Windows).
Your changes are still being saved to the internal backup file, and they will automatically
recover if you close Mockups without remembering to save.
In the event you want to discard any changes you have made to the file, you can use the
Project > Reload from Disk... menu item to revert to the last thing you saved to your
original project file.
Re-Enabling Autosave
To re-enable Mockups 3 for Desktop's autosave feature, simply click the Project > Auto
Save Every Change menu item. A checkmark will appear and you should see a confirmation
dialog in the lower right corner of the canvas.
Balsamiq Cloud Documentation
Balsamiq for Desktop Docs > Keeping Projects Clean and Organized
Projects can become packed with many elements, and sometimes it's good to take a
moment to do some house keeping. Cleaning up your project will make it easier to navigate,
smaller in size, and thus much faster!
You can reorder them as you wish (by dragging them up and down) and it also offers a
hierarchical structure to better organize your wireframes, allowing you to create a
parent/child relationship between them.
To use it, select the wireframe you wish to be the child and press the TAB key. 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 show and hide the
wireframes under it.
Play
With that in mind, we created an option that allows you to select all images that are not
used in your wireframes. The option is available in the Edit menu, as shown below:
Selecting it will open the Assets view where all the unused images will be selected for you.
You can then move all the items to the trash from the context menu.
Note: Moving Assets to the trash does not remove them from the project. You'll need to
use the "Empty Trash" option to delete those items permanently.
When an individual Symbol is selected, the lower portion of the right panel shows which
wireframes (if any) the Symbol is used in. This is a good indication for deleting Symbols that
aren’t being used.
You can use the context menu to delete Symbols and Symbol Libraries from your project.
Note: Deleting Symbol Libraries will move them to the trash, where you can delete them
permanently or restore them. Deleting an individual Symbol from a Symbol Library,
however, deletes it permanently.
Tip: You can hold down SHIFT or CTRL / CMD to select multiple Symbols and delete
multiple Symbols at once.
However, don't hesitate to reach out and share any related BMPR file with us via
[email protected] if needed. We're here to help! :)
Balsamiq for Desktop Docs > The Local Storage Folder and Backups
The easiest way to find it is by opening the "About" dialog and clicking on the "Open
Local Store Folder" link.
For reference, here is the location of this folder on the various operating systems that
Balsamiq Mockups for Desktop runs on:
Note: On macOS 10.7 and Beyond: the ~/Library folder is hidden by default. You can
access it by opening a Finder window, clicking on the "Go" menu option at the top of
your screen, and then pressing the "alt/option" key on your keyboard. That will make
the Library folder selectable in the dropdown menu.
Documents and Settings should show up under C:\ in your Windows Explorer now. If it
doesn't, you may need to restart.
Mockups 3 for Desktop backs up any file you open to a local folder. These local versions
are stored for (around) seven days and should automatically load in case of a corrupted
project file.
Versions of Mockups 3 for Desktop prior to 3.4 do not have the automatic recovery
feature. This FAQ will show you how to recover the file manually.
Backups
Backups are stored in the Local Storage folder in two folders.
The LocalProjects Folder: The LocalProjects folder is for projects that you have
saved at least once. We keep projects in this folder for about a week before deleting
them.
The UnsavedProjects Folder: The UnsavedProjects folder is for projects that you
haven't had a chance to save yet, but have been working on. Check here if you re-
opened Mockups 3 for Desktop, but your new project didn't open up with it.
Restoring Backups
Check both the LocalProjects and UnsavedProjects folders for your project. You may
have to open a couple of different projects to find a working or up-to-date version. Once
you have found and opened it, Select Project > Save As and save the file in a new
location. Saving it allows both the backup and a new version of the file to exist, which
keeps your data safe!
Note: We do not recommend moving files out of the Local Store folder. If you want to
move a backed up file to another folder, we recommend copying the file
(CTRL/CMD+C), and then pasting it to the destination (CTRL/CMD+V).
Balsamiq for Desktop Documentation
Keyboard Shortcuts
← The Local Storage Folder and Backups The BMPR File Format →
Below is a list of all the keyboard shortcuts and modifiers available in Balsamiq Mockups 3.
While all of the shortcuts will work in the Desktop version, some might not work in our
web versions.
Selection
Size/Position
Pan the canvas (Hand tool) SPACE BAR +Click and Drag
Bring to front ⌘ + SHIFT + ↑
Bring forward ⌘ +↑
Send backward ⌘ +↓
Edit/History
Align
Text Formatting
italic _text in underscores_
Show the current mockup type {mockup-name} in a Label, Text, Title or Subtitle
name control.
Quick Add
Sending focus to Quick Add / (forward slash) or
+ (plus sign)
Drawing Controls
Learn more about drawing controls here
Open project ⌘ +O
Export to PDF ⌘ +P
PAGE UP or fn + ⌘ + ↑ (Mac)
fn + SHIFT + ↑ (Mac)
fn + SHIFT + ↓ (Mac)
Views
Hide/Show the UI Library ⌘ + L or ⌘ + F1
Show/Hide Markup ⌘ +K
Zoom to Fit ⌘ +0
Fullscreen
Enter Full Screen View ⌘ + F or F5
Hide/Show Toolbar T
Hide/Show Markup K
Back ←
Forward →
From there click Change Key Sequence... and then set Switch Keyboard Layout to Not
Assigned.
← The Local Storage Folder and Backups The BMPR File Format →
Balsamiq for Desktop Documentation
People often ask us if Balsamiq can export to HTML/CSS/JS or XAML or Ruby or other
programming languages. In short, we don't, and don't plan to. We don't have the resources
to do it, and want to keep our focus on our core product.
Instead, we chose to document our file format, so that developers can build their own tool
to integrate with our products, if they wish.
Maybe you're curious about how your projects are stored. Maybe you want to make tools
that can read the files or even generate BMPR files programmatically. Maybe you want to
teach a robot how to draw your wireframes using chalk on sidewalks. We hope that
happens!
Overview
At the heart of all Balsamiq projects are BMPR files. BMPR files (short for Balsamiq Mockups
PRojects) are a type of BAR file. BAR files, or Balsamiq Archive files, provide a way a storing
different kinds of content while also providing a consistent set of tools for reading and
writing that content.
BAR is a format for files that have resources of various types, branches, and thumbnails. For
instance, one could build the next Keynote, Visio, or Photoshop using BAR as its file format.
Our hope is that some day someone might want to adopt the format. If not, we'll probably
adopt it ourselves for our next product.
In other words, BMPR files are a kind of BAR file. All BAR files share similar APIs describing
what kind of content the archive contains.
In the case of BMPR files that content contains everything there is to know about a Balsamiq
project.
The BMPR format isn't the first format we've used for Balsamiq. For example, in the past
we've used BMML. A Mockups 2 project requires multiple BMML files making them a little
more cumbersome to manage. A single BMPR file contains everything for a project. This
single file approach makes sharing projects much easier.
Versions
The current version of the BMPR file format is 1.2.
We use Semantic Versioning (SemVar for short) for the BMPR file format. This means, among
other things, that the API for version 1.2 of the file format won't change. New minor
versions can change the API but will remain backwards compatible with previous versions.
Major versions such as a 2.0 release will be incompatible with previous major versions.
Version 2.0 of the BMPR file format is already being worked on and will not be compatible
with previous major versions. 2.0 might be the same in some ways, but it's best to assume
it's not 100% compatible with 1.x versions. When version 2.0 of the format is released we'll
update this reference to make the differences between versions clear.
When writing tools for the BMPR file format it's a good idea to ensure that your tools are
aware of version differences. BMPR files are a type of BAR file, and all BAR files contain both
the file format type (such as bmpr) and the version (1.2) that file format uses. Examples of
how those details are stored can be found in the INFO section below.
Details
A BMPR file is a humble SQLite database file that stores both scalar values (single numbers,
strings, etc) and JSON data that describes every detail of a Balsamiq project. Using SQLite
enables BMPR files to take advantage of the huge amount of historical experience, tools,
and libraries for reading and writing to relational databases while also being very portable
and embeddable.
Here's what a BMPR file looks like when opened using the free DB Browser for SQLite app:
Table Fields
NAME TEXT The unique name of the kind of meta data for this row. Think of this
as a you would a key in structure or hash.
Example Data
NAME VALUE
SchemaVersion 1.2
ArchiveRevision 44
ArchiveRevisionUUID 007F035B-6147-D643-C5CC-2871D9DA1C43
ArchiveFormat bmpr
SchemaVersion
This is the file format version number for the kind of resource this archive contains.
ArchiveRevision
This contains a count of how many times this archive file has been changed.
ArchiveRevisionUUID
This is a unique ID that identifies the latest revision of this archive.
ArchiveFormat
This indicates what kind of data this archive contains (for example, bmpr).
ArchiveAttributes
This is a JSON hash containing the creation date of the file as well as a name for the
contents of this archive.
Table Fields
ATTRIBUTES TEXT JSON data with keys for creationDate, thumbnailID, kind,
modifiedBy, notes, mimeType, order, name, importedFrom,
parentID, and trashed
Example:
{
"creationDate": 0, // the date this resource was created
"importedFrom": "", // for imported resources this will be t
he original file name of that resource
"parentID": "", // a unique ID that, when present, assoc
iates this resource with another resource
"kind": "mockup", // the kind of resource this row describ
es
"mimeType": "text/vnd.balsamiq.bmml", // the mime type for this resource
"modifiedBy": null, // who (or what) last modified this reso
urce
"name": "Banking Website", // the name of this resource
"notes": "", // notes for this resource
"order": 2445916, // an absolute integer representing this
resource's position
"thumbnailID": "[UUID]", // the unique ID of the thumbnail for th
is wireframe
"trashed": false // a boolean flag indicating if this is
a trashed resource
}
DATA TEXT JSON data with keys for wireframe data. See
below for more details.
Example:
{
"mockup": {
"controls": { // an array containing each element (see more about thi
s below)
"control": ["..."] // JSON data with properties unique to the control type
},
"measuredH": "600", // the pixel height of the wireframe
"measuredW": "800", // the pixel width of the wireframe
"version": "1.0" // the version for this particular resource
}
}
Stored resources share some common keys. The first 10 keys in the following example will
be the same for any kind of mockup or symbol resource.
{
"typeID": "DataGrid", // the type of element this is (ie. DataGrid, or TabBar)
"ID": "2", // a unique integer for this resource
"h": "319", // the pixel height of this resource
"w": "739", // the pixel width of this resource
"x": "30", // the x position of this resource
"y": "257", // the y position of this resource
"zOrder": "17", // the position of this resource, front to back
"properties": { // resource type specific properties
"hLines": "false",
"selectedIndex": "0",
"size": "14",
"text": "[CSV formatted data for this DataGrid]",
"vLines": "true",
"verticalScrollbar": "true"
}
}
Each different kind of resource will have properties that are specific to that kind of resource.
Note how some keys within properties differ between the example above and below:
{
"typeID": "TabBar",
"ID": "7",
"h": "535",
"w": "769",
"x": "15",
"y": "52",
"measuredH": "100",
"measuredW": "241",
"zOrder": "2",
"properties": {
"borderStyle": "square",
"color": "15658734",
"selectedIndex": "0",
"tabHPosition": "center",
"text": "[Comma separated list of tab names]"
}
}
Each Symbol Library that's been added to a project has its own RESOURCE record with JSON
data describing all of the controls that that library makes available. Each instance of a
control used in a wireframe is described in the JSON within the DATA column for a
wireframe's RESOURCE record.
Documenting each different kind of resources, each with their own set of properties, is well
beyond the scope of this reference. Knowing the purpose of their common keys should at
least provide a foundation for understanding each different kind.
Table Fields
ATTRIBUTES TEXT JSON data. Keys depend on whether the record is for a Master
branch or alternate branch.
{
"branchDescription":"", // this is here for possible future use
"creationDate":1467124505618, // the date this branch was created
"fontFace":"Chalkboard", // the name of the font that will be used throug
hout the project
"fontSize":16, // the size of the font that will be used throug
hout the project
"linkColor":545684, // the color used for links throughout the proje
ct
"modifiedBy":[], // what populates this?
"projectDescription":"", // the description for the project
"selectionColor":9813234, // the color used for selections throughout the
project
"skinName":"sketch", // the name of the skin to use throughout the pr
oject
"symbolLibraryID":"" // a unique id for the symbol library used throu
ghout the project
}
{
"branchName":"alt" // the name of an alternate branch
}
Balsamiq doesn't use terms like "branchName" - it uses alternate versions. You can read
more about alternate versions here.
This is the "master" alternate. Its ID in This an alternate of the official
the BRANCHES table is "master", but it version. Its ID is an automatically
has no "branchName" key or value in generated UUID and its "branchName"
the ATTRIBUTES column. That's in the ATTRIBUTES column is
because the master branch name can't "Unofficial Version" - its name is
be changed. Balsamiq will always refer editable since it's not the master
to it as "Official Version". branch.
Changes made to things like fonts, link colors, project descriptions on an alternative
branch are actually made to the Master branch. Alternative branches inherit these
properties from the Master branch, which is why alternative branches only contain a
branchName.
In this screenshot of Balsamiq we're Those font changes apply to both the
picking a new font and changing the original alternate as well as all other
link colors to red on one alternate. alternates.
Here what the data looks like when the font is changed for an alternate:
Table Fields
Example:
{
"branchID":"Master", // this is the name of the branch this thumbnail is as
sociated with
"image":"[Image Data]", // contains Base64 encoded data for the thumbnail imag
e.
"resourceID":"[UUID]" // this is the UUID of the wireframe this thumbnail is
a snapshot of
}
Summary
We hope this reference is useful. If you can think of ways that would help us make it more
useful for you we want to hear about it and make it better. If you build a tool that supports
BMPR let us know so we can tell people about it!
← Keyboard Shortcuts
Balsamiq for Desktop Docs > Balsamiq Mockups 3 for Desktop System Requirements and Updating
Balsamiq Mockups 3 for Desktop requires Adobe Air 2.6 to run, which works fine on most
computers and Operating Systems. You can find the most recent system requirements for
Adobe Air here.
Windows
2.33GHz or faster x86-compatible processor, or Intel Atom™ 1.6GHz or faster
processor for netbook class devices
Microsoft® Windows Server 2008, Windows 7, Windows 8 Classic or Windows 10
512MB of RAM (1GB recommended)
AIR SDK Development Supports Microsoft® Windows 7 and above, 64-bit only
Mac
Intel® Core™ Duo 1.83GHz or faster processor
Mac OS X v10.7, and above
512MB of RAM (1GB recommended)
AIR SDK Development supports Mac OS 10.9 and above, 64bit only
To know what changed, take a look at the Release Announcements category on our blog.
If you’re the adventurous type, you can test our latest build in the Next Release Preview, but
don’t use it to work on mission critical work. You may encounter bugs.
Balsamiq for Desktop Docs > Troubleshooting Balsamiq Mockups 3 for Desktop
Something not working as expected? We're here to help! Here's a short list of steps we
recommend.
3. Contact Us
Get a human! We love to compete on customer service. Get in touch! Email
[email protected] or find more ways to contact us here.
Balsamiq Mockups 3 for Desktop's save window sometimes has a conflict with corporate IT
permission software like Digital Guardian. If your Mac has one of these software suites
installed, it might be the cause of your problems saving your files.
Fear not, your work is still being saved by Balsamiq Mockups 3 for Desktop's internal
backup system, but digging your files out of the backup folder is less than ideal.
Balsamiq for Desktop Docs > Installing Mockups 3 for Desktop on Linux
Balsamiq Mockups 3 for Desktop is not supported on Linux. However users report that it
runs well using Wine.
Linux users might also be interested in trying Balsamiq Cloud, our browser-based version,
which only requires a modern browser.
1. Install wine:
Balsamiq for Desktop Docs > Installing Mockups 3 for Desktop from the Command Line
Mockups 3 for Desktop can be registered and unregistered via the command line with the
following commands:
Note: The installation filename changes based on the version of Mockups it is installing.
Be sure to use the correct file name when running the following command.
wmic
product where name="Balsamiq Mockups 3" call uninstall /nointeractive
If your license name has a space in it, you will need to wrap the name in quotes.
Additional Resources
Looking for information on how to perform a silent installation of Mockups for Desktop on
many end-user machines? Here you go.
Balsamiq for Desktop Docs > Installing Mockups 3 for Desktop on Multiple Machines
This page is for IT administrators who need to install Mockups for Desktop on multiple
machines.
One of our customers, Sean of Shogantech, has also written an excellent article detailing the
process he used for successfully installing and registering Mockups for a Terminal Server
(Remote Desktop Server) environment.
Note: The file names have been updated for Balsamiq Mockups 3. The application file is
now called "Balsamiq Mockups 3.exe." The installation file name can be found on our
downloads page.
Windows Machines
1. Make sure Mockups for Desktop is NOT installed on the target machines.
2. Download MockupsForDesktop.zip With Adobe Air bundled from our downloads page.
It contains a "ready to run" version, with Adobe Air "in its belly".
3. Copy the zip to the target machine and unpack it (preferably in the Program Files
folder)
4. On the target machine, use this command to register Mockups for Desktop:
replacing LICENSENAME and LICENSEKEY with the license information you received
when you purchased. The register command needs to be run as the user that will use
the application.
Note: You can also silently install Mockups via the traditional installer. You will find the
command line instructions here.
Mac Machines
1. Download and mount MockupsForDesktop.dmg from our downloads page.
2. Copy the contained file "MockupsForDesktop.app" to your Applications folder.
3. to register Mockups for Desktop, run this command on Terminal:
replacing LICENSENAME and LICENSEKEY with the license information you received
when you purchased. The register command needs to be run as the user that will use
the application.
How to Uninstall a Previous Version before Updating
To silently update Mockups to a newer version you first have to uninstall the old version.
In Windows, delete the folder you copied the Mockups for Desktop folder into when
you installed it.
Balsamiq for Desktop Docs > Installing Mockups without Administrator Rights
See below for instructions on installing Balsamiq Mockups 3 for Desktop without
Administrator rights.
Windows
1. Download the version of Mockups for Desktop With Adobe Air bundled from our
download page.
2. Unzip the file wherever you prefer (we suggest the "Program Files" directory but you
might not have the rights to do so)
3. Double-click on Balsamiq Mockups.exe to launch it.
Mac OSX
1. Download the DMG version of Mockups for Desktop from our download page.
2. Mount the DMG and copy the Balsamiq Mockups application to your preferred folder.
We suggest the Applications folder but you might not have the rights to do so.
3. Double-click on Balsamiq Mockups to launch it.
Balsamiq for Desktop Docs > Installing Mockups 3 for Desktop on Citrix or Other Virtual Environments
From what we know about Citrix, you won't have any trouble installing and registering
Balsamiq Mockups 3 for Desktop on it or on any other virtual environment. You may even
find this FAQ on silent installation helpful.
Please keep in mind that you will need to purchase a Balsamiq Mockups 3 for Desktop
volume license for the total number of users who will be accessing our app within your
Citrix environment. Our licensing is by assigned users, rather than concurrent users. It will
be your company’s responsibility to make sure you are in compliance with our EULA, and
that only the users you have assigned have access to use our software.
Here is a little more information on our volume pricing and how to purchase it.