Mybalsamiq Docs MANUAL PDF

myBalsamiq Application Overview
docs.balsamiq.com/mybalsamiq/intro
myBalsamiq
myBalsamiq lets you organize your work by project, create mockups collaboratively, review and iterate designs,
and even deploy click-through prototypes for testing. See the myBalsamiq documentation index page for all the
myBalsamiq documentation.
Application Overview
You can also watch this video on our YouTube channel.
A Note about Roles and Access

Many features of myBalsamiq are role-specific. Many of the instructions in this documentation are dependent
upon permissions.
Project Members and Anonymous users will not have access to the same features as Staff members.
A few things to note:
Only site owners have access to Site Settings.

Only staff members have access to the Project management mentioned in the Projects section.
Anonymous users have the lowest level of access.
See the Setting Access Control section of projects for more information about project-level permissions, and see
the myBalsamiq Access Control Matrix for all the details.
1/1
myBalsamiq Home Page (All Projects)
docs.balsamiq.com/mybalsamiq/home
Your home page is where Staff Members create and navigate to all the projects your team is working on.
Projects are like folders to keep all of your wireframes together based on whatever organization makes sense to
you. For example, you could create a single project for a web site design you’re working on, or you could create
multiple projects for the web site design to keep parts of your design separate. How you organize is up to you.
Keep reading to get an idea of what Staff Members can do on the home page, or watch the Projects section of the
intro video on YouTube.
Anatomy of the Home Page

The screenshot below shows all the parts and functions on your site home page.
The home page is your main entry point for navigating projects. Whenever you want to return to this page, click
the Home link in your breadcrumbs in the gray bar at the top left of the screen, or click your site name or logo in the
upper left corner.
If you are not logged in, you will only be able to view public projects, that is, those that have access set to: Website
(view project content), Blog (view project content, add comments), or Wiki (view project content, add comments,
add mockups).
If you have no public projects and you’re not logged in, you’ll be redirected to the login page.
You can always sign in using the “Log in” link in the upper right corner of the screen.
Creating Projects
One of the first things you’ll do in your site is create projects to organize your mockups.
Creating projects is simple. Click one of the these two options: the book icon that reads “New Project” in the body
of the page, or the little plus icon that reads “New Project” in the upper right of the screen.
1/8
1. New Project Icon The last book in the main area of the page is a New Project button—the big plus icon will help
you spot it. You can click this to create a new project.
2. New Project Link In the top right, below the global navigation bar is a New Project Link. You can click this to
create a new project.
New Project Dialog

Clicking on either of the New Project links will open up the new project dialog you see below.
1. Project Name Enter a project name. You can always change it later. We tend to create a naming system, e.g.
[Project Name]: [Project Sub Title], or you could use [Client Name]: [Project]. Projects are sorted alphabetically, so
a nomenclature can be helpful.
2. Mailing List Address The project name is used to create a mailing list address, which is an email alias used to
notify your team of changes on the project. Project Members can also use this address to email their team from
the Project Members menu.
3. Project Description Optionally enter a project description. This can be changed later.
2/8
4. Project Members Select project members from your list of staff and non-staff members. You can also
“Automatically ass new staff members to this project” by selecting the related option.
5. Book Cover Style Select a book cover style so that you can easily pick out projects on the home view. We find
that the different book cover styles and colors help us to organize our projects. You could even use the colors to
categorize project, so you can spot them quickly.
See also the instructions for uploading an entire project from your desktop.
Renaming and Setting a Style

On existing projects, you can easily rename and change the book cover style of a project by using the drop down
menu in the bottom right.
Cloning a Project
When you select “Clone…” to clone a project from the Project Menu on the home or using the Manage Project
button on the project page, we create a copy of the project including all of its mockups.
3/8
Click the Project Menu icon in the bottom right corner
of the project book and select Clone…
You will be asked to enter the name of the new project

in a dialog, and afterward you’ll be redirected to the
new project page.
Uploading and Downloading Projects

You can download a project to your desktop so that you have a local archive, or so you can work on your project
files from Mockups for Desktop or move projects from one myBalsamiq site to another.
Upload
From a site home page, you can upload a .zip compressed file of a project folder. The project folder you’ll
compress should contain all your project BMML files, and any assets (images and symbols) used by the project
should be in an assets/ subdirectory.
To upload, simply click the Upload New Project link in the upper right of the site’s home page.
When prompted by the dialog, browse for your .zip file on your computer and click Upload. Your project .zip will be
uploaded in the background and will show up on the home page when the upload is complete.
Download
Download from Home Page
4/8
On your site’s home page, you can download individual projects from the action menu. Click the drop down menu
in the bottom right under the project title to reveal these options:
1. Download BMPR: This option will create a BMPR file from your myBalsamiq project and downloads it to
your computer. This file contains all the mockups and assets from this project in one file. It also includes
the mockup notes, project description and alternates versions.
Note: The resulting BMPR file can be opened directly in Mockups 3 for Desktop (from version 3.5.7 and above).
You can download the latest version on this page if needed.
1. Download Zip: This option will be saving a compressed file in .zip format. Expanding the zip file will create
a directory on your computer that has all of your Mockups BMML files, and assets files used by your
project.
Note: Only project assets will be included in your zip. If you used some site assets, you should download them and
install them locally separately.
Download from Project Pages
From a project’s main page (grid, story, or list view) you can select the drop down menu next to the Edit button and
select Download BMPR or Download Zip.
5/8
Archiving a Project
When you select “Archive” from the Project Menu or the using the Manage Project button on the project page, we
will move the project to the site Archives.
Moving a project to the site archives removes it from

the home view, and frees up a single project from your
site’s project quota. All of your contents are saved, but
you will not have access to the project or its contents
unless you unarchive it.
The archives are accessible via the “Archives” link in

the upper right of your home page.
Unarchiving a Project
To unarchive a project, you must be a Staff member and have been a member of the project. While on the archives
page, click the “Unarchive” link below the project title to move it to your active projects.
6/8
Note: If you’ve run out of projects in your Site’s plan you will not be able to unarchive until you either free up space
or upgrade your plan.
Deleting Project
When you select Delete from the Project Menu or the using the Manage Project button on the project page, we will
delete the project and all of its contents permanently. This is an unrecoverable action, so be sure you download
your project, using the Manage Project > Download Project Menu if you want to save a local copy of it first.
Note: Contents cannot be recovered. So be sure you

download it first if you’ll want to refer to it later.
Site Assets
The Assets link in the upper right of the home page opens the Site History manager dialog. Site Assets are images
and any assets you want to share with all projects across your site.
7/8
To upload assets, click the Upload button in the dialog. You can upload up to 5 files at a time, each having a
maximum file size of 100MB. Your computer’s upload dialog will let you select multiple files if all of your assets
are in a single folder.
For more information, view the Assets documentation.
Site History
The single line of text under All Projects near the top left of your home page shows the last update to your site. If
you click the “View History…” link, you will be taken to the Site History page, which shows an activity stream of
updates for your site.
The site history shows the following types of activity:
New Project Created

Project Archived
Project Unarchived
Project Deleted
New User Added
New Mockup Added
Mockup Updated
Mockup Deleted
New Comment Added to Mockup
You can learn more about the history feature, and view example history screens in the history section of the docs.
8/8
myBalsamiq Project Page
docs.balsamiq.com/mybalsamiq/project
An individual project page holds all the Mockups for a project.
Projects are like folders to keep all of your wireframes together based on whatever organization makes sense to
you. For example, you could create a single project for a web site design you’re working on, or you could create
multiple projects for the web site design to keep parts of your design separate. How you organize is up to you.
You can also watch the Working with Projects section of our intro video on YouTube for a quick intro to Projects in
myBalsamiq.
Anatomy of a Project Page

The image screenshot below shows all the parts and functions on a typical project page. Take a look to get an
idea about what you can do on the project page.
View full size image in a new window →
Changing Project Information

