Balsamiq Mockups 3 For Desktop Documentation

Download as pdf or txt
Download as pdf or txt
You are on page 1of 194

Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Introduction to Balsamiq Mockups 3

Introduction to Balsamiq Mockups 3


Balsamiq Mockups 3 Application Overview →

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!

What's New in Balsamiq Mockups 3


In a word, lots! Here are the "highlights" you should know about:

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.

1. Navigate between Mockups, Assets, Symbols and Trash views


2. Show/Hide the left panel
3. View your mockups as a thumbnail grid
4. Create a new mockup
5. Mockup actions (rename, etc.) and navigate between mockups (shown when left panel
is hidden)
6. Go to next or previous mockup (shown when left panel is hidden)

Easier Look and Feel Customization


Control over the font used in Mockups has been one of the most-requested features since
the very beginning. Custom fonts were previously available using a complicated
configuration file, but we now allow you to set a project font in the new Project Info panel.
Yes, you can now easily use any font you have installed in your mockups. Rejoice! You can
also set a default size for it.

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.

Better Images and Assets


There is now a dedicated area for images and other imported assets, accessible from the
navigator menu.

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.

New Full Screen Mode


The same options are still there but we've overhauled the experience to make it better for
usability testing and presentations. We also got rid of the problem where mockups would
"jump around" in full screen mode.
Notes
When no controls are selected you'll see a place to add notes in the Properties panel. You
can add notes for your Project, Mockups, Assets, Symbol Libraries and individual Symbols
and they will be saved as part of the project.

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.

What's not New


For the most part, we left experience of adding, arranging and editing controls the same, so
it should be familiar if you are coming from the previous version.

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!

Importing Mockups 2 BMML Files


Balsamiq Mockups 3 has a new file format to accommodate support for projects but you can
easily import your old files.

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 3 Application Overview →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Balsamiq Mockups 3 Application Overview

Balsamiq Mockups 3 Application Overview


← Introduction to Balsamiq Mockups 3

Sharing in Balsamiq Mockups 3 for Desktop →

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.

Note: Single project files are new in Balsamiq Mockups 3.

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 first set of icons is described below.


1. Navigate between Mockups, Assets, Symbols and Trash
2. Show/Hide the left panel
3. View your mockups as a thumbnail grid
4. Create a new mockup
5. Mockup actions (rename, etc.) and navigate between mockups (shown when left panel
is hidden)
6. Go to next or previous mockup (shown when left panel is hidden)

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).

The Quick Add Tool


The Quick Add tool is the fastest way to add UI controls to your mockup. To use quick add,
click inside the quick add input box (or use the / or + keyboard shortcut to enter it). Type a
few letters from the name of a UI control or icon and Quick Add will show you 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 mockup canvas. You can also use Shift + Enter to place the
control where your mouse cursor is on the canvas.

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


This is the main working area of Balsamiq Mockups, where your UI mockup comes to life.
Once you add UI controls to it, you can move them, resize them and tweak them to your
heart's content until your UI mockup is ready. See Working with UI Controls to learn more.

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.

The Navigator Panel


The navigator panel on the left shows the list of mockups, assets or Symbols in your
project. The currently selected object is highlighted. You can select multiple objects in the
navigator panel by holding down the Control or Shift key and clicking on them. Mockups
and assets can be viewed as a text-only list or as thumbnail previews.
You can hide the navigator panel by clicking the navigator toggle icon above the panel
(keyboard shortcut: CTRL/CMD + J). Hiding it will show additional icons in the toolbar
(shown above) for navigating between mockups or assets (depending on which one is
selected). The panel can be resized by placing your mouse cursor over the line separating
the navigator panel from the canvas and dragging left or right. You can double-click on the
separator line to reset it to the default width.

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.

Using Mockup Hierarchy


Mockups 3 for editor/b3 also offers a hierarchical structure to better organize your
mockups.

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.

To restore it to the top level, use Shift+Tab.

Context Menu Actions


A context menu is also available for the objects that are open in the navigator panel. You
can either right-click on the selected object or click the small arrow that appears when you
hover over it to open the menu.

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.

The Properties Panel


The panel on the right side of the application (when shown) displays properties for the
selected control or object. Depending on which icon is selected it shows either the Property
Inspector or Project Info Panel. It can be hidden by de-selecting both panel icons in the
toolbar or unchecking Inspector and Project Information in the View menu.

Thumbnail Grid View


Clicking the icon to the right of the navigator panel toggle will switch to thumbnail grid
view, shown here.
This view shows thumbnails of all of your mockups and is useful for getting an overview of
your project. It allows you to see more of your mockups at once and is a good view to use
for reordering and tidying up (e.g., renaming and moving to the trash). You can trash
multiple mockups at once by selecting them (using CTRL/Shift + click) and bringing up the
context menu.

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.

Working on Small Screens


When working on a small laptop screen, you might want to maximize the amount of Canvas
you see.

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.

The keyboard shortcuts for toggling them are listed here:

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.

← Introduction to Balsamiq Mockups 3

Sharing in Balsamiq Mockups 3 for Desktop →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Sharing in Balsamiq Mockups 3 for Desktop

Sharing in Balsamiq Mockups 3 for Desktop


← Balsamiq Mockups 3 Application Overview Working with UI Controls →

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.

Share Mockups Project Files


A great way to share your work is to send your Mockups project files (files with a .bmpr
extension) directly to your clients and collaborators. Just be sure to include a link to
download Balsamiq Mockups - if they don't already have it.

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!

