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.
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 View menu and selecting Symbols. You will see any existing Symbols 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. Read on for an explanation.
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, as shown below.
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 see only that Symbol.
When viewing a Symbol, you will see a small floating bar showing a breadcrumb path to the Symbol Library. If you have groups within your Symbol the breadcrumb bar will help you navigate back out of the groups.
The icon at the top of the list of Symbols allows you to choose whether you want to see all Symbols in the Symbol Library or the selected Symbol only.
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 easily 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.
Importing Symbols from Wireframes to Go
You can find the option to launch the Wireframes to Go browser window from either the Project > Import Controls from Wireframes to Go menu item, or the More Controls button to the right of the UI Library’s categories.
Once you have launched the Wireframes to Go window, you can either browse for Symbols to add to your project, or search for them.
When you have found the Symbols you want to add, simply click on them. This will open them up, allowing you to take a closer look. To add them to your project, click the Import into Project button.
The Wireframes to Go Browser will close, and you will see a little toast message in the bottom right corner saying that the Symbol has been imported. You can double check by going to the Symbols View, and looking for the Symbols in the navigator. From there, you can view, edit, 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, of course, that any changes you make to your Symbols will update everywhere you use them. Read on to learn about 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 does what you’d expect it to do, it 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.
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 from one project to another. Here is a simple way to do it, using the JSON feature in the Export menu:
- Open the two projects and switch to the Symbols view in each one.
- In the source project, select the Symbol Library you want to copy or move.
- In the Project menu, select Export > Symbol Library to JSON… This will put a text-based representation of the Library in the clipboard.
- In the target project, create a new Symbol Library (remove any unnecessary content) and select it.
- In the Project menu, select Import > Wireframe JSON… from the Project menu.
- In the dialog that pops up, paste the content of the clipboard with CTRL/⌘+V and click the Import button.
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.
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.
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. Deleting an individual Symbol from a Symbol Library, however, deletes it permanently.Tip: You can hold down Shift or Control/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 (also available via the context menu) can save you time when creating Symbols or Symbol Libraries that are similar.