Symbols allow you create reusable common elements across different mockups. Other software often refers to this same feature as templates, master pages, custom components, or widgets.
Symbols in Mockups are simply named groups which have been “converted” to symbols.
Symbols can be made from existing groups, or from ones you create fresh. The following steps assume you are creating a new group.
- Select the controls you want to group
- Group your selection (select Edit >Group or CTRL/CMD+G and the group will turn a bluish color)
Name the group (e.g., login form)
Save the file with the new group (the file must be saved to convert a group to a symbol)
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. This new Symbol (named, for example, “login form”) will be displayed in the Project Assets tab of the UI Library. You can also add the Symbol via Quick Add.
Overriding Symbol Properties
Once you have created a symbol, you will often 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. Same goes for which page should be shown as current in your navigation bar.
Symbols allow you to achieve this result by letting you override symbol properties each time you use a symbol. To do so, start by double-clicking (or hitting ENTER) on a symbol to “enter it”.
Although this experience is very similar to editing a group’s contents, you will notice that Mockups warns 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 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.
Editing a Symbol’s Source
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.
To edit a Symbol’s source, you need only open the Symbol Library and edit it normally, just as you would edit a group.
Save your changes, go back to a mockup that uses that symbol and notice that your changes have been applied, just like that!
There are a couple of shortcuts in the app that help you reach a Symbol’s source in order to edit it:
You can select a Symbol instance and hit the “Edit Source” button in the property inspector.
You can enter a Symbol for overriding, then hit the “Edit” button there.
A Symbol Library is a collection of symbol definitions. You might want to create a Symbol Library in order to share common controls with your team.
To create a Symbol Library, you can either create a symbol (which will automatically create a library) or select Project > New Symbol Library from the menu.
Sharing Symbols across Projects
If you would like a Symbol Library to be used across all projects, you only need to upload the library to your site assets.
To do this, you first have to download the library from your project assets.
This will download a .bmml file to your computer. Take that .bmml file and upload it to your site assets.
Doing this will allow that Symbol Library to be accessed across all your projects!