Share PNG Images


You can export all of your mockups to static PNG images, and send those to your clients.
More info about that feature here.

Use Balsamiq Cloud


Balsamiq Cloud is our web-based wireframing solution designed for large teams. With
Balsamiq Cloud, you can invite your collaborators to view, interact with, and even edit your
project. Your existing projects are completely compatible with Balsamiq Cloud, all you need
to do is upload them. Check it out today and see how to share your work with outside
clients in Balsamiq Cloud..

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

← Balsamiq Mockups 3 Application Overview Working with UI Controls →


Did you find this page useful?

Yes No

PRODUCT LEARN TO WIREFRAME ABOUT US HOW WE GIVE BACK


Balsamiq Wireframes Courses Contact Us / Support Free Software
Home Community Company Info Help to Nonprofits
Balsamiq Cloud (Web Resources Newsletter Sponsorships
App) Inspiration Blog Raffles
Download for Desktop Jobs SWAG
For Google Drive, Press Mentions Open Source
Confluence or Jira Brand Assets Office Hours
Legal Information Customer Advisory
Pricing Board
Support
Documentation
Tutorials
User Forums

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

Balsamiq for Desktop Docs > Working with UI Controls

Working with UI Controls


← Sharing in Balsamiq Mockups 3 for Desktop The Property Inspector →

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.

Note: Full list of keyboard shortcuts here.


Selecting UI Controls
There are a few different ways to select UI controls. If you are familiar with graphics
software, these should be of no surprise.

Clicking on a UI control selects it


Dragging a rectangle which encloses many UI controls selects them
SHIFT + CLICK on a control adds it to the selection
CTRL/CMD + CLICK on a selected control removes it from the selection
Hold ALT to ignore items behind the mouse and drag-select

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

Snapping and Smart Guides


When you move objects on the canvas, Mockups tries to suggest alignment relative to other
objects on the canvas using smart guides. This makes alignment a little easier and makes
your Mockups generally look neater.

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.

To unlock a control, right-click on it when your mouse cursor is over it.

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.

See the video below for a demonstration.


Grouping UI Controls
Sometimes you might want to group some controls to better align them or move them all at
once. To group a set of controls, select them and hit CTRL+G on your keyboard or use the
Group command in the Edit menu or toolbar. The controls will change color to purple to
indicate that they are grouped. Once grouped, the controls will behave as one when moving
or aligning. To ungroup controls, press CTRL+SHIFT+G on your keyboard or use the
Ungroup command in the menu or toolbar.
You can double-click on a group to "enter it" and edit its contents. A small floating
breadcrumb bar will indicate that you are editing a group and allow you to navigate back
out of the group (you can also use the Escape key). Groups can be nested, as shown below.
You can give a group a name via the Property Inspector. This can be helpful when you have
a lot of groups and need to "know where you are" when you edit their contents. Naming
groups is also useful when creating Symbols.

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.

"Drawing" Basic Controls


There are three controls that you can add to the canvas by "drawing" them with your mouse
while holding down a letter key. To quickly draw a rectangle on the canvas, hold down the R
key and drag your mouse. Holding down T instead will draw a block of text, and Y will
produce a line of text.
After you've added these controls, you can easily convert them to other controls by using
the transform menu described above.

← Sharing in Balsamiq Mockups 3 for Desktop The Property Inspector →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > The Property Inspector

The Property Inspector


← Working with UI Controls Working with Alternates →

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.

Transforming Control Types


Many of the controls in Balsamiq Mockups can be changed into other controls via the
context menu next to the control name in the Property Inspector.
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 menu to see which control types the
selected control can be transformed to.

Adding Notes to Your Mockups, Symbols and Assets


When no controls are selected the Property Inspector shows notes for the selected mockup,
asset, or Symbol. In the Mockups view the panel also shows mockup alternates.

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.

← Working with UI Controls Working with Alternates →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Working with Alternates

Working with Alternates


← The Property Inspector Working with Text →

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.

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.

Some possible reasons for using alternates:

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"

or use the context menu in the Navigator panel.


This will create a copy of the current mockup as an alternate version for you to modify.
By default it will automatically be named with the word "Alternate" followed by some
random numbers and letters to ensure that the name is unique.

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.

Note: Alternates cannot be recovered after they have been discarded.

Alternates in Full Screen Presentation Mode


You can view your alternates in Full Screen Presentation Mode by using the navigator
dropdown.
When you select a mockup alternate in this view, its name will show up in parentheses next
to the official mockup name.

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.

← The Property Inspector Working with Text →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Working with Text

Working with Text


← Working with Alternates Working with Data Grids / Tables →

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.

for italic, use _this notation_