Once you’ve created a project, it’s easy to change the project name and description from the project page.
Project Title
When you hover over a title and description from the project page you’ll notice that the text is highlighted in yellow.
Any time you see this hover effect, it’s a cue that the field is editable. To edit the name or description, click the
text.
Project Description
Sometimes the description for a project is shortened, and shows a More… link. You have to expand the description
first, and then you’ll see the highlight effect. Click again to edit.
1/10
You can use the same text formatting options we provide in Mockups!
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 color, use {color:#FF0000}this notation{color}. The #FF0000 is the color in HEX form, just like HTML.
The macro will work with or without the pound sign.
Viewing Project History

You may have noticed below the big project name that there’s a single line of text showing you the last update to
the project, and who made it. The “View History…” text at the end of this line is a link to view the entire project
history of updates.
We’ll keep track of every single change that was made, so you’ll always have a complete historical view of how
your arrived at the solutions you’ve arrived at.
The project history shows these kinds of activity:
New User Added

New Mockups Added
Mockup Updated
Mockup Deleted
Mockup Restored
The project history provides a list of every change made to the project: mockups added, edited, and deleted,
people added to the project, comments added, and alternate mockups promoted.
Adding Mockups
To add a new mockup from any page in a project, click the New Mockup button in the upper right.
You can also upload an existing mockup from your

computer by clicking the drop-down arrow next to the
New Mockup button and selecting “Upload a new
mockup…”
Manipulating Mockups
To the right of every Mockup title is a little down arrow. That’s the drop down menu that lets you perform actions
on each Mockup.
Depending on the permissions you have, the menu provides access to features including commenting, renaming,
cloning, downloading, and deleting.
2/10
Re-Ordering Mockups
Mockups can be arranged arbitrarily in whatever order makes sense for your project.
Arranging mockups in order is simple. Hover over a mockup and you’ll see a gray grip bar above the thumbnail.
Click and hold on the bar and drag to another place on the grid to change it’s position in the order.
Now when you use pagination and story mode, the mockup will appear in the order you’ve created on your project
page.
Adding and Managing Project Assets

An assets manager is provided store re-usable images, Mockups, or other files you want to share in your project.
To access the Assets Manager, click the Assets link the upper right of the screen.
3/10
To upload assets, click the Upload button in the dialog.
You can upload up to 5 files at a time, each having a maximum file size of 1MB. Your computer’s upload dialog will
let you select multiple files if all of your assets are in a single folder.
For more information, view the Assets documentation.
Adding Project Team Members

Project members have to be added to projects to be able to work on mockups and add comments.
To add people to projects, click the “Project Members” menu in the upper right of the screen.
The Project Members drop down menu will appear. You can see other members that currently have access to the
project.
4/10
Click the “Add and Manage Members” link and a
pop-up will appear to add or remove staff
members or submit email addresses of
additional people you want to invite.
Clicking the “Save Changes and Send Invites” button will send an email invitation.
People that were invited appear at the bottom of the pop-up the next time it’s opened if they haven’t accepted yet.
You can click the blue arrow icon to re-send the invitation, or click the red X icon to un-invite them.
Notes:
1. You can set a staff member to automatically be added to new projects via the Staff page.
2. You can promote non-staff members that you’ve invited to projects to staff by simply using the invite form
on your Staff page. You get to the Staff page by clicking the Staff link in the header
5/10
Setting Access Control
By default, all sites are set to private and only invited staff and project members will have any access.
Access control settings allow staff members belonging to a project to set viewing, commenting, and editing
options for your projects. Only staff members may change access settings.
1. Private (default) Only invited staff or project

members may access the project. All project members
have access to view mockups, add new mockups, add
comment.
2. Website Anyone may view project content (mockups

and comments).
3. Blog Anyone may view project content and add

comments.
4. Wiki (use with caution) Anyone may view project

content, add comments, and add mockups.
Please refer to the myBalsamiq Access Control Matrix

for details on “who can see and do what” based on
their role.
Mockup Views
You can view your project using one of 4 main views: Grid, Story, List, and Prototype.
You can switch between views using the view icons. Lastly, you can use the Prototype View if you’ve linked your
Mockups together, to display a click-through prototype.
1. Grid This is the default view. It provides an overview of your project, showing a grid of
your mockups as thumbnails and titles.
2. Story The story view is a nice linear presentation of your project. All of the project’s
mockups are presented with title, full mockup image, and description on a single page.
When you arrange your mockups in order, this is a useful format for users who want to get an overview of the
entire project, and can be useful for presentation and printing.
3. List The list view displays your product’s mockups with smaller thumbnails. This view can be useful for
managing large projects.
4. Prototype The Prototype view allows you to show your Mockup without all of the surrounding interface of
myBalsamiq. If you’ve linked your Mockups together, this can be useful as a click-through prototype, or even for
doing usability testing.
Prototype mode follows permissions settings, but allows you to share a private URL using a private key. This is
useful for testing with remote usability testing services or for giving to people who aren’t project members. If you
set a project to Private, anonymous users will not have access to the project’s prototype views or to browse its
content, and subsequently will get an unauthorized error. However, using the shareable link with the private key in
the address makes the URL shareable using an address that is not guessable.
Project Actions
6/10
From the Edit menu on the project page you can perform the following actions:
Edit Mockups The main Edit button opens

the Mockups editor so you can begin editing
your Mockups.
Clone Project Creates a copy of the project

and all of its mockups and project assets to a
new project.
Download BMPR Creates a BMPR file from

your myBalsamiq project and downloads it to
your computer. This file contains all the
mockups and assets from this project in one
file. It also includes the mockup notes,
project description and alternates versions.
Note: The resulting BMPR file can be opened

directly in Mockups 3 for Desktop (from version 3.5.7 and above). You can download the latest version on this
page if needed.
Download Zip Saves a compressed BMMLs ZIP

file to your computer with all your mockups and
project assets so you can easily move projects
from one myBalsamiq site to another.
Export to PDF Exports a PDF of the project. You

can use the exported PDF for sharing the file
with others or using as a click-through
prototype.
To export a project, select Export PDF… from

the Edit Menu, and then select your export
options in the dialog that appears. Click the
Export PDF button to save the file to your
computer.
7/10
Manage Members Allows you to add or
remove project members, and invite new
users by entering their email addresses.
This action is only available for the project
owner and for the site owner.
Change Owner Allows you to pass the

project ownership to another staff
member. Again, this action is only
available for the project owner and for the
site owner.
Archive Project Moves the project to the

archives, where it will be inactive unless
un-archived. Archived projects don’t count
towards your plan. Archiving old projects
allows you to create new projects without
needing to upgrade your plan. You will not
be able to view the project while it is
archived.
Only the site owner and the project owner

are able to archive and un-archive projects.
Delete Project Deletes the project and all of its contents permanently.
Note: Contents cannot be recovered.
Uploading and Downloading Projects

You can download a project to your desktop so that you have a local archive, or so you can work on your project
files from Mockups for Desktop or move projects from one myBalsamiq site to another.
Upload
From a site home page, you can upload a .zip compressed file of a project folder. The project folder you’ll
compress should contain all your project BMML files, and any assets (images and symbols) used by the project
should be in an assets/ subdirectory.
To upload, simply click the Upload New Project link in the upper right of the site’s home page.
When prompted by the dialog, browse for your .zip file on your computer and click Upload. Your project .zip will be
uploaded in the background and will show up on the home page when the upload is complete.
Download
Download from Home Page
When you download a project, you’ll have two options:
1. Download BMPR: This option will create a BMPR file from your myBalsamiq project and downloads it to
8/10
your computer. This file contains all the mockups and assets from this project in one file. It also includes
the mockup notes, project description and alternates versions.
Note: The resulting BMPR file can be opened directly in Mockups 3 for Desktop (from version 3.5.7 and above).
You can download the latest version on this page if needed.
1. Download Zip: This option will be saving a compressed file in .zip format. Expanding the zip file will create
a directory on your computer that has all of your Mockups BMML files, and assets files used by your
project.
Note: Only project assets will be included in your zip. If you used some site assets, you should download them and
install them locally separately.
On your site’s home page you can download individual projects from the action menu. Click the drop down menu
in the bottom right under the project title to reveal these options.
Download from Project Pages
From a project’s main page (grid, story, or list view) you can select the drop down menu next to the Edit button and
select Download BMPR or Download Zip. See the details for each option above.
9/10
10/10
myBalsamiq Access Control Matrix
docs.balsamiq.com/mybalsamiq/accesscontrolmatrix
The table below shows the full access control rules matrix for a myBalsamiq site.
This can be helpful to understand “who can do what” depending on their role.
1/1
Area Feature Site Owner Staff Member Non-Staff Member Anonymous Users
can create, be a that's not a staff can see public
member of and member (for staff projects (i.e. project
own projects members' projects access is either
rights, see "Staff website, blog or wiki)
Member" column)
User
Settings view and edit user info, photo and password everyone's only their own only their own No
delete a user everyone's only their own only their own No
see what projects they're on everyone's only their own only their own No
only for the
projects they No since they can't
change a project owner to another staffer everyone's own own projects No
Site
Settings customize site info (theme, logo) Yes No No No
see staff members page Yes Yes No No
invite / remove staff members Yes No No No
only for
position staff member avatars on map Yes themselves only for themselves No
set "automatically add to new projects" flag for only for
staff members Yes themselves No No
No (except for edu
buy discounted Mockups for Desktop licenses Yes Yes sites) No
redeem Desktop licenses for credit Yes Yes No No
change subscription plan Yes No No No
manage billing information Yes No No No
optionally subscribe all email notifications Yes No No No
make someone else the site owner Yes No No No
delete company site Yes No No No
only the projects
they own or are only the ones they
Site members of or are members of and
Projects view list of projects Yes are public public ones only public ones
only the projects
they own or are
members of or
are public
view list of archived projects Yes No No
only for projects
they own or are only for public
members of or projects
view mockup history Yes are public Yes
only the projects
they own or are
members of or
are public
unarchive projects Yes No No
Yes (they
become the
owner by
creating it)
create a project Yes No No
only the projects
archive or delete a project Yes they own No No
only the projects
they own or are
members of or
public ones
clone a project Yes No No
only the ones used in
public projects, and
only in the projects
only the ones used (they don't see the
Site in the projects they site assets link)
Assets view/download site assets Yes Yes are members of
upload site assets Yes Yes No No
delete site assets Yes Yes No No
only for projects
Projects view mockups in a project Yes are public Yes
only for projects
they own or are
members of or
are public at only for public
wiki level projects at wiki level
edit a project's mockup order Yes Yes
only for projects
download a project Yes are public Yes
only for projects
they own or are
receive project email notifications if subscribed members of Yes No
only assets in
projects they
own or are only for public
Project members of or projects
Assets view/download project assets Yes are public Yes
only in projects
they own or are
members of or
upload project assets Yes Yes
only in projects
they own or are
members of or
delete project assets Yes Yes
only for projects
Members see project member list Yes are public Yes
only to projects
they own or are
invite new project members Yes members of No No
Only from
projects they
Yes except for own or are
the project members of,
owner (they and the project
must change owner cannot
remove project members the owner first) be removed. No No
only in projects
Project they own or are
Access change a project's anonymous access level Yes members of No No
only for projects
Mockups view single mockup page Yes are public Yes
only for projects
view mockup history Yes are public Yes
only for projects
download mockup source Yes are public Yes
only for projects
they own or are
members of or
create/upload/edit/rename/clone mockups Yes Yes
only for projects
they own or are
delete mockups Yes members of Yes No
only for projects
they own or are
members of or
blog or wiki projects at blog or wiki
level level
add comments to a mockup Yes Yes
only for projects
they own or are
members of or
are public at
blog or wiki only for public
propose alternate version add comments to a level projects at wiki level
mockup Yes Yes
only for projects
they own or are
members of or
are public at
level projects at wiki level
promote alternate to main mockup Yes Yes
only for projects
they own or are
members of or
are public at
level projects at wiki level
revert to a previous mockup version in history Yes Yes
myBalsamiq Single Mockup Page
docs.balsamiq.com/mybalsamiq/mockup
The image below is a marked up screenshot showing all the parts and functions on a single Mockup page.
You can also watch the Mockup section of our intro video on YouTube for a quick intro to Mockups in myBalsamiq.
Creating Mockups
To Create a mockup, select the New Mockup button in the upper right of a project or mockup page.
The New Mockup button also provides a drop down menu

to create a new mockup by uploading it from your
computer.
If you use the New Mockup button dropdown menu while

on a single mockup page, the drop down menu also
provides an option for cloning the mockup, which will
create a copy of the mockup that you can modify.
Mockup Description, Permalink, Download

Below a Mockup, you’ll see 5 bits of information:
1. Toggle Link Hints This option allows you to turn on and off link hints. Link hints will be shown with a pink
overlay so they can be seen easily.
2. Image Permalink The image permalink below the Mockup provides a link to the Mockup image so you can
embed the URL in an external web page or in emails to share the image. Note that projects must be public for the
image permalink to work externally for anonymous users.
3. Download Image The download image link opens the image (PNG format) in a new window. You can right-click
the link and select Save to save to your computer.
4. Download BMML The download BMML link provides a link to download the BMML file for the Mockup.
1/5
5. Mockup Notes Below the Mockup links, you will find the Mockup notes. If there are no notes, the text reads
“Click to edit mockup notes” if you have permission to do so. Clicking the text displays an input to add your notes,
which are displayed on the single Mockup view and in the project’s story view.
You can use the same text formatting options we provide in Mockups!

Navigating Mockups in the Project

When you’re browsing through project, you can navigate easily between the Mockups two ways: Prev/Next arrows
and Mockup Sidebar.
1. Using the Previous/Next arrows If you’re viewing a

single Mockup, in the top right of the screen below the
project menus, you’ll see a left and right arrow. They let
you navigate to the next or previous mockup in the
project. Hover over one of the arrows to see the name
of the next or previous Mockup, and click to go to it.
2. The Mockup Sidebar Icon Next to the Previous/Next

arrows, you’ll see a little square icon. This turns on the
Mockup Sidebar.
3. Using the Mockup Sidebar The Mockup Sidebar is a

little vertical strip that slides in and out of the right side
of the page to show you a list of Mockups in the project,
and a thumbnail previous for each one.
The current Mockup is shown selected in blue. Each

Mockup has a down icon to the right that opens the
action menu for the Mockup. From the action menu you
can view the available actions you have permission to
invoke (e.g. edit, add comment, view history, rename,
clone, and delete).
You can add comments to Mockups, just as you would

to a blog entry. This is especially important in
myBalsamiq, because we use comments when
reviewing different versions of Mockups. The version
number shows what Mockup a comment refers to.
Scroll to the bottom of a Mockup page, enter your

comment in the comment form and click the “Add
Comment” button.
2/5
You can use the same text formatting options we provide in Mockups:

Your comment will be added, and will show other project members what version of the Mockup you commented
on. Users can click the version number reference to see what Mockup the comment refers to—the Mockup image
will be displayed in a lightbox.
Proposing Alternate Versions

Working on wireframes is an iterative process, so one of the most important aspects of the review process is
proposing alternate versions.
We’ve made iterations a big part of the review and commenting process by allowing you to modify the current
Mockup, and propose your alternate version in the comment stream.
To propose an alternate version, scroll down to the comment section below the Single Mockup View, and select
the “Propose Alternate Version…” button. The Mockups editor will open and allow you to modify the current
Mockup for your team to review.
Once you’re done working on the alternate version in the editor (where you can add mockup notes as comments),
click on “Submit Alternate Mockup and Comments”.
After reviewing the alternate version proposal, users

can:
Promote the proposal as the current Mockup by

clicking “Promote to Main Mockup” if they’re
happy with the changes.
Make further changes before promoting it by
clicking “Merge into Main Mockup…”.
Download the Mockup BMML
3/5
Viewing Mockup History
You may have noticed below the big project name that there’s a single line of text showing you the last update to
the project, and who made it. The “View History…” text at the end of this line is a link to view the entire history of
updates to the project.
We’ll keep track of every single change that was made, so you’ll always have a complete historical view of your
design decisions. Over time you’ll see how comments and alternate versions of Mockups have contribute to the
unfolding story of your design.
The project history shows these kinds of activity:
Mockup Updated
Mockup Deleted
Mockup Restored
Restoring Versions
We keep versions of each mockup that’s committed to your project.
If you’re looking at the mockup history, each earlier version will have a button to restore it as the latest Mockup.
Click Restore and it’ll replace your current version.
Restoring Deleted Mockups

You can restore deleted mockups by going to the history and clicking the “Restore this version” button. You can
also download the file without restoring it by clicking the “Download BMML” link. Deleted mockups may take a few
minutes to appear in the history.
4/5
You will then see a message indicating that your mockup was restored.
Cloning Mockups
The “New Mockup” button on a Mockup page has a drop-down menu with options to copy it to a new mockup
using the Clone menu.
Select the New Mockup drop down and choose “Clone this Mockup” and we’ll copy it’s content to a new mockup
and ask you to give it a title.
Mockups Editor
The Mockups Editor is the application used for creating wireframes. Documentation for most aspects of the editor
can be found in the myBalsamiq Mockups Editor Documentation.
5/5
myBalsamiq Mockups Editor
docs.balsamiq.com/mybalsamiq/editor
The Mockups editor in myBalsamiq is similar to the editor in other versions. See the Mockups Application
Overview and Working with UI Controls for more details.
UI Overview
The myBalsamiq editor is made up of four main parts, as shown below: The Menu Bar, the UI Library, the
Mockups editor canvas, and the Project Browser.
The Menu Bar is where you will find menus and icons for performing common actions, as well as the Quick Add
box. You can learn more in the Mockups Application Overview.
The Project Browser
Navigating the Project Browser

The Project Browser lists all mockups that you have in the current project. Clicking on the name of a mockup in the
Project Browser will bring it up in the Canvas for editing. You can view the files in the Project Browser in list or
thumbnail views by clicking the icons in the corner of the Project Browser.
You can also view any Symbols you have created in the Project
Browser by clicking the tab labeled “Symbol Libs”.
This tab has a second level of tabs for viewing Project Symbols or
Site Symbols.
1/2
Reorder, Rename, Delete and Clone
When you move your mouse cursor over the name of a mockup you will see a small arrow appear. Clicking on this
arrow will show a menu that allows you to rename, delete or clone the mockup.
To change the order of a mockup in the list, hold down the mouse
button to select it in the Project Browser and drag it up or down in the
list.
Auto-Save
myBalsamiq auto-saves often, so if your browser or editor crashes you should be able to recover your work when
you relaunch the editor. Also, if you lose your network connection while editing you will get a notification like this:
Simultaneous Editing
While you are editing a project myBalsamiq looks for changes that are being made by another user. If a change is
made, such as rename, reorder, or delete, you will receive a small notification that looks like this:
2/2
Mockups Application Overview
docs.balsamiq.com/mybalsamiq/overview
Balsamiq Mockups is made up of three major blocks. From top to bottom: the Application Bar, the UI library, and
the Mockup Canvas Each is described below.
The Application Bar

The application bar includes Menus, the Quick Add tool, and the Toolbar. Each is described below.
The Mockups menus should be pretty self-explanatory. The only tricky bit is that the Mockup menu contains
different items depending on what version of Balsamiq Mockups you are using. In general, that’s where you’ll find
the About Box and commands related to your mockup as a whole, like saving, exporting to XML or PNG, etc.
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 Enter to add the control or icon on the mockup 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.
1/3
Try out Quick Add now! As you become familiar with it, you could even
hide the UI Library (through the View menu) and simply use Quick Add to
add UI elements to your mockup. This maximizes both your mockup
canvas area and your speed!
The Toolbar
The toolbar includes most of the same commands as the Edit menu: undo, redo, duplicate, cut, copy, paste and
delete. Not all versions of Balsamiq Mockups support the same keyboard shortcuts, so the Toolbar gives you a
handy way to perform common actions. Notice that you’ll find the same commands in the Property Inspector as
well.
The UI Library
The UI Library, or UI Controls Library, is the long strip of UI Controls just below the Application Bar. It lists all of the
different UI control types that Mockups supports, alphabetically. 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, simply select the control type you wish to add, then you can either “drag
and drop” 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 positioned to the top, left, or right of the application window using the menu, View > UI
Library Position.
The Mockup Canvas

The rest of the application is the Mockup Canvas.
2/3
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.
The mockup canvas grows and shrinks with your browser or application window, so you can make room for bigger
mockups if you need to.
3/3
Working with UI Controls
docs.balsamiq.com/mybalsamiq/controls
Adding UI Controls
To add new UI controls to your mockup, you can use 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).
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
SHIFT+CLICK on a selected control removes it from the selection
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.
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 by holding down SHIFT and using your keyboard’s
UP/DOWN/LEFT/RIGHT keys
You can move your controls to be aligned in one direction by using the align tools found in the Property
Inspector
1/5
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 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.
Another way to resize some controls to their “natural size” is to use the Auto-Size function found in the Property
Inspector.
Aligning UI Controls
You can align and distribute (space out) controls by selecting multiple controls and selecting the desired option
from the Property Inspector, as shown below.
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 Property Inspector: bring to front,
send to back, bring forward and send backward.
Locking UI Controls
2/5
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 clicking the lock icon in the Property Inspector.
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 button in the Property Inspector 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.
Grouping UI Controls
Sometimes you might wish to group some controls to better align them or to 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 menu or Property
Inspector. 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 Property Inspector.
3/5
You can double-click on a group to “enter it” and edit its contents. A
small breadcrumb bar (at the bottom of the editor) 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 optionally give a group a name via the group’s 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 and
grouping controls is also the first step to creating Symbols.
4/5
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.
5/5
The Property Inspector
docs.balsamiq.com/mybalsamiq/inspector
The Property Inspector (also called the toolbox, palette, property dialog, properties window, toolbar, floating
window, floating tool bar, properties box and control dialog) is the little floating rectangle that appears once you
select one or more UI controls. It allows you to perform some common functions such as copying/pasting,
layering, and aligning controls, as well as some control-specific customizations.
The Property Inspector is displayed when you select an object on the canvas. You can drag the Property Inspector
to move it; it will re-appear where you left it next time you need it. You can also make it smaller (so that only the
title bar shows) by clicking the collapse icon in the upper-left corner.
If your UI Library is visible, you can set the inspector to be docked over it. The View menu shows this option.
Common Inspectors
Editing Always present, always at the top. From left to right: undo, redo, duplicate, cut, copy,
Inspector paste, delete, group, ungroup, lock
Layering and Always present, always in the second row (below the editing inspector). Layering,
Position & Size from left to right: bring to front, send to back, bring forward, send backward.
Position and size shows you the size and position of the selection, in pixels. Clicking
on the numbers lets you edit them. The format is "X,Y WxH" where X is the x
position, Y is the y position (0,0 is top-left, growing right and down), W is the width
and H is the height of the selection.
1/2
Align Shown whenever more than one control is selected. Lets you align the selected
elements horizontally to the left, center and right and vertically to the top, middle
and bottom. The next two icons distribute the centers of the selected items
horizontally or vertically. The last two icons space out the selected items evenly
horizontally or vertically.
2/2
Working with Text
docs.balsamiq.com/mybalsamiq/text
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 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 for how to turn [linked text] into functioning links to websites or other mockups.
Here’s a screenshot of what the above text looks like in a Paragraph control, for instance:
1/4
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)
[Features Page](features.bmml)
Adding links in this way will cause them to show up in the Property Inspector as well, as shown below.
2/4
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-Path}
Type {mockup-path} (all lower-case) in a Label or Paragraph control to show the full path of the current mockup.
{Mockup-Name}
Type {mockup-name} (all lower-case) in a Label or Paragraph 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
3/4
and Block of Text controls.
4/4
Working with Data Grids / Tables
docs.balsamiq.com/mybalsamiq/datagrids
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@email.com
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’s a quick video showing how to do this:
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

