Balsamiq for Google Drive 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

Creating a Symbol 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, or use CTRL/⌘+G). Note that the control selection will turn purple to indicate they are a group.
Click on the "Convert To Symbol" button in the Property Inspector.

Name your Symbol.

You will notice that the group selection changes to green. 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.

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 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 editing mode 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 "Done" button on the canvas. Edits made to the Symbol will be immediately reflected in any wireframes using it.

Managing symbols

You can manage your Symbols from the Symbols editing mode or from the UI Library (right-click on the desired Symbol). You can rename, duplicate or delete any Symbol from both locations, as shown below.

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

The Symbols editing mode allows you to add notes to your Symbol from the right panel. 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.

Cleaning up your symbols

All unused Symbols can be cleaned up at once using our Export feature.

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 (or a few) from one project to another. Here is how to do it:

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

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

This method works across all our Balsamiq Wireframes products.

If you want to share assets between projects, like a logo image or Symbol 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.