for a link, use [this notation]
for bold, use *this notation*
for disabled, use -this notation-
for underlined, use &this notation&
for strikethrough, use ~this notation~
for color, use {color:#FF0000}this notation{color}.
for font size, use {size:16}this notation{size}

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

Making Links in Text Actually Work


If you are using the link notation above (e.g., [this is a link]), you can turn link-formatted
text into actual links using markdown syntax.

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:

[Google Home Page](google.com)


[Google Home Page](www.google.com)
[Google Home Page](http://www.google.com)
[Google Home Page](https://google.com)

Mockups in the same project:

[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.

← Working with Alternates Working with Data Grids / Tables →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Working with Data Grids / Tables

Working with Data Grids / Tables


← Working with Text Working with Icons →

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:

First Name, Last Name, Email Address


firstname, lastname, [email protected]

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.

Column Width Options


Mockups lets you specify individual width and alignment options for each Data Grid column.
Here are the details for creating column widths:

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".

Using Icons and Selection Controls in a Data Grid


Data Grid supports sort icons in headers using the following text:

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: (-)

Creating Line Returns in a Data Grid


Sometimes you want to create line returns in a table cell. To do this, you can use "\r" to
create a line return.

The code example below would print on two lines.

Name\r(job title)

Pasting Data from Excel


Some people like to prepare tables in a spreadsheet application like Excel. You can copy and
paste a range of cells directly from Excel into the Data Grid/Table component. Just
copy/paste and it will just work. It also works in the opposite direction from Mockups to
Excel.

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.

← Working with Text Working with Icons →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Working with Icons

Working with Icons


← Working with Data Grids / Tables Working with Images and Assets →

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.

Adding Icons via the UI Library and Quick Add


Also new in Balsamiq 3, 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.

Adding and Swapping Icons via the Property Inspector


Some controls allow you to add icons to them (buttons, for example). You can do this from
the Property Inspector in one of two ways: the icon search and the icon library dialog.

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.

The Icon Library Dialog


If you'd like to explore all the icons that are available, click on the icon to the right of the
icon 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.

Adding Your Own Icons


You can also easily add your own icons for use in your wireframes.

Using Your Image Assets


You can pick any of your imported image assets and use it as an icon. They will
automatically show up in the icon library, under the Assets category at the bottom.

Adding via the Icon Library Dialog


You can also add your own icons from the icon library dialog.
Select the Assets category, then click the little plus button, select an image file and your
image will be resized down to fit an existing icon size and copied to your assets.

Best Practices for Creating or Preparing Custom Icons


Mockups works with color and transparency, but icons you add may not turn out looking as
you want them to if they're not prepared to work the way Mockups expects them to. Below
are some tips to get the most out of your custom icons.

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

Working with Images and Assets


← Working with Icons Working with Markup →

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.

Adding Images in Mockups View


As mentioned above, dragging an image from your computer to Balsamiq Mockups will add
it to the canvas. Doing this will place the image into the selected mockup and copy the
image file to your Assets so that you can easily reuse it in other mockups.

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.

Adding Images in Assets View


Balsamiq Mockups 3 has a dedicated area of the user interface for managing images, icons
and other assets called the Assets view.
The Assets view shows all images and custom icons that have been added to your project.
You can get to it by switching the navigator view to Assets.

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.

Adding Non-Image Assets


You can also store other types of files in your project that won't be used in your mockups,
such as requirements documents, Photoshop or Illustrator files, PDFs, or any other file that's
associated with the project. We call these "non-image assets" and they can be added to your
project by dragging them into the Assets view, just like images. Common file types (zip,
pdf, doc, etc.) will be shown with an appropriate logo, as shown below. Other files will be
have a generic document icon.

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.

Managing Images and Other Assets


As with the Mockups view, the Assets view has a context menu that you can open by right-
clicking in the navigator or using the drop-down arrow. This allows you to rename, delete,
update, or download your images and other assets.
Renaming Assets
Renaming assets using the context menu will change the name of the asset in your project.
It will not affect the original file, as the asset is a copy that has been added to your project.
Renamed images will get updated in your mockups, so you don't need to update them
manually.

Saving Assets from Your Project to Your Computer


You can get assets from your project on to your computer by using the "Save to Disk" option
in the context menu, allowing you to extract assets from your project for other uses.

Replacing or Updating Assets


The "Import New Version..." menu option allows you to select a new assets to replace the
selected assets with. This is useful if you want to update an image that is already in use in
your mockups, for example. The new version will then be used anywhere the selected image
was used.

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.

Select Unused Images


Another option allows you to select all images that are not used in your mockups. 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 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

Balsamiq for Desktop Docs > Working with Markup

Working with Markup


← Working with Images and Assets Working with Symbols →

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.

Press CTRL+K on Windows (CMD+K on Mac) to toggle markup on and off.

In Full Screen presentation mode you can just press the "M" (or "K") key.

Making Items Markup and Non-Markup


Sometimes you will want Markup items to be treated as non-markup or vice-versa. For
example, you could use the iPhone control as a guide for designing a mobile screen, but
you might want to hide the iPhone itself when you export it and view it on a mobile device.

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.

Exporting Markup to PNG and PDF


If you want your Markup components to appear or be hidden in your exported PNG images
or your Exported PDF, simply toggle the Markup visibility as shown above, and Export.
Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Working with Symbols

Working with Symbols


← Working with Markup Working with Site Maps →

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.

1. Creating Symbols in the Mockups View


Creating a Symbol in the Mockups view starts with grouping the set of controls that
you want to become your Symbol. You can create a new group or use a group you already
have. The following steps assume you are creating a new group.

1. Select the controls you want to group.


2. Group your selection (select Edit >Group, click the Group icon in the toolbar, or use
CTRL/CMD+G). Note that the controls will turn a bluish color to indicate they are a
group.

3. Name the group.

4. Click on the "Convert To Symbol" button in the Property Inspector


You will notice that the group selection becomes a light green. This means that the
selection is now an instance of a Symbol and you can reuse it in your project.

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.

2. Using the Symbols View


New in Balsamiq Mockups 3 is a dedicated view for creating and managing Symbols.
Symbols created using the Mockups view will be shown here, and you can also create
Symbols in this view.

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.

Symbols vs. Symbol Libraries


A Symbol Library is a collection of individual Symbols. It can be used as a way of grouping
Symbols with similar purposes. Symbol Libraries are useful for managing and organizing
Symbols if you have a lot of them. If you aren't a heavy user of Symbols you can keep them
all in one Symbol Library (you can always add more Symbol Libraries later).

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.

Creating Symbols in the Symbols View


Creating Symbols in Symbols view is similar to creating Symbols in Mockups view, except
that you don't need to group them. Any controls you add to the Symbol become part of it
immediately.

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.

Using Symbols in Your Mockups


You can use Symbols just like any other control in Mockups. You can add them from the UI
Library or Quick Add and move and arrange them with other controls in your mockups.

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."

Overriding Symbol Properties


Once you have created a Symbol, you might want to change it a little each time you use it.
Imagine for instance a Symbol you created as a master page or template, containing a web
page's title and navigation.
All your website pages will have the same font size and position for the title, but the title's
text should be different on each page. The same goes for which page should be shown as
selected in your navigation bar.

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.

Using Symbols across Projects


If you want to use the same Symbol in multiple projects, you can copy it to another project
by dragging it from one project to another. You can also create a template project,
described in Using Symbols and Assets across Projects.
Managing Symbols
In addition to creating Symbols and Symbol Libraries in Symbols view, it is also a good place
to manage and organize your Symbols.

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.

Sharing Symbols Between Projects


If you want to share assets between projects, like a logo image or Symbol Library of custom
controls, we suggest creating a Balsamiq project that serves as a template for new
projects.

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

Balsamiq for Desktop Docs > Working with Site Maps

Working with Site Maps


← Working with Symbols Exporting Your Mockups →

You can create simple site maps from a text outline using the Site Map control.

Create a Site Map


Add a "Site Map" control from the UI Library to the canvas.

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):

...and in horizontal orientation:

Generating Site Maps Automatically


Next to the options for changing the orientation in the Property Inspector is a button that
allows you to automatically populate a site map based on the order and structure of your
mockups in the Navigator Panel.

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.

Notes and Options


Single Tree Support: Site Map expects the first line to be the top-most parent, and only
one of these can exist because it only makes a single tree. If you want to make
multiple trees, just add more Site Map controls.
Multi-Line Text: You can use \r to create line returns on text in a box like this:
About\rUs
You can't resize Site Maps, but if you are unable to view the entire map on your canvas
you can try changing the orientation or showing one of the nodes expanded in a
separate Site Map, as shown below.
← Working with Symbols Exporting Your Mockups →
Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Exporting Your Mockups

Exporting Your Mockups


← Working with Site Maps Working with Skins (Sketch vs. Wireframe) →

The Export menu contains the following export options:


Read on for descriptions of all of the options or skip ahead using the links below.

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.

The PDF export options are shown here.

After exporting, a notification window will appear to show you where your PDF was saved.
Click the notification to open the containing folder.

Exporting Mockup Notes


When exporting your mockups to PDF, you can choose to also export the notes that you've
written in the notes panel by checking the box labeled "Include mockup notes."

Exported images do not include mockup notes.


Another way to share mockup notes is to share the project file.

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.

Copying to the Clipboard


To copy a mockup as an image to paste into another application, select Export > Mockup to
Clipboard.

Printing
Balsamiq Mockups no longer supports printing directly to a printer. Instead you can export
to PDF and print from a PDF viewer.

Exporting Mockups to Another Project


You can copy mockups or Symbols across projects by dragging them from one project to
another. Note that dragging mockups will only copy them, not remove them from the
originating project.

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.

Exporting for Use in a Previous Version


You can also export your project for use in a previous version of Balsamiq Mockups or
version that doesn't yet support the Balsamiq Mockups 3 BMPR file format.

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)

Working with Skins (Sketch vs. Wireframe)


← Exporting Your Mockups Importing Mockups and Symbols →

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.

Switching from Sketch to Wireframe Skin


To switch skins go to the Project Info panel and set the Skin setting to "Wireframe".
The feature allows you to work on early ideas in the sketchy skin, and then later select a
menu to swap out all of your controls in the clean skin. All of your elements, including icons
will be switched.

The screenshots below show a comparison of a sample design in the default "sketch" and
"wireframe" skins, respectively. Click to view larger images.

Which Skin Should I Use?


We're glad you asked ;-) The short answer is that we still feel that the sketch skin is more
appropriate most of the time while using Mockups.

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.

Credit: Bill Buxton, Sketching User Experiences


So, while you can use the wireframe skin at any phase of the design process, we don't really
recommend it as an alternative to the sketch skin. But, rather, more as a follow-up to it. It
extends the functionality of Mockups by making it more amenable to the presentation or
pitching phase of product development, beyond just the ideation and design phase.

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.

← Exporting Your Mockups Importing Mockups and Symbols →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Importing Mockups and Symbols

Importing Mockups and Symbols


← Working with Skins (Sketch vs. Wireframe) The Project Info Panel →

Importing Mockups from a Previous Version (BMML Files)


Balsamiq Mockups 3 uses a different file format from previous versions. You can import
your old mockups in one of three formats:

1. Individual BMML files


2. A folder containing BMML files (with images and Symbols in an assets sub-folder)
3. A ZIP file containing BMML files (with or without images and Symbols in an assets sub-
folder)

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.

Importing Mockups from Another Project


The easiest way to move or copy mockups from one project to another is to simply drag a
mockup (using the navigator panel) from one project to another project. You can also select
and copy controls on the canvas in one project and paste them into the canvas in another
project.

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

Balsamiq for Desktop Docs > The Project Info Panel

The Project Info Panel


← Importing Mockups and Symbols Linking Mockups Together →

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

Balsamiq for Desktop Docs > Linking Mockups Together

Linking Mockups Together


← The Project Info Panel Full Screen Presentation Mode →

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/).

Linking to a New Mockup


To link to a blank mockup that you haven't created yet, click "Link to a New Mockup" and a
new mockup will be created and linked from the selected control. Select "Link to a New
Duplicate of This Mockup" to create a new mockup with the same content as the current
mockup. A notification will be shown with the name of the new mockup. Clicking the
notification will take you to that mockup.

Linking to a Web Page


You can also link to web URLs instead of other mockups, to show links to external sites or
product pages. To do this, select the "Link to Web Address..." option from the drop-down
and enter a web URL in the dialog that pops up.

Using Links in Presentation Mode


When you're done linking your mockups up you can enter Full Screen Presentation mode
and you'll be able to click on the links you set up to test your prototype.

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

Balsamiq for Desktop Docs > Full Screen Presentation Mode

Full Screen Presentation Mode


← Linking Mockups Together Autosaving →

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.

Navigating between Mockups


You can navigate between mockups using the icons in the upper left. They behave like the
navigation icons in the editor toolbar. The up and down arrows navigate between your
mockups in order, while the icon activated below allows you to jump directly to a specific
mockup.
If you have created mockup alternates, a menu will appear when you mouse over the
mockup, allowing you to select and display the alternates. If you are viewing an alternate, its
name will appear in parentheses next to the offical mockup name.

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.

Adjusting Your Project's Centering


Full Screen Presentation Mode centers your entire project based on the mockup that is the
tallest, and the mockup that is the widest. While this normally results in a presentation that
is centered (and whose focus doesn't jump around), if you have a mockup that is a great
deal larger than your other mockups, it may result in your project being off center, or
pushed to the top of the screen.

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

Balsamiq for Desktop Docs > Autosaving

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

Keeping Projects Clean and Organized


← Autosaving The Local Storage Folder and Backups →

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!

Let's look at few different ways to optimize a project.

Organize Wireframes and Use a Hierarchy


The Navigator Panel lists all the wireframes that belong to your project in a chronological
order.

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

To restore it to the top level, press SHIFT + TAB .

Select the Unused Images/Assets


Using Assets can be really useful when creating your wireframes but since we spend most of
the time in the Wireframes view, Assets can easily become cluttered with unnecessary
elements.

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.

Clean Up the Symbols


Symbols are another great feature that let you create reusable common elements that you
can use across different wireframes. Let's look at the best way to keep them "clean".

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.

Empty the Trash


Moving items to the Trash does not remove them from the project. Using the "Empty Trash"
option is the only way to delete those items permanently.

Extra Step: Split Your Project Into Smaller Ones


On a side note, we usually recommend keeping a project under 100 wireframes to avoid
performance issues. Sometimes, splitting a project into smaller ones is a nice and easy way
to help with slowness issues too.
We hope that these tips will be useful to improve your project's organization and help with
any performance issues you may hit.

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! :)

← Autosaving The Local Storage Folder and Backups →


Search... Search

Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > The Local Storage Folder and Backups

The Local Storage Folder and Backups


← Keeping Projects Clean and Organized Keyboard Shortcuts →

The Local Store Folder


Balsamiq Mockups 3 for Desktop creates a folder on your hard drive for storing some
local data and preferences. It looks something like this:

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:

On Windows XP: C:\Documents and Settings\<username>\Application


Data\BalsamiqMockups3.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1\Local
Store
On Windows Vista and later: C:\Users\
<yourusername>\AppData\Roaming\BalsamiqMockups3.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1\Local
Store
On Mac OS X:
/Library/Preferences/BalsamiqMockups3.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1/Local
Store

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.

Unhiding System Files in Windows


In Windows 7, if you don't see Documents and Settings, you may need to "unhide system
files." Here are the steps to do that:

1. Open Windows Explorer (Start+E)


2. Select the menu item "Organize > Folder and search options."
3. Select the View tab, and uncheck "Hide protected operating system files."

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

Balsamiq for Desktop Docs > Keyboard Shortcuts

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.

The shortcuts below apply to Mockups 3 and higher.

Working with Controls

Selection

Edit the selected control's ENTER or F2


text

Add to selection SHIFT +CLICK

Toggle selection ⌘ +CLICK


Select All ⌘ +A

Deselect All ⌘ + SHIFT + A

Ignore control(s) under Hold ALT


cursor

Treat/do not treat selection ⌘ + SHIFT + K


as markup

Size/Position

Resize maintaining aspect Hold SHIFT while resizing with mouse


ratio

Move selection along Hold SHIFT while dragging


horizontal or vertical axis

Disable snapping during Hold ⌘


move or resize

Grow/Increase text or icon ⌘ +]