1/2
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.
2/2
Working with Icons
docs.balsamiq.com/mybalsamiq/icons
Balsamiq Mockups and myBalsamiq come packed with over 600 icons courtesy of the Font Awesome Icon
Library.
There are two ways to select an icon to use: the icon search and the icon library.
Icon Search
If the controls 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. In this case, the list is a grid of icons to choose from. Just click on the one you want to
select it.
The Icon Library

If you’d like to explore all the icons that are available, click on the little down-pointing arrow to the right of the icon-
search box. This will bring up the icon library, where you can browse the icons by category and preview them at
different sizes. One trick is to double-click on the icon you’d like to select, instead of clicking to select and then
clicking on the “Select” button.
1/4
Once you have selected an icon, you can resize it, rotate it or remove it via the Property Inspector.
Adding Your Own Custom Icons

Note: Custom icons are not currently supported in our Mockups for Confluence and Jira server plugins. This
feature is coming in version 3!
If you’d like to get your own custom icons into your projects, these are the steps to follow:
First, you will need to rename the icon file so that it has “icon_” at the front of the file name.
Once your icon file is ready, you will want to open the asset
manager on either your home page, or the project page.
In the asset manager, choose whether the icon needs to be a site asset or a project asset, and then upload it.
2/4
Now the icon can be added to your mockups. Add an icon control to your mockup, open the icon library from the
property inspector and select the asset section (project or site) that you uploaded it to.
Best Practices for Creating or Preparing Your 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
3/4
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.
4/4
Working with Images
docs.balsamiq.com/mybalsamiq/images
Adding Images
To use images in Mockups, add an Image control from the UI Library and place it on the canvas. The Image drop-
down in the Property Inspector will allow you to select images that have already been imported/used in your
mockup or import a new one.
The Project Assets panel shows all images in your assets. If you have Site/Account assets, a tab will appear for
them. If you use web images or images using relative paths that are not project assets, those will show in the
Other Assets tab. On the desktop, you’ll also see a handy link to open the Account Assets folder when you click on
the Account Assets tab.
Click the plus icon in the upper right corner of the drop-down to choose a new image, or just double-click on the
Image UI control to quickly bring up the image browser dialog. You can choose images from your hard drive or
networked drive, or from the Web or Flickr. Mockups supports GIF, JPG/JPEG, and PNG image file formats.
1/3
If you are working on a saved file, you can also just drag an image from your computer to the Mockups canvas.
Note: The dragging feature is only available on the Desktop version of Mockups.
To rotate an image after it’s been imported, click the rotate icon next to the Image drop-down in the Property
Inspector. To convert an image to a black and white line drawing version, click the “Sketch It” checkbox in the
image import dialog or the Property Inspector.
To revert an image to the default placeholder image, click the icon in the upper left corner of the image drop-down
(the square with an ‘x’ inside it).
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.
Copying Images to Assets

