Mockups To Go - a collection of ready-to-use UI controls

Mockups To Go is a free user-contributed collection of ready-to-use UI controls and design pattern libraries to extend the collection that comes with the built-in UI Library. The Mockups are built using Balsamiq Mockups and are designed to work in your account or project assets folders as Symbols.

You do not need a login to download or submit Mockups. Anyone can combine elements and components to create new mockup templates and symbol libraries to be re-used by others and submit them.


What can I find on Mockups to Go?#

Mockups to go provides anything from single controls that aren't available in the UI Library, to specialized libraries with components and device wireframes for mobile phones and tablets. The collection contains both user submissions, and libraries created by Balsamiq.

Below is an example of the libraries you'll find. On the left is an iPad library, and to the right is an Android library. Click the images below to preview them.

On the left below is a simple design pattern template for Slideshows and Photo Gallery Carousels, and to the right is a more complex Symbols library of components for Twitter Bootstrap.

More libraries are available for Android, Annotation and Markup, Blackberry, General Controls, Desktop Applications, Diagrams including Flow Charts, Dialogs and Windows, Icons, iOS, Layout, Mobile Devices (miscellaneous), Social Networks, Text Controls, Web Apps and Sites, Web Browsers (app chrome), Windows 8, and Windows Phone (WP7). View all of the libraries on Mockups to Go.


How to Use It#

  1. Browse the library of controls on the site.
  2. Once you find what you need, download the BMML file.
  3. Save the file to one of your assets folders to use as a Symbols library.

Note: for a more detailed description of the above process, see our visual step-by-step guide: How to Download from Mockups To Go.

Alternatively, you can download the file and open it in Mockups for Desktop, "Select All", Copy, and Paste it into a mockup.

Tip: you can also search Mockups To Go via Google.


Where to Save BMML Files in Mockups for Desktop#

First, we suggest that you organize your projects into folders. We have a best practice we suggest for organizing projects here.

Now, let's say your working directory is "My Documents." If you set up your Mockups directory, create your folders as below.

Balsamiq Mockups/
.. assets/ <- THIS IS THE ACCOUNT ASSETS FOLDER
.... My Account Asset.bmml <- AN ACCOUNT SYMBOLS LIBRARY
.. My First Project/ <- THIS IS A PROJECT
.... assets/ <- THIS IS THE ABOVE PROJECT'S ASSETS FOLDER
...... My Project Asset.bmml <- A PROJECT SYMBOLS LIBRARY
.... My Project Mockup.bmml

In the above example if you are looking at My Project Mockup.bmml, the "My Project Asset" symbols would show up in the project assets tab, and "My Account Asset" symbols would show up in account assets.

In fact, the symbols in "My Account Asset" would show up in account assets for any Mockup you have under the Balsamiq Mockups parent folder.

What Mockups is looking for is the assets/ folder that's a sibling to the file you have open. That's why we recommend the project folder best practice.

Once you have that set up, you can put the Mockups To Go Symbols libraries into one of those assets folder. This will get easier in the future when we integrate Mockups to Go importing into the apps themselves.

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


Where to Save BMML Files in myBalsamiq#

To use Symbols libraries in myBalsamiq, you have to upload them to your Assets. See the instructions in the documentation for Uploading Assets to myBalsamiq.

When you upload to myBalsamiq Site Assets, the Symbols will be available to all projects, and uploading to a single project's Assets will make it available to that project only. In the future we plan to integrate Mockups to Go directly into myBalsamiq so you can import Symbols libraries while you're working on project.


Using in Plugins#

If you are using a plugin version of Mockups for Google Drive, Confluence or JIRA or are using the free web demo version you can import the BMML via the Import feature instead (Importing won't erase your current mockup, it will simply add to it).

The Symbols feature is not supported in plugins or the web demo, so you will only be able to copy or import Mockups to go content.


Visit Mockups to Go

Keywords: Symbols Libraries, flow charts, flowcharts, user flow, diagrams, design patterns, custom controls

Last Updated: Nov 02, 2013 12:03PM PDT