size

Shrink/Decrease text or icon ⌘ +[


size

Nudge selection 1px ↑ ↓ ← →

Nudge selection 10px SHIFT + ↑ ↓ ← →

Nudge-Resize selection 1px ⌘ + ALT + ↑ ↓ ← →

Nudge-Resize selection 10px ⌘ + ALT + SHIFT + ↑ ↓ ← →

Auto-Size selection ⌘ + ALT + 0

Pan the canvas (Hand tool) SPACE BAR +Click and Drag
Bring to front ⌘ + SHIFT + ↑

Send to back ⌘ + SHIFT + ↓

Bring forward ⌘ +↑

Send backward ⌘ +↓

Duplicate selection ALT +drag

Edit/History

Undo last command ⌘ +Z

Redo last command ⌘ + Y or ⌘ + SHIFT + Z

Cut the selected controls ⌘ + X or SHIFT + DELETE

Copy the selected controls ⌘ + C or ⌘ + INSERT

Paste ⌘ + V or SHIFT + INSERT

Paste In Place ⌘ + SHIFT + V

Delete the selected controls DELETE or BACKSPACE

Duplicate the selected ⌘ +D


controls

Lock the selected controls ⌘ +2

Unlock all locked controls ⌘ +3

Transform the selected ⌘ +T


controls
Group

Group the selected controls ⌘ +G

Ungroup the selected groups ⌘ + SHIFT + G

Align

Align selected controls left ⌘ + ALT + 1

Align selected controls center ⌘ + ALT + 2

Align selected controls right ⌘ + ALT + 3

Align selected controls top ⌘ + ALT + 4

Align selected controls ⌘ + ALT + 5


middle

Align selected controls ⌘ + ALT + 6


bottom

Working with Icons


Navigating the Suggestion ↑ ↓ ← →
List

Using the selected icon ENTER

Closing the Icons Library ESC

Closing the Suggestion List ESC

Grow/Increase icon size ⌘ +]


