managing projects in moc for desktop | balsamiq · if instead you'd like others to make...

Managing Projects in Mockups for Desktop

Mockups for Desktop does not currently natively provide a way to bundle multiple wireframestogether into projects.

This document shows you how to overcome this limitation by using some best practices andother standard software tools already at your disposal.

One Project = One Directory

A best practice to organize mockups is to create a folder/directory for each project, as shownin the screenshot below:

Within each project folder, we recommend storing all the BMML files together, like so:

Switching between projects

Even when your files are structured as we recommend, it can feel challenging to switch from

one project to another. There are a couple features we have implemented that make this

really easy. When you want to work on a new project, open up a single mockup from that new

project and right click on the file tab. (If you don't see the file tab, you may need to make

the File Browser

(http://support.balsamiq.com/customer/portal/articles/109151#filebrowser) visible from the

View menu.) Choose Close Other Mockups:

Then right click on the file name again and choose Open Others in Same Folder:

Now you will have all of the files from your new project open without any files from other

projects.

Ordering your files within Mockups

You may wish to rearrange the order of the File Browser(http://support.balsamiq.com/customer/portal/articles/109151#filebrowser) tabs (this canbe useful when exporting to PDF(http://support.balsamiq.com/customer/portal/articles/111730#exportpdf), for example).You can do this by dragging them left or right with your mouse (or up or down if the filebrowser is set to the left or right). Mockups will remember the order of your tabs in aparticular folder, even if you close them and reopen them.

The Project Assets folder

We also recommend creating a subfolder called "assets", in which to store images that areused across your mockups. (Mockups supports GIF, JPG/JPEG, and PNG image file formats.)

You may also use this subfolder to store PDFs, PSDs and any other files related to the project.

Mockups for Desktop is designed to work with the best practices outlined above. Forinstance, the software will list all the images it finds in the assets subfolder in the ImageProperty Inspector pulldown menu automatically.

Mockups for Desktop also gives you an option to automatically copy images you bring infrom other sources into the assets subfolder for you:

If you want to use the same image(s) in multiple projects, see Using Symbols, Images andIcons across Projects (http://support.balsamiq.com/customer/portal/articles/1634821).

Sharing your Projects

When it comes to sharing your projects, the first question to ask yourself is: do they need tomake changes to my wireframes, or just review them and comment? If the answer is thelatter, perhaps exporting the project as a linked PDF is the best option. See this FAQ for otherinfo about how to create a "Mockup Viewer"(http://support.balsamiq.com/customer/portal/articles/98989).

If instead you'd like others to make changes to your wireframes, using the best practicesoutlined above will make it very easy.

To share a whole project, simply select the project folder and create a ZIP archive of it, using

your archiving tool of choice (both Windows and OS X come with pre‑built compression tools,

in the right‑click menu):

Once you have a zip ready, you can send it to other stakeholders by emailing it to them or

save it on a shared disk, or using a file‑sharing tool like DropBox (http://www.dropbox.com).

When your collaborators receive the project, they can just unzip the .zip file you sent them

and get to work.

More ways to collaborate

The easiest way to collaborate on wireframe projects is to use our web‑based version ofMockups, called myBalsamiq (http://www.balsamiq.com/products/mockups/mybalsamiq).We offer discounts for customers who use both products (even if they are purchased atdifferent times). Read more about using myBalsamiq and Mockups for Desktop together(http://support.balsamiq.com/customer/portal/articles/232919).

Another option is to look at our Plugin Versions of Balsamiq Mockups(http://www.balsamiq.com/products/mockups/plugins). They all provide easy ways to shareand collaborate by storing your wireframes in the cloud. We offer discounts to customers whouse both a plugin version and Balsamiq Mockups for Desktop(http://support.balsamiq.com/customer/portal/articles/131246), no matter which productyou purchase first.

Mockups Application Overview

Balsamiq Mockups is made up of four major blocks. From top to bottom: the application bar,the UI library, the mockup canvas and the file browser. Each is described below.

For documentation on the UI elements that are unique to myBalsamiq, check outthe myBalsamiq editor documentation(http://support.balsamiq.com/customer/portal/articles/1366973) first.

The Application Bar

The application bar includes menus, the Quick Add tool and the toolbar. Each is describedbelow.

The Menus

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

you simply type a few letters from the name of the UI control you wish to add and Quick Add

will show you a list of suggestions. Use your mouse or arrow keys to scroll down the list to

the UI control you wish to add, hit the ENTER key and voila', a new control is placed on the

mockup canvas for you. For instance, typing "bu" shows a list containing "Button", "Button

Bar", "Help Button", "Radio Button" and "Round Button". Typing "hel", on the other hand, only

returns "Help Button". Pressing the ESCape key makes the list disappear, as one would

expect.

Try out Quick Add now! As you become familiar with it, you could even hide the UI Library

(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

(http://support.balsamiq.com/customer/portal/articles/110114) 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.

You can view a list and screenshots of all of the components

(https://support.mybalsamiq.com/projects/uilibrary/story) that ships with Mockups.

The Mockup Canvas

This is the main working area of Balsamiq Mockups, where your UI mockup comes to life.

Once you add UI controls to it, you can move them, resize them and tweak them to your

heart's content until your UI mockup is ready. See the sections below for instructions.

The mockup canvas grows and shrinks with your browser or application window, so you canmake room for bigger mockups if you need to.

File Browser

By default, the Mockups file browser appears at the bottom of the application window, belowthe canvas. This bar displays the Mockups files you have open as a series of tabs, and thecurrent Mockup in use is highlighted.

You can also show the file browser on the left or right of the canvas (in the menu, go to View> File Browser Position).

To hide the file browser completely, uncheck "Show File Browser" in the View menu or pressCTRL/CMD+J to toggle its visibility.

When the file browser is shown, you can reorder the tabs by dragging them left or right (orup or down if the file browser is set to the left or right) with your mouse (this can be usefulwhen exporting to PDF(http://support.balsamiq.com/customer/portal/articles/111730#exportpdf), for example).Mockups will remember the order of your tabs in a particular folder, even if you close themand reopen them.

When the tabs for the number of open Mockups cannot be displayed in the space available inthe file browsing area, a pop‑up menu is displayed to navigate the files.

Context Menu

A context menu is also available for the files that are open in the file browser. Right‑click thefile to view available actions:

Rename Mockup

The rename feature will help those of you who use the linking feature(http://support.balsamiq.com/customer/portal/articles/111742‑linking‑mockups‑together) extensively.

Just right‑click on a file tab at the bottom of Mockups for Desktop and select "RenameMockup...": the app will go through all the BMMLs contained in the same folder as the oneyou're renaming and look for links pointing to the current mockup. If it finds any, it will showyou this:

Pick a new name, hit Rename and voilà, Mockups will rename your file and update all thelinks in all the other mockup files for you! This should save you a few hours here andthere... ;)

Working with UI ControlsAdding UI Controls

To add new UI controls to your mockup, you can use the UI Library(http://support.balsamiq.com/customer/portal/articles/109151#uilibrary) or the Quick Addtool (http://support.balsamiq.com/customer/portal/articles/109151#quickadd).

Another way to add a new UI control is to duplicate the selected controls. You can either usecopy and paste to do so, or the duplicate menu command, shortcut (CTRL/CMD + D), orbutton, or simply hold down the ALT key (OPTION key on a Mac) and drag the selection. Thiswill duplicate it in place and let you move it all at once.

Note: Full list of keyboard shortcuts here(http://support.balsamiq.com/customer/portal/articles/110445).

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 itDragging a rectangle which encloses many UI controls selects themSHIFT+CLICK on a control adds it to the selectionCTRL+CLICK on a selected control removes it from the selectionHold ALT to ignore items behind the mouse and drag‑select, as shown in this short video(http://www.youtube.com/watch?v=JOpaRBbwqNg)

To select a control that is behind another control, right‑click on the top control to bring up amenu 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 onthe canvas.

You can drag it with your mouse (hold down the SHIFT key to maintain the originalhorizontal or vertical position)You can "nudge it" one pixel at a time with your keyboard's UP/DOWN/LEFT/RIGHT keysYou can move it with bigger steps by holding down SHIFT and using your keyboard'sUP/DOWN/LEFT/RIGHT keysYou can move your controls to be aligned in one direction by using the align tools foundin the Property Inspector (http://support.balsamiq.com/customer/portal/articles/110114)

Snapping and Smart Guides

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

If you ever want to temporarily disable this feature, you can hold down the CTRL key (CMDkey on Mac) while moving or resizing, and snapping will be turned off. If you want to turnthis feature off entirely, you can do so by altering your config file settings(http://support.balsamiq.com/customer/portal/articles/111759).

Resizing UI Controls

Resizing the selected controls is easy. You can just grab any edge or corner of the selectionrectangle and drag it.

If you want to constrain proportions while dragging from a corner, hold the SHIFT key whiledragging.

You can also use the keyboard to resize selected controls. CTRL+ALT+arrow keys to resize in2px increments, CTRL+ALT+SHIFT+arrow keys for 20px increments.

Another way to resize some controls to their "natural size" is to use the Auto‑Size functionfound in the Property Inspector(http://support.balsamiq.com/customer/portal/articles/110114).

Layering UI Controls

You can layer controls as if they were pieces of paper on the mockup canvas. To do so, youselect the controls you want to layer and select one of four layering commands available viathe Property Inspector (http://support.balsamiq.com/customer/portal/articles/110114):bring to front, send to back, bring forward and send backward.

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 toolbar or select "delete" from theEdit menu.

Grouping UI Controls

Sometimes you might wish to group some controls to better align them or to move them allat once. To group a set of controls, select them and hit CTRL+G on your keyboard or use theGroup command in the menu or Property Inspector. Once grouped, the controls will behaveas one when moving or aligning. To ungroup controls, press CTRL+SHIFT+G on yourkeyboard or use the Ungroup command in the menu or Property Inspector. Groups can benested.

You can double‑click on a group to "enter it" and edit its contents. Here's a video thatexplains how to use the feature:

You can optionally give a group a name via the group's property inspector. This can behelpful when you have a lot of groups and need to "know where you are" when you edit theircontents. Naming and grouping controls is also the first step to creating Symbols(http://support.balsamiq.com/customer/portal/articles/110439).

Cropping Groups

It is possible to crop (mask) groups to only show a selected portion of them.

The video below illustrates how to use this powerful feature:

Wait, no rotation?

Coming from generic drawing tools, the lack of a rotation feature in Mockups might besurprising.

This limitation is intentional, and not due to programming complexity (it's not hard to addtechnically). 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 willlikely result in wireframes that are very hard if not impossible to implement by thedevelopment team.

We do support rotation in images and a few controls, where it makes sense. Some controlscan be rotated in 90‑degree steps (icons, the triangle geometric shape, for example) and thelabel control has a few rotation options(https://support.mybalsamiq.com/projects/uilibrary/Label%2C+String+of+Text) in itsproperty inspector.

If you feel that you need to rotate any other control, let us know on this forum thread(http://community.balsamiq.com/balsamiq/topics/let_us_rotate_please) and we'll discusswhether to add it together.

Also remember that you can always use the image import feature(http://support.balsamiq.com/customer/portal/articles/110401) as a workaround.

The Property InspectorThe Property Inspector (also called the toolbox, palette, property dialog, properties window,toolbar, floating window, floating tool bar, properties box and control dialog) is the littlefloating rectangle that appears once you select one or more UI controls. It allows you toperform some common functions such as copying/pasting, layering, and aligning controls, aswell as some control‑specific customizations.

The Property Inspector is displayed when you select an object on the canvas. You can dragand drop the Property Inspector to move it, it will re‑appear where you left it next time youneed it. You can also make it smaller (so that only the title bar shows) by clicking the collapseicon in the upper‑left corner.

If your UI Library is visible, you can set the inspector to be docked over it. The View menushows this option.

Common Inspectors

Editing Inspector Always present, always at the top. From left

to right: undo, redo, duplicate, cut, copy,

paste, delete, group, ungroup, lock

Layering and Position & Size Always present, always in the second row

(below the editing inspector).

Layering, 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.

Align Shown whenever more than one control isselected. Lets you align the selectedelements horizontally to the left, center andright and vertically to the top, middle andbottom. The next two icons distribute thecenters of the selected items horizontally orvertically. The last two icons space out theselected items evenly horizontally orvertically.

Working with TextMany 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 ESCape 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 formattingText style

You can use the following notation to format only certain parts of your control's text.

for italic, use _this notation_

for a link, use [this notation]

for bold, use *this notation*

for disabled, use ‑this notation‑

for underlined, use &this notation&

for strikethrough, use ~this notation~

for color, use {color:#FF0000}this notation{color}.

for font size, use {size:16}this notation{size}

Notes:

1. The #FF0000 above is the color in HEX form, just like HTML. The macro will work with or

without the # 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.

All of the above syntax works around words separated by white spaces, and underline will

work within words.

Here's a screenshot of what the above text looks like in a Paragraph control, for instance:

The shortcuts will work almost everywhere where it makes sense, and you can combine them,

so to make an italic link use [_this_] or _[this]_.

Some controls like Paragraph or Label allow you to "unbold" the text via the Property

Inspector panel. If you do so, the words you *bolded* will stay bold. A few controls use bold

text by default, so bolding text within those controls won't make a difference.

If you want to show these special formatting characters as actual text, you can escape the *,

_, ‑, [ and ] characters with \*, \_, \‑, \[ and \], so if you want to write "this [is] some text"

and don't want the "is" to become a link, just type "this \[is\] some text".

Line breaks

Most controls allow you to insert a line break to wrap text from one line to the next. You cando this by writing \r in front of the text you want to start on a new line. See the examplebelow 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 hyphenor 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 textinto actual links using markdown syntax(http://daringfireball.net/projects/markdown/syntax).

To do this, add the link destination in parentheses immediately after the link text. Thelink destination can be a URL or the name of another mockup in the same folder. All thefollowing formats are valid.

Web addresses:

[Balsamiq Website](balsamiq.com)[Balsamiq Website](www.balsamiq.com)[Balsamiq Website](http://www.balsamiq.com)[Balsamiq Website](http://balsamiq.com)

Mockups in the same folder:

[Features Page](features)[Features Page](features.bmml)

Adding links in this way will cause them to show up in the Property Inspector as well, asshown below.

This text

results in

You can link specific strings of text as well as the whole control.

Note: If the whole control is linked, text links will be disabled. If the whole control issubsequently unlinked, the previous text links will return.

More macroslorem

Type lorem in a Paragraph or Text Area to use our Lorem Ipsum(http://www.lipsum.com/) generator.

{mockup-path}

Type {mockup‑path} (all lower‑case) in a Label or Paragraph control to show the full path ofthe current mockup.

{mockup-name}

Type {mockup‑name} (all lower‑case) in a Label or Paragraph control to show the currentmockup name.

Working with Data Grids / Tables

The Data Grid control functions like many other text‑based controls(http://support.balsamiq.com/customer/portal/articles/110121). It uses commas as columnseparators and new lines as rows. A basic table with three columns and two rows would looklike this:

First Name, Last Name, Email Address firstname, lastname, [email protected]

You can choose whether to show the first row as a header row in the Property Inspector(http://support.balsamiq.com/customer/portal/articles/110114), as well as specifying therow height, row colors, and grid lines.

Column Width Options

Mockups lets you specify individual width and alignment options for each Data Grid column.

Here are the details for creating column widths:

You have to add a special line of text as the last line of text in your table, and it has to bewrapped by { } curly bracketsFor each column, use 0 if you want the column to be as small as possible to fit the text inthat column, or a numberNumbers specify the relative size of columns, so {2,1} means "make the first column twiceas big as the second one in this two‑columngrid. 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, as seen in the next exampleIf 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 possibleand always align it to the right, the second twice as big as the third and always align itleft, and use the Data Grid's alignment (from the property inspector) to decide how toalign the 3rd column".

Using Icons and Selection Controls in a Data Grid

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

Ascending: ^

Descending: v

Data Grids support a single checkbox or radio button in a table cell using the following text:

Checkbox: [] or [ ]

Selected checkbox: [x] or [v] or [o] or [*] or [X] or [V] or [O]

Indeterminate checkbox: [‑]

Radio button: () or ( )

Selected radio button: (x) or (v) or (o) or (*) or (X) or (V) or (O)

Indeterminate radio button: (‑)

Creating Line Returns in a Data Grid

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

create a line return.

The code example below would print on two lines.

Name\r(job title)

Pasting Data from Excel

Some people like to prepare tables in a spreadsheet application like Excel. You can copy and

paste a range of cells directly from Excel into the Data Grid/Table component. Just

copy/paste and it will just work. It also works in the opposite direction from Mockups to

Excel.

Note: If you have commas in your cells, you will have to escape them with a backslash like

this:

1\,000\,000

The component recognizes both commas and tabs as delimiters. Any thing else should be

populated into cells.

Working with IconsBalsamiq Mockups comes packed with over 220 hand‑drawn icons for you to use.

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

(http://support.balsamiq.com/customer/portal/articles/109151#quickadd): 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.

Once you have selected an icon, you can resize it, rotate it or remove it via the Property

Inspector.

Adding your own custom icons

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

If you want to share icons between your projects, learn how to do that here

(http://support.balsamiq.com/customer/portal/articles/1634821).

Adding via Icons dialog

There are two ways to add custom icons to Balsamiq Mockups. The easiest way is via the Icon

Library. If you're working on a saved file, you'll see a Project Assets category as shown below.

Just select Project Assets, then click the little plus button, select an image file and, voila', your

image will be resized down to fit an existing icon size and copied to the project assets folder

for you.

Adding to assets folder on file system

The second way is to place icon files manually inside your project assets

(http://support.balsamiq.com/customer/portal/articles/117761#projectassets) folders. Just

add the "icon_" prefix to each file name and they'll show up in the icon library.

The words you use in your filename after icon_ are used as the searchable keywords in the

icon dialog. So the keyword would be "airplane" for the filename icon_airplane.png. You can

string together a few labels to get synonyms for the icon, e.g. if the file is named icon_bag

briefcase portfolio.png, all of those words after icon_ will be searchable.

Here's an example showing how we added custom icons to a Mac by downloading the

free 32x32px Doodlekit icons (http://doodlekit.imagiag.com/), ran them through the

free NameChanger app (http://www.mrrsoftware.com/MRRSoftware/NameChanger.html) to

prepend files with icon_, and moved them to the ~/Documents/Balsamiq Mockups/assets

folder. They now appear in the icon dialog like this:

Using an existing set of custom icons

There are a few icon sets that complement the rough, thick style of Mockups. This blog entry

at tipsblogger (http://www.tipsblogger.com/2009/11/30‑awesome‑hand‑drawnsketch‑

icon‑sets/) lists some more hand drawn icon sets that might be useful for this feature.

Some icon designers have even started creating icon packs that are compatible with our

naming scheme. Here's a list of the ones we know about

(http://support.balsamiq.com/customer/portal/articles/135659#icons).

To use those icon packs, just unzip the icon images in your Project Assets folder. If you are

using myBalsamiq, upload the icon files via the Assets dialog there.

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.

ColorMockups 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 AreasMockups colorizes the entire opaque area of the icon.For best results, we recommend knocking out "white" areas of your icon usingtransparency. Transparent PNG works best.

The example below shows regular icons in the left column, a custom icon properly preparedwith black fills in the middle column, and a custom icon that doesn't work as well in the rightcolumn. To fix the icon in the right column, the exclamation point should be madetransparent, and the icon color should be black.

Working with ImagesTo 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 used in your mockup or images that have been imported to your Project

Assets (http://support.balsamiq.com/customer/portal/articles/117761#projectassets) folder.

The Project Assets panel shows all images in your assets folder. If you use web images or

images using relative paths that are not project assets, those will show in the Other 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.

If you are working on a saved file, you can also just drag an image from your computer to theMockups canvas.

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 drawingversion, 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 ofthe image drop‑down (the square with an 'x' inside it).

If you want to re‑use images in multiple Mockups, you can import images of custom icons orcustom control types using Symbols(http://support.balsamiq.com/customer/portal/articles/110439‑working‑with‑symbols).

Aside from the Image control, you can also embed images in the Cover Flow component.

Cropping Images

You can also crop (mask) images to only show a selected portion of them.

The video below illustrates how to use this powerful feature:

Note: see this article (http://support.balsamiq.com/customer/portal/articles/1430586) for ademonstration of this process in a newer version of Mockups.

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.

Working with 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.

Making Items Markup and Non-Markup

Sometimes you will want Markup items to be treated as non‑markup or vice‑versa. Forexample, you could use the iPhone control as a guide for designing a mobile screen, but youmight 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 bevisible 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. Ifyou 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.

The video below demonstrates this process:

Exporting Markup to PNG and PDF

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

Working with SymbolsBalsamiq Mockups for Desktop, myBalsamiq, and Mockups for Google Drive support the

concept of Symbols. Other software often refers to this same feature as templates, master

pages, custom components, or widgets.

In essence, Symbols let you create reusable common elements across different mockups.

Creating Symbols

Symbols in Mockups are simply named groups which have been "converted" to symbols (we’ll

talk more about what goes on under the hood later), but first, let’s create a symbol!

You may create a new group to convert to a symbol or use a group you already have. The

following steps assume you are creating a new group.

1. Select the controls you want to group

2. Group your selection (select Edit >Group 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.

Note: for a more detailed description of this process, see our visual step‑by‑step guide: How

to Create a Symbol (http://support.balsamiq.com/customer/portal/articles/1306464).

Under the Hood

When you hit "Convert to Symbol", Mockups for Desktop added the named group you

selected to a file called symbols.bmml in a folder called "assets" right next to your bmml

files. You might want to refer to our best practices for creating projects with Mockups

(http://support.balsamiq.com/customer/portal/articles/117761) if you haven't read it yet.

The key to understanding Symbols in Mockups is that Symbols are named groups

contained inside BMML files that are stored in your projects' assets folder.

We know the definition above is pretty dense, but understanding it fully will help you make

the most out of this awesomely powerful feature. Don't worry if it doesn't make complete

sense to you right now, we'll come back to it. Just read it one more time and move on. :)

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.

All your website pages will have the same font size and position for the title, but the title'stext should be different on each page. Same goes for which page should be shown as currentin your navigation bar.

Symbols allow you to achieve this result by letting you override symbol properties each timeyou use a symbol. To do so, start by double‑clicking (or hitting ENTER, or F2) on a symbol to"enter it".

Although this experience is very similar to editing a group's contents, you will notice thatMockups for Desktop warns you that what you're doing is really overriding some propertiesof a Symbol.

At this point, you can manipulate each control inside the symbols at will, as if you wereediting a group. Some operations are not permitted while overriding symbol properties, suchas adding, deleting or grouping controls.

If you make a mistake, you can always undo to get back. If you want to remove a singleproperty change and go back to a Symbol's default property, you can click on the little green"x" icon in the Property Inspector.

You can also revert all changes you made to a Symbol's instance at once, via the "x" icon inthe 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 itin one place and it will be propagated to all the instances (uses) of that Symbol.

To edit a Symbol's source, you simply open the BMML file that contains the symbol and edit itnormally, just as you would edit a group. Save your changes, go back to a mockup that usesthat 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 toedit it:

You can select a Symbol instance and hit the "Edit Source" button in the propertyinspector.

You can enter a Symbol for overriding, then hit the "Edit" button there.

Two Methods for Creating Symbol Libraries

There are two ways to create a symbol library if you're not using the Convert to Symbolfeature. Below is a bulleted list showing the two methods. You can read on to the nextsection for illustrated step‑by‑step instructions.

Note: If you are saving Symbol Library BMML files directly into a project assets directory, itsSymbols will only appear in the Project Assets tab when you're working on a saved file in thatproject folder.

Method One: Multiple symbols in a single symbols library file

1. Create a new mockup and save it to a project assets(http://support.balsamiq.com/customer/portal/articles/117761#projectassets) folder. Forinstance, to create an icon library, create assets/icons.bmml.

2. Add your component(s) onto the canvas, then select the ones you want to turn into asymbol and press CTRL/CMD+G or use the menu Edit > Group.

3. With the group selected, the Property Inspector will show a name input. Enter the name forthis symbol.

4. Repeat steps 2‑3 to create more symbols.

Now your symbols will appear in the Project Assets library tab whenever you're working on amockup. Mockups must be saved at least once for these tabs to appear in the library. Checkout the illustrated step‑by‑step instructions below for more info.

Method Two: One symbol per asset file

1. Create a new mockup and save it to a project assets(http://support.balsamiq.com/customer/portal/articles/117761#projectassets) folder. Forinstance, to create an arrow icon symbol, create assets/arrow.bmml.

2. Add your component(s) onto the canvas and save.

Note that the second method doesn't require you to group or name your controls. They willinherit the name of the file as the symbol name. As in method one, your symbol will appear inthe Project Assets library tab whenever you're working on a mockup. Check out the illustratedstep‑by‑step instructions below for more info on creating symbols using this method.

Symbol Libraries

A Symbol Library is a collection of symbol definitions. You might want to create a SymbolLibrary in order to share common controls with your team, or share them with the communityvia Mockups To Go (https://mockupstogo.mybalsamiq.com/).

To create a Symbol Library, all you have to do is to create a bmml file, create some groups(one per symbol) and give each group a name.

Whenever someone saves your BMML in an asset folder(http://support.balsamiq.com/customer/portal/articles/117761), they'll be able to use thegroups contained in it as Symbols in any mockup of that project.

One more thing...Using Whole Mockups As Symbols

There's a little secret we haven't shared with you yet. Remember how Symbols in Mockups aresimply named groups contained inside BMML files that are saved in a project's asset folder?

Well, it turns out that's not entirely true. There's one more way to create a Symbol inMockups: just create a mockup with NO GROUPS in it and save it in an assets folder.

Mockups will detect this, and treat THE WHOLE MOCKUP as a symbol, named after themockup's file name. You can tell by the green background color that Mockups recognizes itin an assets folder and will treat it as a symbol.

With this in mind, the full definition of symbols becomes as follows:

Symbols in Mockups are either named groups contained inside BMML files that are saved in a

project's asset folder, or BMML files with no groups in them, saved in a project's asset folder.

Using Symbols Across Projects

If you want to use the same Symbol in multiple projects, simply copy the file from the assets

folder in one project to the assets folder in another project. For more information, see Using

Symbols, Images and Icons across Projects


Deleting Symbols

How you delete symbols depends on how they were created. Let's review how symbols are

created.

Symbols created by right clicking and selecting "Convert to symbol" are saved into the

project symbol library.

Symbols can be created by explicitly saving a .bmml file into a project or account assets

folder.

The current release of symbols is powerful, but a lot of this management of symbols is amanual process, and is a little hard right now, but we hope to improve it with eachsubsequent release.

Deleting symbols saved to symbols.bmml

If you've created symbols using the "Convert to Symbol" method, your symbols are in thesymbols.bmml file.

The easiest way to delete these is to open a file in your project and click the project assetstab in the library. When you hover over symbols you'll know if they're in the symbols.bmmllibrary if they read, for example, "My Menu (from symbols.bmml)".Now click the symbol in the library that you want to delete, right‑click and select "EditSymbol Source." This will open the symbol in the symbols.bmml file. The background willbe green and your symbol will be visible.Select your symbol group, and delete it by pressing the delete key or the menu Edit >Delete.Save the file.

Now the symbol is gone, but you will also have "Symbol not Found" instances wherever youplaced the symbol. You'll need to remove those as well.

Deleting individual symbol files

A less common method of creating symbols is to save .bmml files to an assets folder. You'llknow when a symbol is a unique file when you hover over the symbol in the library. It willread, for example, "My Awesome Menu (from My Awesome Menu.bmml)".

The easiest way to get rid of these is to open the asset folder the symbol is saved to, andthen delete the file.

Now the symbol is gone, but you will also have "Symbol not Found" instances wherever youplaced the symbol. You'll need to remove those as well.

Next Steps and Feedback

At the moment, Symbols only work in Mockups for Desktop, myBalsamiq and Mockups forGoogle Drive and you cannot nest symbols inside of other symbols. If those features areimportant to you, let us know!

Got any questions about Symbols or any feedback on this document? Post them here!

(http://community.balsamiq.com)

Working with Site MapsYou 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 onlyone of these can exist because it only makes a single tree. If you want to make multipletrees, 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\rUsYou can't resize Site Maps, but if you are unable to view the entire map on your canvashere is a suggestion for how you can show the entire map by showing one of the nodesexpanded in a separate Site Map.

Keyboard ShortcutsBelow is a list of all the keyboard shortcuts and modifiers which you can use in Balsamiq Mockups. Whileall of the shortcuts will work in the Desktop version, some might not work when you edit mockups in abrowser.

If you are running OS X, you can also use the Command Key (the CMD/Apple Key) wherever you read CTRLin the list below.

Shortcuts below apply to Mockups for Desktop Version 2.2.4 and higher. Choose one of the links to theright to download a cheat sheet.

Working with Controls

Selection

Edit the selected control's text or

Add to selection +CLICK

Toggle selection +CLICK

Select All +

Deselect All + +

Size / Position

Resize maintaining aspect ratio Hold

Disable snapping during move or resize Hold

Increase font or icon size +

Decrease font or icon size +

Nudge selection 1px

Nudge selection 20px +

ENTER F2

SHIFT

CTRL

CTRL A

CTRL SHIFT A

SHIFT

CTRL

CTRL ]

CTRL [

↑ ↓ ← →

SHIFT ↑ ↓ ← →

Nudge‑Resize selection 2px + +

Nudge‑Resize selection 20px + + +

Pan the canvas (Hand tool) +Click and

Drag

Bring to front + +

Send to back + +

Bring forward +

Send backward +

Clone selection +drag

Edit/History

Undo last command +

Redo last command + or +

+

Cut the selected controls + or +

Copy the selected controls + or +

Paste + or +

Paste In Place + +

Delete the selected controls or

CTRL ALT ↑ ↓ ←

→

CTRL ALT SHIFT

↑ ↓ ← →

SPACE BAR

CTRL SHIFT ↑

CTRL SHIFT ↓

CTRL ↑

CTRL ↓

ALT

CTRL Z

CTRL Y CTRL

SHIFT Z

CTRL X SHIFT

DELETE

CTRL C CTRL

INSERT

CTRL V SHIFT

INSERT

CTRL SHIFT V

DELETE BACKSPACE

Duplicate the selected controls +

Lock the selected controls +

Unlock all locked controls +

Group

Group the selected controls +

Ungroup the selected groups + +

Align

Align selected controls left + +

Align selected controls center + +

Align selected controls right + +

Align selected controls top + +

Align selected controls middle + +

Align selected controls bottom + +

Working with Icons

Navigating the Suggestion List

Using the selected icon

Closing the Icons Library

Closing the Suggestion List

Working with Text

Start Editing text of the selected control

CTRL D

CTRL 2

CTRL 3

CTRL G

CTRL SHIFT G

CTRL ALT 1

CTRL ALT 2

CTRL ALT 3

CTRL ALT 4

CTRL ALT 5

CTRL ALT 6

↑ ↓ ← →

ENTER

ESC

ESC

or

Committing the current text (single‑linecontrols), +

(multi‑linecontrols) or clickanywhere

Ignoring the current edit

Grow/Increase Text Size +

Shrink/Decrease Text Size +

Text Formatting

italic _text in underscores_

link [text in brackets]

link with a target(http://support.balsamiq.com/customer/portal/articles/110121#linking)

[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(http://support.balsamiq.com/customer/portal/articles/110121#textstyle))

{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

ENTER F2

ENTER

CTRL

ENTER

ESC

CTRL ]

CTRL [

Paragraph or Text Area.

Try l0rem for a variation.

Show the full path of the current mockup type {mockup‑path} in a

Label or Paragraph

control

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

Sending focus back to the Canvas

Working with Mockup Files

New Blank Mockup +

New Clone of Current Mockup + +

Open a mockup file +

Save the current mockup file +

Save as... + +

Close current mockup +

Close all mockups + +

Export this mockup's XML +

/

+

↑ ↓ ← →

ESC

ESC

CTRL N

CTRL SHIFT N

CTRL O

CTRL S

CTRL SHIFT S

CTRL W

CTRL SHIFT W

CTRL E

Import mockup + +

Export Snapshot to Clipboard + +

Export Snapshot to PNG +

Export All Snapshots to PNG + +

Print mockup +

Quit Balsamiq Mockups +

Looping through the open files in Mockups for Desktop + and

+ +

Views

Hide/Show the UI Library +

Enter Full Screen View +

Exit Full Screen View

Show/Hide Markup +

Zoom In + (plus sign) or

+mouse scroll up

Zoom Out + (minus sign)

or +mouse scroll

down

Zoom to Actual Size +

Zoom to Fit +

CTRL SHIFT E

CTRL SHIFT C

CTRL R

CTRL SHIFT R

CTRL P

CTRL Q

CTRL TAB CTRL

SHIFT TAB

CTRL L

CTRL F

ESC

CTRL K

CTRL +

CTRL

CTRL -

CTRL

CTRL 1

CTRL 0

Importing and ExportingExporting and Importing via XML

Balsamiq Mockups gives you the ability to export your mockup as an XML (text) file, which isuseful for creating copies of your mockup, emailing the mockup to someone else, or evenimporting it to another product or format (you can find some examples on our Extensions(http://support.balsamiq.com/customer/portal/articles/135659#otherproducts) page).

Exporting a mockup is easy, just select "Export Mockup XML" from the File menu (shortcut:CTRL/CMD+E), and you'll see this message:

Once you have the XML, you can use it to create a new mockup by importing it via the "ImportMockup XML..." dialog in the File menu (shortcut: SHIFT+CTRL/CMD+E).

This XML is the same across all versions of our products and can also be imported

to myBalsamiq (http://www.balsamiq.com/products/mockups/mybalsamiq) or our plugin

products.

Exporting to an image

If you want to get an image of your mockup, you can select File > Export to PNG Image from

the menu or use CTRL/CMD+R to export a single image in PNG format.

If you have multiple mockups open, you can export them all to PNG images at once using the

File > Export All Mockups to PNG... menu command or SHIFT+CTRL/CMD+R.

You can export a subset of the controls in your mockup by selecting them on the canvas and

using the Export to PNG Image command. The export dialog will ask you if you want to

export only the selected controls or the entire mockup.

After exporting, a notification window will appear to show you where your PNG images were

saved. Click the notification to open the containing folder.

Exporting to PDF

Mockups allows you to export open files to PDF, which can be useful for sharing singlemockups or decks of mockups for a project. If your mockups contain links, these will work inyour exported PDF as well, which will allow you to create click‑through prototypes of yourdesigns. (To learn more about linking, see Linking Mockups Together(http://support.balsamiq.com/customer/portal/articles/111742).)

Note: To export to PDF in myBalsamiq, see Managing Projects(http://support.balsamiq.com/customer/portal/articles/112399#managingproject) in themyBalsamiq Documentation.

To export, open the files you want to export and select the File > Export All Mockups toPDF... menu command. Each individual mockup will be displayed on a separate page of a PDFdocument. The mockups will be in the same order as the tabs in the editor, so arrange themin the order you'd like before exporting.

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

Note about Adobe Acrobat Fullscreen Mode and links:If you're using fullscreen mode in Adobe Acrobat with a mockup that has links, you may haveto change some preferences to get links to function properly. If links aren't working for you,try following these steps:

1. Select the menu: Edit > Preferences2. Select: Full Screen > Full Screen Navigation3. Uncheck the "Left click to go forward one page..." option

Printing

To print, go to File > Print or use the keyboard shortcut CTRL+P (CMD+P on the Mac).

Note: Mockups automatically sets a top and left margin on your printed documents using analgorithm based on the dimensions of your mockup, but you may want to set a marginmanually. When you're presented with the page setup dialog above, you may set a margin forthe printer of your choice if the printer driver on your operating system allows you to.

More Import/Export Options

If you're looking for import/export instructions for our plugins, including Google Drive,

Confluence and JIRA, see this FAQ page


If you're looking for import/export options for other applications or file formats, a good

number of extensions have been written so far. You can find the list of import/export

extensions here (http://support.balsamiq.com/customer/portal/articles/135659).

Our BMML format is open and documented.

(http://support.balsamiq.com/customer/portal/articles/111834)

Linking Mockups TogetherYou can link mockups together to create a simple prototype for your site or softwareapplication. This can be useful for demonstrating click‑through prototypes or for usabilitytesting when you're displaying your project Mockups in Full Screen Presentation(http://support.balsamiq.com/customer/portal/articles/111756) mode or as an exportedPDF (http://support.balsamiq.com/customer/portal/articles/111730#exportpdf).

Linking two mockups together is as easy as choosing a file name from a pull‑down menu.Simply click on a control that supports linking (most do, and here's a workaround for thosewhich don't (http://support.balsamiq.com/customer/portal/articles/117684)), and you'll seea "Link" pull‑down in the floating property inspector (click the "Show Link Inspector" link ifyou don't see it).

To learn how to create links from text strings inside other controls, see our article on makinglinks in text actually work(http://support.balsamiq.com/customer/portal/articles/110121#linking).

The list is pre‑populated with the names of all the BMML files found in the same folder as thefile you're editing. As long as you keep all the related mockups in the same folder(http://support.balsamiq.com/customer/portal/articles/117761), this should be all youneed.

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.

For controls that can have multiple targets, you'll see something like this:

Once you have selected a mockup or web page to link to from the 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.

When you're happy with your link structure simply enter Full Screen Presentation mode (seedetails here (http://support.balsamiq.com/customer/portal/articles/111756)) and you'll beable 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 bighand pointer with the name of the target file or web page for the link.

Click on a link to load up the referenced mockup file or web page. Clicking on a control thathas a web link will open a new browser window when in Full Screen Presentation mode or in aPDF.

One more thing: you can use the left and right arrow keys on your keyboard to go back andforth between the mockups you have visited in your run‑through.

Here's a screencast (1:21 long, no audio) showing linking up some mockups and runningthrough the resulting prototype:

You can view the full tutorial for creating these mockups here(http://support.balsamiq.com/customer/portal/articles/1119780).

Working with Skins (sketch vs. wireframe)Now that we've added the wireframe skin(http://support.balsamiq.com/customer/portal/articles/98988), you might be askingyourself when should you use it and when should you stick to the original, "sketchy" skin.

The short answer is that we still feel that the sketch skin is more appropriate most of thetime while using Mockups.

Our intention with adding the wireframe skin was to help add legitimacy to your Mockupswhen presenting them to clients or stakeholders, people who may consciously orunconsciously discount the thought and effort of your design work simply because it lookslike it was sketched on the back of a napkin. We'd hate for all your hard work to gounappreciated 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 lotsof 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 toosoon because it looks "done", or it may prompt you to fine‑tune the alignment, colors, orfonts when you should be thinking about the workflow.

Just as the wireframe skin makes the design feel finished, the sketch skin makes the designfeel un‑finished, which guides you to continue to ask questions and explore. The followingdescription of the differences between sketches and prototypes can also be applied to thesketch and wireframe skins, respectively.

Credit: Bill Buxton, Sketching User Experiences (http://www.amazon.com/Sketching‑User‑Experiences‑Getting‑Design/dp/0123740371/)

So, while you can use the wireframe skin at any phase of the design process, we don't reallyrecommend 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 orpitching phase of product development, beyond just the ideation and design phase.

Since the beginning, Balsamiq Mockups has been optimized for that sweet spot(http://balsamiq.com/products/mockups/#sweet) of the ideation phase of a project and willcontinue to be for the foreseeable future. We still(http://blogs.balsamiq.com/ux/2011/06/17/why‑we‑arent‑doing‑interaction/) don't haveany plans to add fancy interaction behavior to our family of products, for example, and we'rejust fine with that.

Agree? Disagree? Feel free to email us (mailto:[email protected]?subject=Formal%20Skin%20Feedback) with your thoughts on the wireframe skin and howyou've used it so far.

Presenting Your WorkMockups includes a "Full Screen Presentation" mode for those times when you need topresent your wireframes to other stakeholders.

To enter Full Screen Presentation mode, just click on the full‑screen icon in the top‑rightcorner of Mockups, or select "Full Screen Presentation" from the View menu, or simply hitCTRL/CMD+F.

Mockups will expand to take up your whole screen (to eliminate distractions), and yourmockup will be centered on the screen.

You will also see a big blue arrow pointer appear. The pointer will point towards the center ofthe screen in order to always stay out of the way of your mockup as much as possible.

You will also see three little buttons in the lower‑right corner of your screen. They'll fade outin a few seconds, but you can always bring them back by mousing over the bottom‑rightcorner of the screen.

The first toggle is for showing and hiding linking hints and the big pointers. You can turnthem off if you're using the presentation mode to test a new UI on some user and don't wantto 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(http://support.balsamiq.com/customer/portal/articles/110418) elements, such as StickyNotes, Arrows and Callouts (any control under the "Markup" tab in the UI Library). This isuseful 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.

The state of the two toggles is remembered across sessions, and in the Desktop version youcan use the "L" and "K" keys to toggle the two settings as well.

To exit Full Screen Presentation mode, just hit the ESC key.

Note: Toggling Link Hints and Cursor off ("L" key) gives you access to your mouse scroll

wheel or trackpad 2‑finger scrolling on Macs.

Using Symbols, Images and Icons acrossProjectsThis article describes how you can use assets (e.g., images, icons or Symbols) inmultiple projects (http://support.balsamiq.com/customer/portal/articles/117761) bycopying them from one project to another.

When you add images(http://support.balsamiq.com/customer/portal/articles/110401) and Symbols(http://support.balsamiq.com/customer/portal/articles/110439) to Balsamiq Mockups theyshow up in the Project Assets category of the UI Library for all mockups in the same folder.

Behind the scenes, the files for the resources themselves are stored in a subfolder named"assets."

If you want to make all or some of the files available to mockups in other folders, simply copythe assets folder and its contents to the folder(s) that you want the files to be available to.

The assets will then appear in the Project Assets category for mockups in the new folder.

The BalsamiqMockups.cfg Configuration File Balsamiq for Desktop allows for some customization via a simple XML file called

BalsamiqMockups.cfg. The configuration file allows you to make some software

modifications, such as:

Using another font

Disabling smart alignment snapping

Setting your exported PNGs to use transparent backgrounds

Setting a different selection color for controls

Setting a different folder than the default Documents/Balsamiq Mockups path

Saving your Config File

Create the file in a text editor (you can use this sample BalsamiqMockups.cfg file

(http://media.balsamiq.com/images/BalsamiqMockups.cfg) as a starting point) and save it to

your Local Store folder. You can find this folder by opening the "About" dialog and clicking on

the "Open Local Store Folder" link (or go to this page

(http://support.balsamiq.com/customer/portal/articles/1033437) to see folder locations for

all operating systems).

Note: the config file must be saved to plain text format with UTF‑8 encoding! It will NOT

work if you save your config file to RTF, or with the .cfg.txt or .cfg.rtf extensions. If you are

using TextEdit.app, to save in plain text format select Format > Make Plain Text from the

menu.

Sample File

The config file might look like this:

<config>

<fontFace>Architect Small Block</fontFace>

<rememberWindowSize>false</rememberWindowSize>

<useCookies>false</useCookies>

<assetsPath>C:\Documents And Settings\Administrator\Dropbox\Balsamiq Assets</assetsPath>

<snappingEnabled>false</snappingEnabled>

<selectionColor>FF0000</selectionColor>

<transparentBackground>true</transparentBackground>

</config>

Options

The fontFace tag allows you to specify the name of a font on your computer to use instead

of Balsamiq Sans (http://www.balsamiq.com/products/mockups/font).

Set the rememberWindowSize tag to false if you'd like Mockups to not try to remember the

size and position of the application window (some video card drivers don't play well with

Adobe AIR and Mockups won't start unless you set this to false).

Set useCookies to false if you'd like Mockups to not save any of your preferences on the

current computer (preferences include the state of "show UI Library", "Show Graph Paper"

and others).

assetsPath lets you point to a folder of your choice as the location of your account assets

(http://support.balsamiq.com/customer/portal/articles/110439#accountassets). If not

present, Mockups will look in a folder called "Balsamiq Mockups/assets" under your

Documents folder.

Set snappingEnabled to false if you'd like to turn off snapping alltogether in the app.

Set selectionColor if you want to change the color we use for showing selection in the app.

Set transparentBackground to true if you want your PNGs to be exported with a

transparent background instead of the default white one.

Setting up assets for non-typical Documents locations

A config file is only necessary if you want to set up your documents outside of the typical

"Documents/Balsamiq Mockups/assets" folder. Account and Project assets should work

without needing a config file in a typical set up.

If your computer username is Bob, for instance, and you want to use a folder in

/Users/Bob/Dropbox/BalsamiqAssets set the assetsPath element like this:

<assetsPath>/Users/Bob/Dropbox/BalsamiqAssets</assetsPath>

Please also see the article on sharing symbols across projects

(http://support.balsamiq.com/customer/portal/articles/110439#accountassets) for more

information about account assets.

Setting up an assets path for cloud drives

Here are some examples for how to set up your documents path so that account assets will

work with cloud drives. This assumes that you will have a folder named "BalsamiqAssets"

under your DropBox or Google Drive. Change your computer name where applicable below.

Mac OS

Dropbox

<assetsPath>/Users/YOUR_USER_NAME/Dropbox/BalsamiqAssets</assetsPath>

Google Drive

<assetsPath>/Users/YOUR_USER_NAME/Google Drive/BalsamiqAssets</assetsPath>

WindowsThe path may vary depending on your version and setup of Windows. Please check WindowsExplorer to get the correct path.

Dropbox

<assetsPath>C:\Users\YOUR_USER_NAME\Dropbox\BalsamiqAssets</assetsPath>

Google Drive

<assetsPath>C:\Users\YOUR_USER_NAME\Google Drive\BalsamiqAssets</assetsPath>

Please also see the article on sharing symbols across projects(http://support.balsamiq.com/customer/portal/articles/110439#accountassets) for moreinformation about account assets.

Command Line Options

Mockups for Desktop can be controlled via the command line with the following commands:

Commands

Balsamiq Mockups export inputBMMLFilePath outputImageFilePath

exports the provided bmml file to a PNG file

Balsamiq Mockups export inputBMMLFolderPath outputImagesFolderPath

exports all the bmml files in the the provided folder to PNG files

Balsamiq Mockups register organizationName serialKey

registers this Mockups copy with the provided serial key info

Balsamiq Mockups unregister

un‑registers Mockups from this computer

Balsamiq Mockups file_1.bmml file_2.bmml...

opens Mockups for Desktop and loads the specified files (use absolute paths)

You only need to register your copy once per machine, then you can export PNGs from yourmockups' XML files whenever you need to.

The export process is near‑instantaneous, and you should only see a quick "flashing" of theapp.

Logs

The output of the application run will be in a BalsamiqMockups.log file which you can find inthe following locations:

On Windows XP:C:\Documents and Settings\[your username]\ApplicationData\BalsamiqMockupsForDesktop.#numbers#\Local StoreOn Mac OS X:[your user home]/Library/Preferences/BalsamiqMockupsForDesktop.#numbers#/Local StoreOn Windows Vista and Windows 7:C:\Users\[yourusername]\AppData\Roaming\BalsamiqMockupsForDesktop.#numbers#\Local StoreOn Linux:~/.appdata/BalsamiqMockupsForDesktop.#numbers#/Local Store

You can also specify a full path to a log file as an additional parameter to any of theinstructions above and Mockups will log there instead of the default file.

Additional Resources

You can find some scripts to export multiple mockups using the command‑line here(http://community.balsamiq.com/balsamiq/topics/shell_scripts_to_export_multiple_mockups).

Looking for information on how to perform a silent installation of Mockups for Desktop onmany end‑user machines? Here you go(http://support.balsamiq.com/customer/portal/articles/133390).

Improving Mockups Performance whenworking with remote filesSome of our Windows users have reported “Epic Slowdowns” when working with remotelyhosted files.

This document outlines a few things to try that will help.

If the files you’re working on are on a remote server, make a local copy of the whole projectdirectory (including the assets folder) and work locally. When you are finished, copy thefolder back to the remote location.

If you experience slowdowns even when working on local files, it could be caused by yourDocuments folder being remote, coupled with your use of Account Assets. The solution hereis to use the <assetsPath> configuration tag to point your Account Assets folder to a localdrive instead.

If neither of the tips above work, it probably means that your user’s home folder is on aremote drive. If this is your case, let us know (http://balsamiq.com/company#contact), weneed your help to come up with a good solution for this special case.

BMML File Format Specification

BMML is the Balsamiq Mockups Markup Language, the flavor of XML used by Balsamiq

Mockups to save its data.

This document outlines the BMML file format, in the hopes that this will be useful to you

when integrating Mockups in your daily work. You could for instance import BMML into your

tool, write a BMML parser which generates HTML or MXML or XAML or running code...the sky

is the limit!

Warning: there are some things that aren't documented here, like what properties each

control type supports. To figure those things out, just open Mockups, drag a control type to

the canvas, change some properties in the property inspector and look at the resulting BMML.

In other words, we try our best to keep this document up‑to‑date, but you should trust

shipped code more. :)

Remember that XML syntax is case‑sensitive, e.g., <tag> and <Tag> are different.

Quick Overview

Here's a sample BMML containing a single Callout control:

<mockup version="1.0" skin="sketch" fontFace="Balsamiq Sans" measuredW="941"

measuredH="169" mockupW="36" mockupH="40">

<controls>

<control

controlID="1" controlTypeID="com.balsamiq.mockups::CallOut" x="644"

y="129"

w="-1" h="-1" measuredW="36" measuredH="40" zOrder="1" locked="false"

isInGroup="-1">

<controlProperties>

<text>Hello!</text>

<backgroundAlpha>0.25</backgroundAlpha>

<color>65280</color>

</controlProperties>

</control>

</controls>

</mockup>

As you can see, the top‑level tag is a 'mockup' tag. Within it, there's a 'controls' tag, which

includes a list of 'control' elements, one for each control in the mockup. Each control element

can include an optional 'controlProperties' element, with different children depending on the

type of element. We will see below what all the attributes mean in detail.

The Mockup Tag

Here's the DTD snippet for the mockup tag:

<!ELEMENT mockup ( controls? ) >

<!ATTLIST mockup measuredW NMTOKEN #REQUIRED >

<!ATTLIST mockup measuredH NMTOKEN #REQUIRED >

<!ATTLIST mockup mockupW NMTOKEN #REQUIRED >

<!ATTLIST mockup mockupH NMTOKEN #REQUIRED >

<!ATTLIST mockup skin NMTOKEN #REQUIRED >

<!ATTLIST mockup fontFace NMTOKEN #REQUIRED >

<!ATTLIST mockup version NMTOKEN #REQUIRED >

<!ELEMENT controls ( control? ) >

A 'mockup' tag includes a 'controls' tag, described below. measuredW and measuredH are the

dimensions, in pixels, of the mockup, including the top‑left white space around it. mockupW

and mockupH are the dimensions of the mockup without any space around it. In other words,

this would be the size of the PNG if you exported it. The skin tag, not used prior to 2.2.1, can

either be "sketch" or "wireframe". The fontFace tag, introduced in 2.2.1, can either be

"Balsamiq Sans" or "_sans". The version tag is for the version of the BMML specification, which

is 1.0 so far. The controls tag is simple, it doesn't have any attributes and just contains a list

of 'control' tags.

The Control Tags

Here's the DTD snippet for the control tag:

<!ELEMENT control ( controlProperties? ) >

<!ATTLIST control controlID NMTOKEN #REQUIRED >

<!ATTLIST control controlTypeID NMTOKEN #REQUIRED >

<!ATTLIST control w NMTOKEN #FIXED "-1" >

<!ATTLIST control h NMTOKEN #FIXED "-1" >

<!ATTLIST control measuredH NMTOKEN #REQUIRED >

<!ATTLIST control measuredW NMTOKEN #REQUIRED >

<!ATTLIST control x NMTOKEN #REQUIRED >

<!ATTLIST control y NMTOKEN #REQUIRED >

<!ATTLIST control zOrder NMTOKEN #REQUIRED >

<!ATTLIST control isInGroup NMTOKEN #FIXED "-1" >

<!ATTLIST control locked NMTOKEN #FIXED "false" >

The control tag can contain a controlProperties tag, described below.

controlID is always unique for this list of controls and identifies this control's instance in

the mockup controlTypeID in the control type.

w and h represent the size in pixels of the control.

A value of ‑1 means that you should look at measuredW or measuredH instead.

measuredW and measuredH represent the size in pixels of the control, when shown in its

'natural state', i.e., it's the preferred dimension of the control as dictated by the control

itself. For instance, for a Label control, measuredW would be large enough to show the

whole text with no cropping.

x and y represent the position in pixels of the control, relative to the top‑left corner of the

canvas. zOrder represents the layer ordering of this control. Values are unique and sequential within the current list of controls. isInGroup tells you if a control is part of a group (‑1 means "no", otherwise it uses thecontrolID of the group)locked is a flag that tells you...you guessed it!

The ControlProperties Tag

The controlProperties tag contains a child for each property that can be modified for a control(using the property inspector(http://support.balsamiq.com/customer/portal/articles/110114)). Here's a list of thedifferent control properties and where they are used:

alternateRowColor, rowHeight, hasHeader, vLines, hLines: used for Lists and Data GridscontrolsbackgroundAlpha (0..1): the transparency of the backgroundbgPattern (one of 'allWhite', 'allBlack', 'topOnly', 'topBlueBottom', 'topBlackBottom'), topBar(bool): used by the iPhone controlbold, italic, underline, align, size: used by any control with text in itborderStyle ('none' or 'square'): used by all controls which can show a border or notclose, minimize, maximize, dragger, topheight, bottomheight: used by the Dialog /Window controlcolor (int): the color of the text or the background of a component, depending on thecontrol typecrop (x,y,h,w): four comma separated values with range [0,1000] that represent croppedbounds ratios respect to full control size. For example 0,0,1000,1000 represents the fullcontrol.customData (String): added on 10/21/2009, see here(http://blogs.balsamiq.com/product/2009/10/21/weekly‑release‑custom‑ids‑and‑bug‑fixes/) for detailscustomID (String): added on 10/21/2009, see here(http://blogs.balsamiq.com/product/2009/10/21/weekly‑release‑custom‑ids‑and‑bug‑fixes/) for detailsfilter: used by the Image control: true if the image should be sketcheddirection ('left', 'center', 'right', 'bottom', 'top'): used by Arrows, Tabs, Curly Braces, PointyButton etchref: used by all controls that can have a single link to other controls, like Button, Canvas,etc. Mockups saved before 9/14/2009 only contain the file name to link to, i.e. foo.bmmlwith no path. Mockups saved after 9/14/2009 contain a string of this form: <name>&bm;

<viewURL>&bm;<loadURL>&bm;<editURL>. The last 3 values are all the same forMockups for Desktop but are different in the plugin versions.hrefs: like href, but used by controls that link to multiple files, like the Accordion, LinkBar, etc. It's a comma‑separated list of strings formatted the same way as a single hrefstring (see previous bullet).icon: a string composed of both iconID of the icon to use for this control and its size, likethis "iconID|48". There are over 220 icons, each with a unique ID. The sizes are either 16,24, 32 or 48. As of version 2.1.7, the left part can also be a src, either ./assets/filenameor $ACCOUNT/assets/filename, based on where the custom icon is loaded from.indeterminate (bool) and scrollbarValue (0‑100): used for Progress Bar controlslabelPosition ('bottom' or 'right'): used in the Icon and Label controlleftArrow (bool), rightArrow (bool), curvature (‑1, 0, 1): used by the Arrow controlsmap (string): added on 9/14/2009: an escaped image map for the linked areas of themockups, following the same format as the HTML map tag.onOffState ('on' or 'off'): used by the Switch controlorientation ('portrait' or 'landscape'): used by the iPhone, iPhone controloverride: used by the Component control (see below)position ('left' or 'right'): used by Vertical Tab BarselectedIndex (‑1 for none): the selected item in a listsrc: used by the Image and Component controls. It's either a relative path (for imagesloaded from disk) or an http url. If it starts with $ACCOUNT/assets, it means the image isin the account assets folder.state ('up', 'selected,', 'focused', 'disabled', 'disabledSelected'): the state of the controltabHPosition and tabVPosition: used by the Tab Bar controlstooltipDirection (NW, N, NE, E, SE, S, SW, W): used by the tooltip controlvalue: the value of a scrollbar, from 0 to 100verticalScrollbar (bool) and value (0‑100): whether the control has a scrollbar or not, andits value (0 means "top", 100 means "all the way down")

The Component Control

The Component control, known as "Symbol" in Mockups, contains a link to another bmml(here are the docs for the Symbols feature(http://support.balsamiq.com/customer/portal/articles/110439)). The link is an url with anoptional anchor. If the anchor is missing, then the whole bmml is the target. Otherwise, thetarget is a group which has the same name of the anchor. The group must be at top level inthe bmml.

<control controlID="1" controlTypeID="com.balsamiq.mockups::Component"

x="588" y="92" w="407" h="314" measuredW="407" measuredH="314"

zOrder="1" locked="false" isInGroup="-1">

<controlProperties>

<override controlID="1" x="0" y="0" w="116" h="70">

<color>7775663</color>

<text>This text is overridden</text>

</override>

<src>./assets/symbols.bmml%23Options%20dialog</src>

</controlProperties>

</control>

The ControlProperties tag of a Component control can contain an override tag, for the

properties of the Symbol that have been overridden in this symbol instance. Attributes of

override tag:

controlID: id of the overridden control as in the symbol definition. In case the control is

nested in groups, then the controlID is the relative path to the control (for example,

"2:3:0" is the control with id 0 belonging to group 3 nested in group 2 in the symbol

definition).

x, y, w, h: (optional) these attributes override the original size and position of the control.

Measured dimensions are not saved in the bmml.

It is not possible to override the zOrder attribute. It is not possible to add or remove controls

in the symbol instance.

Custom PropertiesThis feature is especially useful if you're using one of the 3rd party tools that extendMockups (http://support.balsamiq.com/customer/portal/articles/135659).

You can right‑click on any control of your mockup and select "Custom Properties..." from thecontext menu:

This will open a dialog like this one:

Like the dialog says, you can enter a custom ID for the selected control and some customdata to go with it. Mockups will not use these properties directly, but it will save them in theBMML file along with the rest of your mockup.

Other tools can use this data to do some fancy stuff like allowing you to specify somejavascript to run when the control is clicked or even just simply using the custom ID youspecified in the HTML exported.

Iif you are building an extension to Mockups and would like to be notified of these changesbefore anyone else, email Peldi (mailto:[email protected]) and I'll add you tothe [email protected] mailing list!

Finding Your Local Data Storage FolderBalsamiq Mockups for Desktop, like most applications, creates a folder on your hard drive for storing

some local data and preferences. It looks something like this:

Most people will never have to open this folder, but there are a few cases where you might want to, such

as setting up a custom configuration file

(http://support.balsamiq.com/customer/portal/articles/111759) or sharing assets between projects


If you do want to use this folder, you can locate it by opening the "About" dialog and clicking on the

"Open Local Store Folder" link.

For reference, here is the location of this folder on the various operating systems that Mockups for

Desktop runs on:

On Windows XP:

C:\Documents and Settings\<username>\Application Data\BalsamiqMockupsForDesktop.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1\Local StoreOn Mac OS X:

<your user home>/Library/Preferences/BalsamiqMockupsForDesktop.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1/Local StoreNote for Mac OS X Lion users: the ~/Library folder is hidden by default. To make it visible again,open a terminal window and enter: chflags nohidden ~/LibraryOn Windows Vista and Windows 7:

C:\Users\<yourusername>\AppData\Roaming\BalsamiqMockupsForDesktop.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1\Local Store

In Windows 7, if you don't see Documents and Settings, you may need to "unhide system files."1. Open Windows Explorer (Start+E)2. Select the menu item "Organize > Folder and search options."3. Select the View tab, and uncheck "Hide protected operating system files."Documents and Settings should show up under C:\ in your Windows Explorer now. If it doesn't, youmay need to restart.On Linux:

~/.appdata/BalsamiqMockupsForDesktop.EDE15CF69E11F7F7D45B5430C7D37CC6C3545E3C.1/LocalStore

Does Mockups automatically save open files?Mockups provides an auto‑save feature that keeps a version of all documents in local cache

in case the application should crash unexpectedly. The auto‑saved version is kept in the local

cache (or Flash browser cache for web‑based versions) of the machine you are using.

When the application crashes or loses connection to the server, the next time the application

is launched a pop‑up message like the one below should appear.

To restore the auto‑saved version(s) of the file(s), click the "Load Auto‑Save Data" button and

your recovered file(s) should appear.

In Mockups for Confluence you may have to recover the auto‑saved Confluence page first.

You can find it in your drafts or by re‑editing the page that wasn't saved (more details here

(https://confluence.atlassian.com/display/DOC/Resuming+the+Editing+of+a+Draft)). Any

Mockups you created should be stored in the Confluence Attachments.

Is there a Mockups Viewer to share myprototypes with my clients?Yes! Mockups is designed for collaboration(http://balsamiq.com/products/mockups/#collaboration), so there are a few different waysto achieve this. Your best options are exporting an interactive PDF or sending your clientsyour BMML files and images directly.

Share PDF document

To create an interactive PDF, all you have to do is open all the mockups you’d like to packagetogether, link them up if you want and “Export All to PDF…” from the File menu. A single PDFfile will be created, with a mockup on each page and even interlinked pages, if you've usedthe linking feature (http://support.balsamiq.com/customer/portal/articles/111742) ofMockups!

Share BMML files

Another way to share your work is to zip up all of your BMML files (and image folders if youhave any) and send the package to your clients, along with a link to downloadmockups: http://balsamiq.com/download (http://balsamiq.com/download).

Tell your clients to unzip your package, install mockups and open your main bmml file.

They will be able to go full‑screen and click around, or open all the BMML files at theirleasure and look around.

During the trial period they’ll be able to make changes and save them.

When the trial expires, they won’t be able to save but they’ll still be able to click around,zoom etc.

Share PNG images

You can export all of your Mockups to PNG images that you can send to your clients. Moreinfo about that feature here(http://support.balsamiq.com/customer/portal/articles/111730#exportimage).

Use myBalsamiq!

Last but not least, you could upload your bmml files to myBalsamiq, our web‑basedapplication which offers built‑in commenting, branching and mockup revision history. Learnmore (http://balsamiq.com/products/mockups/mybalsamiq).

Can I add a custom control or icon?Yes. Mockups for Desktop supports the concept of Symbols, templates, master pages,custom components, or widgets. Please read our symbols documentation(http://support.balsamiq.com/customer/portal/articles/110439) to use this powerfulfeature.

Mockups also provides the ability to add your own custom icons to the app, so that you canuse them when you use any of the controls that support icons. See the custom iconsdocumentation (http://support.balsamiq.com/customer/portal/articles/110202#custom) touse this feature.

If instead you have a very special control that’s specific to your project, we suggest you takea look at the import image feature(http://support.balsamiq.com/customer/portal/articles/110401), which will even let you“sketch‑ize” your image to make it fit with the rest of the app. We would also appreciate ascreenshot or two of your special controls if you can share them, we might be able to add amore general form of it easily.

For controls that are really just groups of simple mockup controls, see this article(http://support.balsamiq.com/customer/portal/articles/98987).

You may also be interested in Mockups To Go (https://mockupstogo.mybalsamiq.com), auser‑contributed collection of ready‑to‑use UI components and design patterns built usingBalsamiq Mockups.

How can I use non-latin text in Mockups?

The default fonts used by Mockups only include a subset of international characters. To enternon‑latin text such as greek, cyrillic or asian languages, you can do one of two things:

1. Select “Use System Fonts” from the View menu2. Swap out the default font with the system font of your choice that includes the characters

you need. Instructions are here(http://support.balsamiq.com/customer/portal/articles/111759).

Please refer to the Balsamiq Mockups Font FAQ(http://support.balsamiq.com/customer/portal/articles/131378) for more info.

Can I reuse common elements acrossmockups?Yes! Using the Symbols feature(http://support.balsamiq.com/customer/portal/articles/110439).

You may also be interested in Mockups To Go (http://www.mockupstogo.net/), a user‑contributed collection of ready‑to‑use UI components and design patterns built usingBalsamiq Mockups.

Is there a more formal skin for Mockups?Yes there is a more formal skin!

If you're using Mockups 2.2 or later, use the menu View > Skin to switch to the wireframe skin.

Sketch and Wireframe UI Libraries

We know that some people need to shift from idea generation with internal teams to presentation with clients orstakeholders, and in those situations the sketchy skin may present challenges depending on who the audience is. Toaddress this need, we added a wireframe skin in version 2.2 that will allow people to switch from sketchy elements tousing straighter, gray‑box style wireframe elements.

The feature allows you to work on early ideas in the sketchy skin, and then later select a menu to swap out all of yourcontrols in the clean skin. All of your elements, including icons will be switched.

What does the Wireframe UI Library look like?

The screenshots below show a comparison of an interface design in the sketchy and wireframe skin. Click to view largerimages.

(http://media.balsamiq.com/img/support/prodfaqs/search‑sketchy.png)

(http://media.balsamiq.com/img/support/prodfaqs/search‑wireframe.png)

And here's a look at most of the controls in both skins.

(http://media.balsamiq.com/img/support/prodfaqs/controls‑sketchy.png)

(http://media.balsamiq.com/img/support/prodfaqs/controls‑wireframe.png)

We think this will provide a great deal of flexibility for this growing need.

For early ideation, we still feel a polished look and feel can get easily confused for a semi‑finished product, discouraging

discussion about the structure of the application / web site. People also have a natural tendency to look at details like the

color of a button or whether an icon is the right one for the job, neither of which makes for productive brainstorming.

Wireframes created with Mockups intentionally scream “I am just a draft, criticize at will, I won’t get offended”, which

helps elicit honest feedback. For this reason, we recommend working internally with the sketch skin to start.

What about high fidelity?

We don’t have plans to design towards high‑fidelity in the near term. Our product family does not currently include tools

for visual design or production‑quality graphics generation.

In some situations you may have to deliver a polished document. If the idea has been refined to the point of having found

the right design, then the next step is really to go to a tool that’s designed for the level of polish that you need, whether

that’s in graphic design apps or in code. Mockups saves in XML (a flavor called BMML), so someone could conceivably

build a translator from BMML to another format which uses other assets. We are always interested in ways to make the

app better, so send us an email (mailto:[email protected]?subject=Formal%20Skin%20Feedback) if you'd like to chat

about this, and check out the extensions (http://support.balsamiq.com/customer/portal/articles/135659) that already

work with Mockups.

Can I save Mockups files on a MicrosoftSharepoint Server?If you’d like to save your Mockups files on a Sharepoint issue, you will have to get your serveradmininstrator to add the following mime type within IIS:

.bmml application/vnd.balsamiq.bmml+xml

BMML is an XML file, so without adding the mime type for BMML, the server is just serving asXML and Windows is rendering the file in whatever the PC is configured to use to view XML.Setting a mime type will allow you to open BMML files in Mockups instead.

I’m having performance issues with Mockups:

it’s slow / sluggish for me. Help?

First of all, so sorry about that. We fully understand that speed is a very important feature forany product, and a slow, poorly responsive software can be extremely frustrating.

Improving performance of Mockups is more of “a way of life” rather than a single bug fix, it’sa constant hunt to try and make our software as fast as it can possibly be. We try to look atperformance issues with each new version we release, and treat sluggishness reports as firstclass problems.

That said, some issues are due to factors outside of our control.

If you’re having performance issues with Mockups, here are some things that might help:

Make sure you’re running the latest version of Mockups for Desktop(http://balsamiq.com/download) and Adobe Air (http://get.adobe.com/air). This usuallytakes care of most performance issues.Select “Use System Fonts” from the View menu – this will change the font for all of yourMockups to a more boring one, but it might be worth it. Maybe do it while you work onyour mockups, then turn it off again before exporting them.Disable snapping while dragging – hold down the CTRL key while moving your selection toprevent snapping. This will speed things up in mockups with lots of controls in them.Disable snapping alltogether – if the suggestion above made a world of difference to you,you might want to consider disabling snapping alltogether via the configuration file(http://support.balsamiq.com/customer/portal/articles/111759) (only available inMockups for Desktop).Restart Mockups – if you notice Mockups getting slower over time, it means we have amemory leak somewhere. Restarting the app might fix things, at least for a little bit.If you're working with files saved on remote servers, this article(http://support.balsamiq.com/customer/portal/articles/98996) should help.

VERY IMPORTANT: we can only fix what we know is broken. If you have a minute to spare,we would really appreciate it if you could send us a bug report about your performanceissues, trying to specify as much detail as possible as to what you think might be the cause(does Mockups get slower over time? do you think it’s related to the number of controls inyour mockup? which operations are the slowest?). If you could include your BMML files thatshow the problem, that would be super. We promise not to share them with anyone outside

of our development team, and to delete them once we’ve fixed your problem. To send us abug report, just email [email protected] (mailto:[email protected]?subject=Performance%20Issue%20Bug%20Report).

Does Mockups for Desktop run on Windows 7?Here are the answers to some frequently asked questions related to Mockups for Desktop(http://balsamiq.com/products/mockups) and Windows 7.

Is Mockups for Desktop compatible with Windows 7?

Yes. We rely on Adobe Air, which runs on Windows 7 just fine. Here are the full SystemRequirements (http://www.adobe.com/products/air/tech‑specs.html).

Do you support packaging or sequencing in APP-V?

We're not experts on this, but it looks like it can be done. See this article(http://blogs.catapultsystems.com/mdowst/archive/2012/02/09/sequence‑adobe‑air‑based‑application.aspx) on how to package Adobe Air‑based applications like ours.

What are the licensing requirements for a VDI environment?

Our licenses are tied to people, not a particular machine, real or virtual. More info(http://support.balsamiq.com/customer/portal/articles/131257).

Can Mockups Export to HTML/CSS/JS, MXML,

XAML, Ruby, etc?

Not directly, no.

There are too many technologies for a small company like ours to keep track of and export

to, so we don’t plan on adding export capabilities natively any time soon.

Our strategy instead is to use an open, well‑documented file format

(http://support.balsamiq.com/customer/portal/articles/111834) and work with partners to

provide such features. There are already a number of projects under way which extend

Mockups this way, see for yourself in the extensions page


If you’d like to write an extension for Mockups, do get in touch (mailto:[email protected]),

we’d love to help you as much as we can.

What's the maximum canvas size for aMockup?The maximum size for Mockups canvases is 4056x4056 pixels. Mockups automatically

adjusts the canvas size to adapt to your content. This is the maximum canvas that Adobe AIR

apps allow. If the framework allows us to increase the canvas dimensions in the future we

will.

If your wireframe bumps against the edges beyond 4056 pixels, you could try using a

breakline to indicate continuation. This is something that designers do in wireframe specs

usually. Mockups supports breaklines in the Browser control, as well as the Rectangle,

Geometric Shape and Horizontal Ruler controls.

(http://media.balsamiq.com/img/support/prodfaqs/breaklines.png)

(http://media.balsamiq.com/img/support/prodfaqs/breaklines2.png)