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 out the myBalsamiq editor documentation first.


The Application Bar#

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

The Mockups menus should be pretty self-explanatory. The only tricky bit is that the Mockup menu contains different items depending on what version of Balsamiq Mockups you are using. In general, that's where you'll find the About Box and commands related to your mockup as a whole, like saving, exporting to XML or PNG, etc.

The Quick Add Tool#

The Quick Add tool is the fastest way to add UI controls to your mockup. To use quick add, click inside the quick add input box (or use the / or + keyboard shortcut to enter it). 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 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.

UI LIbrary Position

You can view a list and screenshots of all of the components 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 can make room for bigger mockups if you need to.


File Browser #

By default, the Mockups file browser appears at the bottom of the application window, below the canvas. This bar displays the Mockups files you have open as a series of tabs, and the current 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 press CTRL/CMD+J to toggle its visibility.

When the file browser is shown, you can reorder the tabs by dragging them left or right (or up or down if the file browser is set to the left or right) with your mouse (this can be useful when exporting to PDF, for example). Mockups will remember the order of your tabs in a particular folder, even if you close them and reopen them.

When the tabs for the number of open Mockups cannot be displayed in the space available in the 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 the file to view available actions:

Rename Mockup #

The rename feature will help those of you who use the linking feature extensively.

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

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

Last Updated: Nov 19, 2013 02:24PM PST