Shrink/Decrease icon size ⌘ +[

Working with Text


Start Editing text of the ENTER or F2
selected control

Committing the current text ENTER (single-line controls), ⌘ + ENTER (multi-line

controls) or click anywhere

Ignoring the current edit ESC

Grow/Increase Text Size ⌘ +]

Shrink/Decrease Text Size ⌘ +[

Text Formatting
italic _text in underscores_

link [text in brackets]

link with a target \[text in brackets\]\(mockup_name\) or


\[text in brackets\]\(website_url\)

bold *text in asterisks*

disabled -text in hyphens-

strikethrough ~text in tildes~

font point size {size:12}text{size}

color (hex value or color {color:#ff0000}text{color} or


name) {color:red}text{color}
To type a literal *, , − -, or [] in a control, escape it by prefixing it with a \ (backslash): \*,
\, −\-, \, [\]

Special Text Macros


Lorem-Ipsum generator type lorem in a Text or Text Area control. Try l0rem for a
variation with character count.

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)

Navigating the Suggestion ↑ ↓


List

Closing the Suggestion List ESC

Sending focus back to the ESC


Canvas

Add control at cursor SHIFT + ENTER


position

Drawing Controls
Learn more about drawing controls here

Draw a rectangle on the R +drag


canvas
Draw a block of text on the T +drag
canvas

Draw a line of text on the Y +drag


canvas

Working with Mockup Files


New blank mockup ⌘ +N

Duplicate current mockup ⌘ + SHIFT + N

New project ⌘ + ALT + N

Open project ⌘ +O

Save as... ⌘ + SHIFT + S

Rename Mockup ⌘ + ALT + R

Close current project ⌘ + W or ⌘ + F4

Export this mockup's JSON ⌘ +E

Import mockup JSON ⌘ + SHIFT + E

Export snapshot to clipboard ⌘ + SHIFT + C

Export Snapshot to PNG ⌘ +R

Export All Snapshots to PNG ⌘ + SHIFT + R

Export to PDF ⌘ +P

Quit Balsamiq Mockups ⌘ +Q


Next Mockup CTRL + TAB (Windows)

PAGE DOWN or fn + ⌘ + ↓ (Mac)

Previous Mockup CTRL + SHIFT + TAB (Windows)

PAGE UP or fn + ⌘ + ↑ (Mac)

Top of Mockup HOME (Windows)

fn + SHIFT + ↑ (Mac)

Bottom of Mockup END (Windows)

fn + SHIFT + ↓ (Mac)

Views
Hide/Show the UI Library ⌘ + L or ⌘ + F1

Hide/Show the Inspector ⌘ + ; or ALT + ENTER

Hide/Show the Project Info ⌘ +,

Hide/Show the Navigator ⌘ +J


Panel

Show/Hide Markup ⌘ +K

Back to Mockups (From ⌘ + SHIFT + M


Symbols/Assets/Trash)

Zoom In ⌘ + + (plus sign) or ⌘ +scroll mouse

Zoom Out ⌘ + - (minus sign) or ⌘ +scroll mouse

Zoom to Actual Size ⌘ +1

Zoom to Fit ⌘ +0
Fullscreen
Enter Full Screen View ⌘ + F or F5

Exit Full Screen View ESC

Edit Current Mockup E

Hide/Show Toolbar T

Hide/Show Settings Panel S

Hide/Show Link Hints L

Hide/Show Big Arrow Cursor B

Hide/Show Markup K

Zoom Out to Fit Z

Hide/Show Inspector Panel I

Pan Canvas SPACEBAR

Next Mockup Page Down

Previous Mockup Page Up

Back ←

Forward →

Zoom to Fit All on Windows


For users with Windows Vista and above, you may find that the Zoom to Fit All
(CTRL+SHIFT+0) doesn't work. The reason for this is that Windows captures the input
before it gets sent to Mockups 3 for Desktop, preventing the app from ever seeing it.

Luckily, the fix is super easy.

On Windows Vista and Windows 7


You can follow the steps on Microsoft's Help Center to disable the Windows shortcut, which
will fix the issue in Mockups for Desktop.

On Windows 8 and Windows 10


The option for changing the shortcut is in a different place in Windows 8 and Windows 10.
You will need to goto Control Panel > Language > Advance Settings and then find the
Change language bar hot keys button.

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

Balsamiq for Desktop Docs > The BMPR File Format

The BMPR File Format


← Keyboard Shortcuts

Balsamiq Mockups 3 for Desktop System Requirements and Updating →

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.

Getting a BMPR File


If you want to get your hands on a BMPR file, create a new wireframe using Balsamiq app
and save the file somewhere. That's a BMPR file. Or download the example used for creating
some of the documentation that follows.

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:

There are 4 tables in a BMPR file:

INFO contains details about what kind of resources an archive contains

RESOURCES is where most of the content found in a project lives

BRANCHES contains information about branches in a project


THUMBNAILS has entries for wireframe thumbnails

The INFO Table


The INFO table describes what kind of data, or resources, our file contains. BMPR files are a
kind of BAR file, and BAR files use the INFO table to describe what kind of data they contain.
It allows developers to inspect an archive file so they can make informed decisions about
how to handle the content within.

Table Fields

Field Datatype Description

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.

VALUE TEXT The value for this meta data entry

Example Data

NAME VALUE

SchemaVersion 1.2

ArchiveRevision 44

ArchiveRevisionUUID 007F035B-6147-D643-C5CC-2871D9DA1C43

ArchiveFormat bmpr

ArchiveAttributes { "creationDate":1467124505618, // the date this archive file was


created "name":"banking_interface" // the name of the resource }

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.

The RESOURCES Table


Details about wireframes, assets, and symbols are stored here. Each row in this table
contains details (coordinates, shape, and size, etc.) about every element in a project.

Table Fields

Field Datatype Description Example

ID TEXT A unique id for a resource


ADC6E183-
B52E-038A-
1BBC-
DAEDBAE75554

BRANCHID TEXT The branch this resource belongs to


Master

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
}

The order key is only present when the resource is a mockup.

DATA TEXT JSON data with keys for wireframe data. See  
below for more details.

If the resource is a kind of otherAsset or


asset the data stored for this resource will be
the Base64 encoded representation of the
asset.

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.

The BRANCHES Table


The branches table contains records for each branch in a project. A typical project will
contain a "Master" branch at the very least.

Table Fields

Field Datatype Description

ID TEXT A unique id for a branch

ATTRIBUTES TEXT JSON data. Keys depend on whether the record is for a Master
branch or alternate branch.

Master branch example:

{
"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
}

An alternate branch example:

{
"branchName":"alt" // the name of an alternate branch
}

Things to know about branches and alternates:

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.

This is another alternate. Its ID is an


automatically generated UUID and its
"branchName" in the ATTRIBUTES
column is "Work in Progress Version".

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:

That font setting is applied to the master branch, as seen here:


The THUMBNAILS Table
Every Balsamiq project has thumbnails of the wireframes within the project. The
THUMBNAILS table keeps track of those thumbnails.

Table Fields

Field Datatype Description Example

ID TEXT A unique id for a thumbnail.


4B16F0EB-CAD0-5E34-
0BD3-DAEDBAF4CAF6

ATTRIBUTES TEXT JSON data with keys for image,  


resourceID, and branchID

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 Mockups 3 for Desktop System Requirements and Updating →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Balsamiq Mockups 3 for Desktop System Requirements and Updating

Balsamiq Mockups 3 for Desktop System


Requirements and Updating
← The BMPR File Format Troubleshooting Balsamiq Mockups 3 for Desktop →

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.

The last time we checked, they were:

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

Updating Balsamiq Mockups 3 For Desktop


Head over to the Download page and install Balsamiq Mockups 3 for Desktop on top of your
existing installation.

You won’t have to re-register.

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.

← The BMPR File Format Troubleshooting Balsamiq Mockups 3 for Desktop →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Troubleshooting Balsamiq Mockups 3 for Desktop

Troubleshooting Balsamiq Mockups 3 for


Desktop
← Balsamiq Mockups 3 for Desktop System Requirements and Updating

Troubleshooting Mac Saving Issues →

Something not working as expected? We're here to help! Here's a short list of steps we
recommend.

1. Check Your Version


If you've hit a bug there's a decent chance we've fixed it in a recent update. Start by
checking the Balsamiq for Desktop home page to make sure you're running the latest
version.

2. Check the Docs


If your problem isn't a bug or the application crashing you may find the answer to your
question in our documentation, or you search all our docs.

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 System Requirements and Updating

Troubleshooting Mac Saving Issues →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Troubleshooting Mac Saving Issues

Troubleshooting Mac Saving Issues


← Troubleshooting Balsamiq Mockups 3 for Desktop

Installing Mockups 3 for Desktop on Linux →

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.

Can We Fix This?


We aren't sure if your IT team can adjust the permissions due to the oddness of the error,
but the workaround is easy!
The save dialog still works, but the Finder shortcuts on the left side of the screen don't (or,
more specifically, the permissions they use to navigate to the save folder conflict with the
permission software). However, if you use the dropdown menu - instead of the shortcuts -
to navigate to the folder you want to save in, the save should complete successfully.
Of course, if you contine to have save trouble, please don't hesitate to get in touch so that
we can troubleshoot.