When you add images to Mockups, what we suggest is that you also add them to “project assets” so they will stay
organized with the project and may be re-used in other mockups.
Here’s how:
If your Mockup isn’t saved, Save your Mockup.

Add an image to your Mockup.
In the lower left corner of the Property Inspector, check “Copy to Project Assets” so this image will stay
organized with the project and can be re-used in other mockups.
After you add an image, it will be available in the Property Inspector.
Note: This will be automatically done in our web based versions since the image will be added to Project Assets.
Using Images as Custom Icons

Mockups also allows you to import your own icons. Importing an image with “icon_” at the front of the file name
will make it appear in the Icon Library, under the Project Assets category.
2/3
3/3
Working with Markup
docs.balsamiq.com/mybalsamiq/markup
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 in the upper right corner of the editor to the left of
the Presentation Mode button.
The screenshot below shows the previous page with Markup off, and the toggle button is displayed in the corner.
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 “K” key.
1/2
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.
2/2
Working with Symbols
docs.balsamiq.com/mybalsamiq/symbols
Note: myBalsamiq is the only version 2 web application that supports Symbols.
Symbols allow you create reusable common elements across different mockups. Other software often refers to
this same feature as templates, master pages, custom components, or widgets.
Creating Symbols
Symbols in Mockups are simply named groups which have been “converted” to symbols.
Symbols can be made from existing groups, or from ones you create fresh. 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 or CTRL/CMD+G and the group will turn a bluish color)
3. Name the group (e.g., login form)
4. Save the file with the new group (the file must be saved to convert a group to a symbol)
5. 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. This new Symbol (named, for example, “login form”) will be displayed in the Project Assets tab of the UI
Library. You can also add the Symbol via Quick Add.
Overriding Symbol Properties

