Balsamiq for Desktop documentation

Symbols

Balsamiq Wireframes supports the concept of Symbols. A Symbol is a group of controls that represents a single piece of functionality. It is often used for parts of the user interface that show up on several screens. Other software sometimes refers to this feature as templates, master pages, custom components, or widgets.

In essence, Symbols let you create reusable common elements that you can use across different wireframes.

Creating symbols

You can create a Symbol from the Symbols View or from the Wireframes View.

1. Using the symbols view

This is the editor's dedicated view for creating and managing Symbols. You can access it by clicking on the Edit menu and selecting Edit Project Symbols. Existing Symbols will be listed in the left panel.

Click the New Symbol Library icon to create a new Symbol Library. The Symbols view shows Symbols as well as their Symbol Library containers. In Symbols view, it is helpful to know the difference before creating them, as explained below.

Symbols vs. symbol libraries

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

In Symbols view, Symbols are shown as a nested list inside their Symbol Library.

You can select the Symbol Library name to see all the Symbols it contains, or you can select the name of an individual Symbol to view only that Symbol.

When viewing a Symbol, a small floating bar shows a breadcrumb path to the Symbol Library. The breadcrumb bar will help you navigate back out of the groups (if you have any).

The icon at the top of the list of Symbols allows you to choose whether you want all Symbols in the Symbol Library to be displayed or only the selected Symbol.

Note: The Symbol Library that a Symbol belongs to is ignored in the UI Library and Quick Add. You will see a list of all your Symbols, regardless of which Symbol Library they belong to.

Creating symbols in the symbols view

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

As described above, you can add a new Symbol to an existing Symbol Library or inside a new one. To create a new Symbol, click the '+' icon to the right of a Symbol Library. This will create a new Symbol inside that Symbol Library (called "New Symbol", for example).

When you create a new Symbol Library two sample Symbols are created automatically to help you learn about how Symbols work. Feel free to modify or delete them.

Note: You can add controls to the Symbol Library itself, but these controls will not be shown when the Symbols are used in your wireframes. Adding controls such as sticky notes to your Symbol Libraries can be useful for making notes about them that don't need to be shown in the UI.

2. Creating symbols in the wireframes view

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

Select the controls you want to group.
Group your selection (select Edit >Group, click the Group icon in the toolbar, or use CTRL/⌘+G). Note that the controls will turn a bluish color to indicate they are a group.
Name the group.
Click on the "Convert To Symbol" button in the Property Inspector.

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

This new Symbol will be displayed in the Symbols category of the UI Library for all wireframes in your project so that you can add it to any wireframe.

Tip: Once a Symbol has been created you can also add it via Quick Add using the first few letters of its name, just like other controls.

The video below describes the process of creating, editing, and using Symbols.

Watch this video on Youtube or accept marketing-cookies to watch it here.

Using symbols in your wireframes

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

The primary difference is that the properties for the Symbol itself are limited, similar to other grouped controls.

The big advantage is, of course, that any changes you make to your Symbols will update everywhere you use them. Read on to learn about editing Symbols.

Editing symbols

When you select a Symbol on the canvas, you'll see two Symbol properties in the Property Inspector: Break Apart and Edit Source.

Break Apart breaks the connection between the individual controls inside the Symbol and the Symbol itself for the selected instance, meaning that it is no longer a Symbol (although the original Symbol remains intact). Any changes you make to a broken apart Symbol will not get updated elsewhere and any changes made to the Symbol will not update where it has been broken apart.
Edit Source takes you to the Symbols view where you can edit the Symbol. The main benefit of reusable Symbols is that if you need to make a change, you can just do it in one place and it will be propagated to all the instances (uses) of that Symbol. When you are done editing a Symbol, you can click the "Back to Wireframes" button on the canvas. Edits made to the Symbol will be immediately reflected in any wireframes using it.

Nesting symbols

Symbols can contain other Symbols in the same way that Symbols can contain Groups.