← Troubleshooting Balsamiq Mockups 3 for Desktop

Installing Mockups 3 for Desktop on Linux →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Installing Mockups 3 for Desktop on Linux

Installing Mockups 3 for Desktop on Linux


← Troubleshooting Mac Saving Issues

Installing Mockups 3 for Desktop from the Command Line →

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.

Here are the instruction for installation on Ubuntu 16.10:

1. Install wine:

sudo apt-get install wine

2. Download the offline bundle named like Balsamiq_Mockups_3.x.y_bundled.zip and


install it in /opt:
sudo unzip Downloads/Balsamiq_Mockups_3.x.y_bundled.zip -d /opt
sudo mv /opt/Balsamiq_Mockups_3 /opt/balsamiq_3_x_y
sudo rm -f /opt/balsamiq && sudo ln -s /opt/balsamiq_3_x_y /opt/bal
samiq
sudo mv /opt/balsamiq/Balsamiq\ Mockups\ 3.exe /opt/balsamiq/balsam
iq.exe

# This Should Now Work


wine /opt/balsamiq/balsamiq.exe

3. Add a startup icon:

echo '[Desktop Entry]


Encoding=UTF-8
Name=Balsamiq Mockups
Icon=/opt/balsamiq/icons/mockups_ico_48.png
Exec=wine /opt/balsamiq/balsamiq.exe
Type=Application
Categories=Graphics;
MimeType=application/x-xdg-protocol-tg;x-scheme-handler/tg;
' |sudo tee /usr/share/applications/balsamiq.desktop

← Troubleshooting Mac Saving Issues

Installing Mockups 3 for Desktop from the Command Line →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Installing Mockups 3 for Desktop from the Command Line

Installing Mockups 3 for Desktop from the


Command Line
← Installing Mockups 3 for Desktop on Linux

Installing Mockups 3 for Desktop on Multiple Machines →

Mockups 3 for Desktop can be registered and unregistered via the command line with the
following commands:

Installing and Uninstalling


To install Mockups 3 for Desktop to the Program Files directory, use the following
command. You can change the target directory to the folder of your choosing by replacing
"C:\Program Files (x86)" with your chosen directory.

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.

[CurrentMockupsVersion].exe /VERYSILENT /DIR="C:\Program files (x86)"


To uninstall Mockups 3 for Desktop, enter the following commands into an elevated
Command Prompt.

wmic
product where name="Balsamiq Mockups 3" call uninstall /nointeractive

Registering and Unregistering


Before registering Mockups 3 for Desktop, you will have to locate your registration email.
The License Name and License Key can be found there.

To register Mockups 3 for Desktop, use the following command.

"C:\Program Files (x86)\Balsamiq Mockups 3\Balsamiq Mockups 3.exe" register


LICENSENAME LICENSEKEY

If your license name has a space in it, you will need to wrap the name in quotes.