Once you have created a symbol, you will often 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.
1/6
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. Same goes for which page should be shown as current in your navigation bar.
Symbols allow you to achieve this result by letting you override symbol properties each time you use a symbol. To
do so, start by double-clicking (or hitting ENTER) on a symbol to “enter it”.
Although this experience is very similar to editing a group’s contents, you will notice that Mockups warns 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 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.
2/6
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.
Editing a Symbol’s Source

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.
To edit a Symbol’s source, you need only open the Symbol Library and edit it normally, just as you would edit a
group.
3/6
Save your changes, go back to a mockup that uses that symbol and notice that your changes have been applied,
just like that!
There are a couple of shortcuts in the app that help you reach a Symbol’s source in order to edit it:
You can select a Symbol instance and hit the “Edit Source” button in the property inspector.
You can enter a Symbol for overriding, then hit the “Edit” button there.
Symbol Libraries
A Symbol Library is a collection of symbol definitions. You might want to create a Symbol Library in order to share
common controls with your team.
To create a Symbol Library, you can either create a symbol (which will automatically create a library) or select
Project > New Symbol Library from the menu.
4/6
Sharing Symbols across Projects
If you would like a Symbol Library to be used across all projects, you only need to upload the library to your site
assets.
To do this, you first have to download the library from your project assets.
This will download a .bmml file to your computer. Take that .bmml file and upload it to your site assets.
5/6
Doing this will allow that Symbol Library to be accessed across all your projects!
6/6
Working with Site Maps
docs.balsamiq.com/mybalsamiq/sitemaps
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
This is what the outline above looks like:
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
showing one of the nodes expanded in a separate Site Map, as shown below.
1/2
2/2
Keyboard Shortcuts
docs.balsamiq.com/mybalsamiq/shortcuts
Note: Some of these shortcuts do not work in our web versions, depending on which browser and operating
system you are using.
Below is a list of all the keyboard shortcuts and modifiers which you can use in Balsamiq Mockups.
Working with Controls
Selection
Edit the selected control's text ENTER or F2
Add to selection SHIFT +CLICK
Toggle selection CTRL +CLICK
Select All CTRL + A
Deselect All CTRL + SHIFT + A
Size / Position
Resize maintaining aspect ratio Hold SHIFT
Disable snapping during move or resize Hold CTRL
Increase font or icon size CTRL + ]
Decrease font or icon size CTRL + [
Nudge selection 1px ↑ ↓ ← →
Nudge selection 20px SHIFT + ↑ ↓ ← →
Nudge-Resize selection 2px CTRL + ALT + ↑ ↓ ← →
Nudge-Resize selection 20px CTRL + ALT + SHIFT + ↑ ↓ ← →
Pan the canvas (Hand tool) SPACE BAR +Click and Drag
Bring to front CTRL + SHIFT + ↑
Send to back CTRL + SHIFT + ↓
Bring forward CTRL + ↑
Send backward CTRL + ↓
Clone selection ALT +drag
Edit/History
Undo last command CTRL + Z
Redo last command CTRL + Y
1/4
Cut the selected controls CTRL + X
Copy the selected controls CTRL + C
Paste CTRL + V
Paste In Place CTRL + SHIFT + V
Delete the selected controls DELETE or BACKSPACE
Duplicate the selected controls CTRL + D
Lock the selected controls CTRL + 2
Unlock all locked controls CTRL + 3
Group
Group the selected controls CTRL + G
Ungroup the selected groups CTRL + SHIFT + G
Align
Align selected controls left CTRL + ALT + 1
Align selected controls center CTRL + ALT + 2
Align selected controls right CTRL + ALT + 3
Align selected controls top CTRL + ALT + 4
Align selected controls middle CTRL + ALT + 5
Align selected controls bottom CTRL + ALT + 6
Working with Icons

Navigating the Suggestion List ↑ ↓ ← →
Using the selected icon ENTER
Closing the Icons Library ESC
Closing the Suggestion List ESC
Working with Text

Start Editing text of the selected ENTER or F2
control
Committing the current text ENTER (single-line controls), CTRL + ENTER (multi-line
controls) or click anywhere
Ignoring the current edit ESC
Grow/Increase Text Size CTRL + ]
Shrink/Decrease Text Size CTRL + [
2/4
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 name) {color:#ff0000}text{color} or {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 Paragraph or Text Area. Try _l0rem_ for a
variation.
Show the full path of the current type _{mockup-path}_ in a Label or Paragraph control
mockup
Show the current mockup name type _{mockup-name}_ in a Label or Paragraph 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 Canvas ESC
Working with Mockup Files

New Blank Mockup CTRL + N
New Clone of Current Mockup CTRL + SHIFT + N
Open a mockup file CTRL + O
Save the current mockup file CTRL + S
Save as... CTRL + SHIFT + S
Close current mockup CTRL + W
Close all mockups CTRL + SHIFT + W
Export this mockup's XML CTRL + E
Import mockup CTRL + SHIFT + E
3/4
Export Snapshot to Clipboard CTRL + SHIFT + C
Export Snapshot to PNG CTRL + R
Export All Snapshots to PNG CTRL + SHIFT + R
Print mockup CTRL + P
Quit Balsamiq Mockups CTRL + Q
Looping through the open files in CTRL + TAB and CTRL + SHIFT + TAB
Mockups for Desktop
Views
Hide/Show the UI Library CTRL + L
Enter Full Screen View CTRL + F
Exit Full Screen View ESC
Show/Hide Markup CTRL + K
Zoom In CTRL + + (plus sign) or CTRL +mouse scroll up
Zoom Out CTRL + - (minus sign) or CTRL +mouse scroll down
Zoom to Actual Size CTRL + 1
Zoom to Fit CTRL + 0
4/4
Linking Mockups Together
docs.balsamiq.com/mybalsamiq/linking
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.
The list is pre-populated with the names of all the mockups in the same project as the mockup you’re editing.
For controls that can have multiple targets, you’ll see something like this:
1/3
Once you have selected a mockup or web page to link to from the pull-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.
Linking to a Web Page

You can also link to web URLs instead of other mockups, to show links to external sites or existing product pages.
To do this, select the “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.
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 mockup or web page for the link.
2/3
Click on a link to show the referenced mockup or web page. Clicking
on a control that has a web link will open a new browser window
when in Full Screen Presentation mode or in a PDF.
One more thing: you can use the left and right arrow keys on your
keyboard to go back and forth between the mockups you have
visited in your run-through.
3/3
Working with Skins (Sketch vs. Wireframe)
docs.balsamiq.com/mybalsamiq/skins
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 View menu, select the Skin from the dropdown, 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.
1/3
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.
2/3
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.
3/3
Presenting Your Work
docs.balsamiq.com/mybalsamiq/fullscreen
Mockups includes a “Full Screen Presentation” mode for those times when you need to present your wireframes
to other stakeholders.
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.
Mockups will expand to take up your whole screen (to eliminate distractions), and your mockup will be centered
on the screen.
You will also see three little buttons in the lower-right corner of your screen. They’ll fade out in a few seconds, but
you can always bring them back by mousing over the bottom-right corner of the screen.
The first toggle is for showing and hiding linking hints and the big pointers. You can
turn them off if you’re using the presentation mode to test a new UI on some user
and don’t want to give them hints on where to click, or simply if you find the big
pointer distracting.
The second toggle 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 third button lets you exit full-screen mode and edit the mockup you’re currently viewing.
To exit Full Screen Presentation mode, just hit the ESC key.
1/1
Using Assets in myBalsamiq
docs.balsamiq.com/mybalsamiq/assets
myBalsamiq sites provide an assets manager for Site Assets and Project Assets. You can use this as a place to
store re-usable images, Mockups, or other files you want to share with your team.
To access the Assets Manager, click the Assets link in the top right of the page. The screenshot below shows
what to look for.
1. Site Assets Site Assets are files which will be available for use across all of your projects. You can access the
Site Assets manager from the home page. If you access the Assets Manager from projects pages, you will see
both a Project Assets and Site Assets tab in the assets manager dialog.
2. Project Assets Project Assets are files which are available only to mockups within a single project. You can
access the Project Assets manager from the main Project page in grid, story, and map views, or from a single
Mockup view. When you open the Assets Manager from any of these views, you will notice that you will see that
project’s assets in the Project Assets tab, but can also see the site assets in the Site Assets tab.
The Assets Manager dialog is show below. This screenshot was opened from a project, so it is showing both Site
Assets and Project Assets.
Assets in the Mockups Editor

Using Assets: in the mockup editor you will find your images and symbols in the Project Assets and Site Assets
tabs of the UI Library. Just double-click or drag-and-drop your selected asset to the canvas to use it. Mockups
supports GIF, JPG/JPEG, and PNG image file formats.
1/2
Uploading Images: add an image control and double-click on it to open the image upload dialog.
Select the Project Asset or Site Asset tab depending on where you’d like the image to be saved, then click
Browse…, choose your image file and click Attach to upload the image to the server.
Symbols
For creating and editing Symbol libraries, please refer to the Using Symbols in myBalsamiq document.
2/2
Exporting to PDF or PNG in myBalsamiq
docs.balsamiq.com/mybalsamiq/exporting
Exporting to PDF
Unlike the Desktop version, exporting to PDF from myBalsamiq is done outside of the Editor.
To export to PDF in myBalsamiq, go to the Project page for the mockups you want to export and click the arrow
next to the Edit button as shown below.
You will see an option listed there to export to

PDF. When you select it you will be presented with
some options and when you click the “Export to
PDF” button the file will be created for you to
download.
Note: You can also export a project to PDF from

the context menu on the All Projects (a.k.a.
Home) page in myBalsamiq.
If you want to export a single mockup to PDF, you
can go to the Single Mockup page and print to
PDF from the browser print dialog (e.g., File >
Print).
Exporting to PNG Images

Unlike the Desktop version, exporting to a PNG image from myBalsamiq is done outside of the Editor.
To export to a PNG image in myBalsamiq, go to the Single Mockup page for the mockup you want to export and
click the link below the mockup labeled “Download Image” as shown below.
The image will then be downloaded to your computer or it will open in a new browser window for you to save by
right-clicking on it.
1/1
Site, Project and Mockup History in myBalsamiq
docs.balsamiq.com/mybalsamiq/history
The history functions allow you to view recent activity on the site, on a project, or on a mockup. You’ll notice below
the project or mockup name that there’s a single line of text showing you the last update and who made it. The
“View History…” text at the end of this line is a link to view the entire history of updates.
The type of events that will be recorded in the history are shown below.
Site History
New Project Created
Project Archived
Project Unarchived
Project Deleted
New User Added
New Mockup Added
Mockup Updated
Mockup Deleted
Mockup Restored
Project History
New User Added
New Mockups Added
Mockup Updated
Mockup Deleted
Mockup Restored
Mockup History
Mockup Updated
Mockup Deleted
Mockup Restored
Example History Page

The annotated screenshot below gives you an idea of what you can do on the pages.
1/2
2/2
Team Communication in myBalsamiq
docs.balsamiq.com/mybalsamiq/communication
myBalsamiq offers 3 different ways of communicating via the Project Team menu displayed within a project:
Skype Chat, Skype Voice Call, and Email.
Group Communication
Skype Chat
Launches Skype and starts a chat session with all project members. For Skype integration (chat and voice call),
users will have to add their Skype screen name to their user settings.
Skype Voice Call

Starts Skype video chat with your team (Skype multi-person conference works with up to 4 project members).
Map
Opens a world map view showing every project member, and whether or not they’re working (based on the
geographic location and working hours they specify in user settings).
For Map to work, users must enter their geographic location in the user settings page.
Email
Creates a new email message with your computer’s default mail application to the project email list. Every project
member will receive the message.
Communication with One Project Team Member

Hovering over a single user shows options for communicating with that one person directly via chat, voice, or
email.
1/1
myBalsamiq Prototype View
docs.balsamiq.com/mybalsamiq/prototypeview
The myBalsamiq Prototype View is one of the sharing options available for your project. To generate and access
the Prototype View for your project, click on the arrow in the upper right-hand corner of your Project Page.
After clicking the arrow, your browser will be sent to the Prototype View for your project. You’ll notice that the
address of the Prototype View contains your myBalsamiq URL and a long string of randomized characters. This
makes the URL extremely hard to guess - but once you share it, it will be accessible to anyone who knows it. The
only way to delete a URL is to archive or delete the project.
Using the Prototype Viewer

When you or one of your collaborators open the Prototype View, you will be presented with your project and an
interactive viewer.
At the bottom of the page is a toolbar that houses the controls for the viewer. On the left is the Mockup Navigator,
which allows you to switch between mockups manually. On the right is the options panel.
The Options Panel

Most of the time, the option panel will have 3 buttons:
1/2
Toggle Link Highlights: The left-most button in the options panel
allows you to show and hide linking highlights on your mockups.
Because the Prototype View is completely interactive, any links
that you have added to your mockups will work in this view as well.
Edit This Mockup: The middle button in the options panel allows
you to quickly jump into the myBalsamiq editor and edit the
current mockup. This option will only be available to members of
the project - the button is hidden for anyone who is not on the
project.
Hide the Toolbar: The right-most button allows you to hide the
toolbar completely, for distraction-free viewing and testing.
2/2
myBalsamiq Email Notifications
docs.balsamiq.com/mybalsamiq/notifications
myBalsamiq uses email notifications to keep team members updated on changes to a site. Only people that
belong to a project who have also confirmed their account after being added to a site will email get the
notification. Read on to learn more.
Users Decide When We Should Send an Email Notifications

Email notifications are an easy way to make sure your team stays up to date on the project’s progress.
In myBalsamiq, we decided to allow users to trigger email notifications as a side-effect of whatever action they
are performing, be it saving edits to a mockup, deleting a project, adding comments, etc
You will see little “notify members” checkboxes around the application. Other than for adding comments to a
mockup, the checkboxes will not be selected by default.
1/3
Each Project Has a Mailing List
Whenever you create a myBalsamiq project, a mailing list will be automatically created for it as well.
You can use this mailing list to email everyone

who’s on the project. In the future we will also
make it so that emailing the mailing list adds a
mockup or a comment automatically.
Site Owner Notifications

Site owners have the option option to be bcc:ed on all email notifications pertaining user invitations and project
creation, archival and deletions. That’s done in the Site Settings.
2/3
Problems Receiving Notifications?
Maybe the person you invited hasn’t confirmed their account? If they haven’t gotten an invitation by email, please
check the FAQ on troubleshooting email confirmation and notifications from myBalsamiq.
3/3
Sharing Your Work with outside Clients in myBalsamiq
docs.balsamiq.com/mybalsamiq/sharing
Since myBalsamiq is all about collaboration, we offer many ways for you to get feedback on your designs.
This document outlines a few different ways, so that you can pick the right one to fit each situation.
For sharing with colleagues: just have your site owner invite them as staff members. Once they’re set up as staff
members on your myBalsamiq site you can quickly add them to projects via the Project Members menu.
Make Them a Project Member

This is what we expect people will use the most.
Adding someone as a project member gives them the ability to comment on your mockups, get notified of
mockup changes and really follow and participate in the project’s progress (learn more).
Project members also have the ability to edit mockups, but don’t worry about losing anything accidentally, every
version is stored in the project history and can be recovered easily.
To add someone as a project member, just invite them via the Project Members menu.
1/4
Send Them a Prototype View Link
If you want to keep your project private but don’t want to force your customers to create a myBalsamiq login, and if
your mockups are linked together, you could use the Prototype View feature.
Just launch the prototype view, copy the long and

nearly-impossible-to-guess URL (it makes it secure)
and send it to them. They will be able to see it and
click around without having to log in.
Note: Once the URL is shared, it will be accessible

to whomever has it. The only way to deactivate the
link is to archive or delete the project.
Send Them Individual Mockup Image Permalinks

Similar to the approach above, you could simply send them single mockup images using the Image Permalink
feature.
This link doesn’t require people to log in (but is secure due to it’s crazy-long and hard to guess), and will always
return the latest version of a mockup’s image.
This makes it possible to share mockups that are not linked together or even to embed them in other tools that let
you insert images (a simple web page you’re putting together or even a usability testing tool).
Note: People you share this URL with will NOT be able to add comments within myBalsamiq this way, and once
the URL is shared, it will be accessible to whomever has it.
2/4
Make Your Project Public
If you are not concerned with keeping the work secret, this is a very quick way to allow external stakeholders to
review, comment or even edit your wireframes.
Just set the project’s access control slider to your

favorite level of public sharing (website, blog or wiki),
and send your clients a link to the project. If you set it
to blog or wiki, they will be able to comment without
creating a login.
Export the Project to PDF

Yet another option is to use the “Export to PDF”
feature (available from the Project Page) to export
the entire project as a PDF. Just format the PDF
the way you prefer, download it and send it to
them for review.
They will be able to click links and write

annotations to the PDF directly (if they know how
in their PDF reader).
Some tips about exporting to PDF:
To get consistently sized screens

Consider using a background control
(rectangle/container or browser) at the same dimensions on every page. Add it beneath all of the controls
in your Mockup and lock it for best results.
To export at actual size (100%) Select the “Optimize for Viewing” radio button in the Export dialog.
To get Acrobat Reader to show single page prototypes Select the menu: Edit -> Preferences; Select: Full
Screen -> Full Screen Navigation; Un-tick the “Left click to go forward one page…”
Print the Story View as PDF
If you are looking for a more traditional “spec”, what you could do is go to the project page, select the “Story” view
and print that page to PDF. It puts all the mockups and their notes one on top of the other in a nice spec-like
format.
3/4
Download the Project and Send Them the BMPR File
If your clients use one of our Mockups 3
product, you could download the whole project
as a BMPR file and email it to them. They will be
able to play around with the resulting BMPR file
in any Mockups 3 product (from version 3.5.7)
and above. Each product comes with a 30-days
free trial and if the trial expires, the product can
still be used to view the project.
We hope this document gave you some ideas

on how to share with others using myBalsamiq.
If you have any questions, let us know!
4/4
User Testing Your myBalsamiq Prototypes
docs.balsamiq.com/mybalsamiq/usertesting
The prototype view of myBalsamiq projects allows you to show your Mockup without all of the surrounding
interface of myBalsamiq.
If you’ve linked your Mockups together, this can be

useful as a click-through prototype, or even for
doing usability testing.
The prototype view follows a project’s permissions

settings, but allows you to share a private URL
using a private key. This is useful for testing with
remote usability testing services or for giving to
people who aren’t project members. If you set a project to Private, anonymous users will not have access to the
project’s prototype views or to browse its content, and subsequently will get an unauthorized error. However,
using the shareable link with the private key in the address makes the URL shareable using an address that is not
guessable.
Here are a couple of articles on how to integrate myBalsamiq’s prototype view with the leading user testing tools:
The same approach can be used with any user-testing tool that supports entering URLs in their tests. Just copy the
prototype view’s URL from your browser and paste it into the usability tool’s test settings form.
1/1
myBalsamiq User Settings
docs.balsamiq.com/mybalsamiq/usersettings
Users can access their user settings by clicking your username in the header bar at the top of the page.
The User Settings page allows individuals to do edit information about themselves. This information is used by
the system, as described below.
Your full name

Used to address you.
Your short name

Used to address you in the header and email notifications, and usually is your first name or nickname.
Email address
Used to send you email notifications and retrieve your login or password.
Username
Used to log in.
Skype username
Used so your project members can Skype chat with you.
Phone number
Used so your project members can voice call you with Skype.
Geographic location, timezone, working hours

Used so your project members can see where you are in the world in the staff and project members maps, and if
you are in working hours.
Photo
Used in the header, in the project members menu, the staff map and staff listing, and in project and mockup
history listings.
Password
Used to change your password.
1/1
myBalsamiq Site Settings
docs.balsamiq.com/mybalsamiq/sitesettings
Note: the actions described below are available to site owners only.
You can access your site settings by clicking the “Settings” link in the header at the top of the page.
The Site Settings page allows the site owner to change information about your company, add and manage staff,
manage your payments, and change some administrative settings. Settings for individual projects, such as who
can access a project, are available on the Project page.
Site Info
Basic Site Information is created at signup. The Site Info form allows you to change the site name or URL, upload a
logo to use in the header, and set design colors using our custom design form.
Staff Members
The Staff Members page is where you invite new staff members, and view them by geographic location using our
Staff Members map (once they’ve set their locale in their own user settings).
Beneath the staff member map, your internal staff mailing list is shown. Emails sent to this addresses will get
forwarded to all staff members listed here.
User Actions In the list of staff members, each person is shown with a link to access actions for that user. If the
user has set up contact information in their user settings, you can contact them from that action menu.
You can set staff members to be automatically added to new projects that are created on your site using the
action menu. You can also specify which projects they have access to by selecting “Manage Project Membership”
from the action menu.
Additionally, you can remove staff members from your site from the action menu.
Adding Staff Members At the bottom of the page, the “Add Staff Members” form lets you add people to your site,
so they can be added to projects.
Enter one email address per line to invite staff members.
You can also promote non-staff members that you’ve invited to projects to staff by simply using this form to invite
them to staff. Afterwards, they will show up as staff on the Staff page.
1/3
Invited staff members will appear on the right side of the Add Staff Members section, and you can click the blue
arrow icon to re-send the email invitation, or click the red X icon to remove their invitation.
Payment Info
Site owners and secondary billing administrators are able to sign up for plans that suit their company needs, and
upgrade or downgrade their plan at any time as their needs change. When upgrading or downgrading, sites will
automatically receive credit for any time remaining on the old plan level.
Please see the instructions for managing your myBalsamiq subscription for details.
Administration
Site owners have access to 4 administrative functions:
1. Subscribing to Get Additional Email Notifications

Admins may opt-in to see how many projects are getting created and everything else that’s going on in your site.
2. Changing the Site Owner

The site owner manages site settings, billing and plan information, invoices and site deletion, and has access to all
projects.
If you ever need to change the site owner, use the Change Site Owner form, by selecting a new user from the drop
down menu, and click the “Make this person the site owner” button.
3. Canceling Your Site

If you need to cancel and delete your site, the site owner can do so by clicking the “Delete my myBalsamiq site
now” button.
Once your site is deleted, we’ll stop charging you and prevent users from logging in to it.
If you want to keep your myBalsamiq site around until the end of your currently paid period, instead of deleting
your site you can select “Cancel Subscription” in your payment settings. Once your current paid period is over your
site will be suspended.
Be sure to download any projects you would like to keep before deleting your site or stopping your subscription.
Your site data is kept in our database for one month after deletion or suspension (you’d be surprised how many
times people change their mind and ask us to reinstate their deleted or suspended sites). We delete your data
permanently from our database following our Terms of Service. If you would like us to destroy your data
immediately, delete your site first, then email us and we’ll be happy to comply.
4. Designating a Secondary Billing Administrator

Site owners can designate another staff member as a “Secondary Billing Administrator.“ The secondary billing
administrator can access the Payment Info page of the Site Settings and manage all billing aspects of the
myBalsamiq site.
You can select any existing staff member from the drop down menu on the Payment Info page. The secondary
billing administrator can be removed or changed at any time by the site owner.
2/3
3/3

Mybalsamiq Docs MANUAL PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mybalsamiq Docs MANUAL PDF

Uploaded by

Copyright:

Available Formats

myBalsamiq Application Overview

A Note about Roles and Access

A few things to note:

Only site owners have access to Site Settings.

Anatomy of the Home Page

New Project Dialog

Renaming and Setting a Style

You will be asked to enter the name of the new project

Uploading and Downloading Projects

Download from Project Pages

Moving a project to the site archives removes it from

The archives are accessible via the “Archives” link in

Note: Contents cannot be recovered. So be sure you

For more information, view the Assets documentation.

The site history shows the following types of activity:

New Project Created

An individual project page holds all the Mockups for a project.

Anatomy of a Project Page

View full size image in a new window →

Changing Project Information

for italic, use _this notation_

Viewing Project History

The project history shows these kinds of activity:

New User Added

You can also upload an existing mockup from your

Adding and Managing Project Assets

For more information, view the Assets documentation.

Adding Project Team Members

1. Private (default) Only invited staff or project

2. Website Anyone may view project content (mockups

3. Blog Anyone may view project content and add

4. Wiki (use with caution) Anyone may view project

Please refer to the myBalsamiq Access Control Matrix

Edit Mockups The main Edit button opens

Clone Project Creates a copy of the project

Download BMPR Creates a BMPR file from

Note: The resulting BMPR file can be opened

Download Zip Saves a compressed BMMLs ZIP

Export to PDF Exports a PDF of the project. You

To export a project, select Export PDF… from

Change Owner Allows you to pass the

Archive Project Moves the project to the

Only the site owner and the project owner

Note: Contents cannot be recovered.

Uploading and Downloading Projects

When you download a project, you’ll have two options:

Download from Project Pages

The New Mockup button also provides a drop down menu

If you use the New Mockup button dropdown menu while

Mockup Description, Permalink, Download

for italic, use _this notation_

Navigating Mockups in the Project

1. Using the Previous/Next arrows If you’re viewing a

2. The Mockup Sidebar Icon Next to the Previous/Next

3. Using the Mockup Sidebar The Mockup Sidebar is a

The current Mockup is shown selected in blue. Each

You can add comments to Mockups, just as you would

Scroll to the bottom of a Mockup page, enter your

for italic, use _this notation_

Proposing Alternate Versions

After reviewing the alternate version proposal, users

Promote the proposal as the current Mockup by

The project history shows these kinds of activity: