πŸ‘‹πŸ½ We wrote a book! Order Wireframing for Everyone today β†’

Balsamiq

Toggle navigation

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 directly from the Editor. Once you have existing Symbols in your project, you can also use the Symbols view to add new ones.

Creating Symbols in the Editor

Creating a Symbol in the Editor 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.

  1. Select the controls you want to group.

  2. Group your selection (select Edit >Group, click the Group icon in the toolbar, or use CTRL/⌘+G). Note that the control selection will turn purple to indicate they are a group.

  3. Name the group.

  4. Click on the "Convert To Symbol" button in the Property Inspector.

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

Using the Symbols View

The Symbol view is the editor's dedicated view for creating and managing Symbols once you have create (at least) one Symbol. You can access it by clicking on the Project 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 organized as a nested list inside their Symbol Library.

You can select the Symbol Library name to access 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.

Creating Symbols in the Symbols View

Creating Symbols in Symbols view is similar to creating Symbols in the editor, 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.


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 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 is how to do it:

  1. Open the two projects (each in its own browser tab or window)
  2. In the source project, select the Symbol Library you want to copy or move
  3. Copy it (CTRL/⌘+C)
  4. 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.


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.

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

Duplicating Symbols

Duplicating 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.

Cleaning Up Your Symbols

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


Sharing Symbols Between Projects

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.