To nest Symbols select a Symbol - along with any other controls or groups you wish to add to the new Symbol - group them and convert to a Symbol.

When editing nested Symbols you'll see the small floating bar showing the breadcrumb path to help you navigate:

Overriding symbol properties

Once you have created a Symbol, you might want to change it a little each time you use it. Imagine for instance a Symbol you created as a master page or template, containing a web page's title and navigation.

All your website pages will have the same font size and position for the title, but the title's text should be different on each page. The same goes for which page should be shown as selected in your navigation bar.

Symbols allow you to achieve this result by letting you override certain Symbol properties each time you use a Symbol. To do so, start by double-clicking on a Symbol to "enter it". Although this experience is very similar to editing a group's contents, you will notice that the editor informs you that what you're doing is really overriding some properties of a Symbol.

At this point, you can manipulate each control inside the Symbols at will, as if you were editing a group. Some operations are not permitted while overriding Symbol properties, such as adding, deleting or grouping controls. If, instead, you want to edit all instances of the Symbol click the "Edit" button.

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

You can also revert all changes you made to a Symbol's instance at once, via the "x" icon in the Property Inspector you see when selecting the whole Symbol.

Using symbols across projects

Sometimes you might want to copy or move a Symbol Library (or a few) from one project to another. Here are a couple of ways to do it.

Copying and pasting

Open the two projects (each in its own browser tab or window)
In the source project, select the Symbol Library you want to copy or move
Copy it (CTRL/⌘+C)
In the target project, paste your Symbol Library (CTRL/⌘+V)

That’s it! You may now delete the Symbol Library from the source project if you wish.

This method works across all our Balsamiq Wireframes products.

Dragging and dropping

Alternatively, you can can also drag and drop Symbol Libraries from one project to another (and then delete the wireframe(s) from the source project if you wish).

This method works only for Balsamiq Wireframes for Desktop.

Note: You can also copy a subset of a Symbol Library. Once the Symbol(s) is selected and copied, you can select the desired Symbol Library and paste your Symbol(s) there.

Managing symbols

In addition to creating Symbols and Symbol Libraries in Symbols view, it is also a good place to manage and organize your Symbols.

You can add notes to both your Symbols and Symbol Libraries in the Properties panel on the right. When an individual Symbol is selected the lower portion of the panel shows which wireframes (if any) the Symbol is used in. This can be used to identify any unused Symbols which you may want to delete. Clicking on a wireframe name will take you to that wireframe in the Wireframes view.

Renaming symbols

To rename either a Symbol or Symbol Library you can double-click its name in the navigator panel on the left or use the context menu.

Deleting symbols

You can also use the context menu to delete Symbols and Symbol Libraries from your project.

In the case of Symbol Libraries, as with wireframes and images, deleting will move them to the Trash, where you can delete them permanently or restore them. You can also empty the Trash directly from the dedicated toast message.

Deleting an individual Symbol from a Symbol Library, however, deletes it permanently.

Tip: You can hold down SHIFT or CTRL/CMD to select multiple Symbols and delete or move multiple Symbols at once.

Just like images, deleting a Symbol from a wireframe does not delete the Symbol, only that instance of the Symbol.

Cloning symbols

Cloning Symbols (also available via the context menu) can save you time when creating Symbols or Symbol Libraries that are similar.

Moving symbols

You can move individual Symbols from one Symbol Library to another by dragging them around in the Symbols view. You can also move Symbols from one project to another as described above.

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

Start by creating a new project. Add to it any images, icons, or Symbols that you think you'll want available to all your projects in the future. If you are designing for a specific platform (e.g., mobile or web) you could also add a control such as Browser, Window or iPhone to the first wireframe. This is your template project. You may want to save it with a name that includes the word "template."

Then, whenever you want to create a new project using this template, duplicate the project, rename it, and start editing!

You can do this for all new projects to start with a built-in library of commonly used assets.