Symbols are reusable and customizable elements that can be used over and over.
For example lets say we have 3 buttons:
They are all identical in layout, but the text and shape of the icon differ. At the moment these 3 buttons are independent of each other, if we wanted to move the text slightly higher we would need to do this for each button.
By creating a symbol we create the master version of the button, and then create ‘instances’ of it which we can modify, and any changes made to the master version are reflected in all instances.
The instances can still have customizable properties but will maintain the core features of the master symbol. A good example is the text of the buttons above, which the text on the instance can be changed, it will still maintain the spacing, font, size and colour of the master symbol.
Creating a master symbol
Create the elements of the master symbol, in this case a shape (which will be the icon) and some text:
Make sure to align the elements, select them both and click the
Group these 2 objects together (CMD+G) and give the group a meaningful name:
With the group selected, click on the ‘Create Symbol’ button in the toolbar:
Make sure that the ‘Send Symbol to “Symbols page”‘ option is checked and hit ‘OK’ (Notice that sketch has used our group name by default):
The “Send Symbol to Symbols page” option tells sketch to add this symbol to a page that you can access your sketch project.
The group icon will then change, confirming that you have created a symbol:
Customizing a Symbol
Let’s explore how to customize this symbol.
Select the symbol, in the properties on the right hand side you’ll see a ‘Symbol’ section:
The dropdown is defaulted to the currently selected symbol, but you could change this if you had more than 1 available.
Below is a section titled ‘Overrides’, which lists the layers which are available to edit in instances of this master symbol.
Let’s create some more buttons, duplicate the symbol and align them however you wish:
Override the text of the 2 new buttons to something we can use:
Updating Global Properties
Now that we have 3 symbols created, lets start making changes that will impact all 3.
Double click on one of the instances to enter the symbols page:
Double click on the text until you see the text properties panel on the right of the workspace:
Now make a change to the text properties, I’m going to change the colour to blue. Once you’ve updated your text, click ‘Return to instance’:
The changes made to the master symbol are not reflected in every instance of the symbol:
Adding on/off state text styles
Often, navigation’s and menus have different styles for different states, for example on or off, hover or inactive. We can include these in our designs by creating text styles within our master symbol.
Double click on an instance of your symbol, and select the text in the master symbol:
We’ll consider they text style that we already have to be the on (or active) state, expand the dropdown under the ‘APPEARANCE’ section of the
Enter a relevant name and hit enter, this new style will be added to the appearance dropdown:
Now create a new style for the ‘off’ (or inactive) state, save it to the appearance list in the same way:
Now if we return back to our instance, you’ll see a new dropdown in the instance properties, that allows you to select one of the text styles we defined in our master symbol:
Let’s apply the ‘Off’ state to 2 of the buttons, you can select multiple instances of the same symbol and apply shared properties:
Symbols within Symbols
So we have 3 instance of a symbol on our workspace, each with different text, but they still have the same square icon. We will now be looking at how to change the icon in each instance of our symbol.
Switch to the symbols page to reveal our original master symbol:
Select the rectangle and click ‘Create Symbol’, give it a good name and click ok:
The new symbol will be added to the page, and the symbols panel:
Select the new symbol and press CMD + D to duplicate it:
Update the naming and change the icon for another shape:
Repeat this process for the final icon:
Now lets go back to our 3 instances in our design:
Select the ‘Products’ instance and take a look at the properties, you’ll notice that there is a new ‘icons’ section:
(The section is titled ‘Icon home’, which it shouldn’t be, no idea where I went wrong, apologies)
From here you can select the icon to use in this instance of our symbol:
Summary
In this post we have discovered:
- What a symbol is
- How to create a master symbol
- How to create instances of a symbol
- How to customise symbol properties
- Nesting symbols within symbols