To unregister Mockups 3 for Desktop, use the following command.

"C:\Program Files (x86)\Balsamiq Mockups 3\Balsamiq Mockups 3.exe" unregister

Additional Resources
Looking for information on how to perform a silent installation of Mockups for Desktop on
many end-user machines? Here you go.

← Installing Mockups 3 for Desktop on Linux

Installing Mockups 3 for Desktop on Multiple Machines →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Installing Mockups 3 for Desktop on Multiple Machines

Installing Mockups 3 for Desktop on Multiple


Machines
← Installing Mockups 3 for Desktop from the Command Line

Installing Mockups without Administrator Rights →

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.

A Note about Licensing


You are responsible for complying with our End User License Agreement and only install
Mockups for Desktop for the appropriate number of end-users allowed by the license you
purchased.

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:

"C:\Program Files (x86)\Balsamiq Mockups 3\Balsamiq Mockups 3.exe" register


LICENSENAME LICENSEKEY

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:

/Applications/Balsamiq\ Mockups\ 3.app/Contents/MacOS/Balsamiq\ Mockups\ 3


register LICENSENAME LICENSEKEY

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 OS X, it is enough to drag the "/Applications/Balsamiq Mockups" folder to the trash.


To automate that, use the command:

rm -r /Applications/Balsamiq\ Mockups\ 3.app/

In Windows, delete the folder you copied the Mockups for Desktop folder into when
you installed it.

← Installing Mockups 3 for Desktop from the Command Line

Installing Mockups without Administrator Rights →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Installing Mockups without Administrator Rights

Installing Mockups without Administrator


Rights
← Installing Mockups 3 for Desktop on Multiple Machines

Installing Mockups 3 for Desktop on Citrix or Other Virtual Environments →

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.

← Installing Mockups 3 for Desktop on Multiple Machines

Installing Mockups 3 for Desktop on Citrix or Other Virtual Environments →


Balsamiq for Desktop Documentation

Balsamiq for Desktop Docs > Installing Mockups 3 for Desktop on Citrix or Other Virtual Environments

Installing Mockups 3 for Desktop on Citrix or


Other Virtual Environments
← Installing Mockups without Administrator Rights

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.

← Installing Mockups without Administrator Rights

You might also like