The 10 Commandments to Use Symbols in Sketch

Improve your UI design systems using symbols correctly in order to gain in efficiency

Published in

Blog de Interactius UX

7 min readFeb 28, 2019

[Updated on March 2019, it was originally written in Spanish a year ago]

The ultimate Sketch features let us carry on improving our processes and automating the actions to invest more time designing than applying the same changes to the same kind of elements. In that sense, the new features have been including the symbols and it changed the way of designing. Down below, I introduce 10 tips to make the most of those symbols.

1. You shall love the Nested Symbols

This feature appeared a long time ago, but it’s still getting better. The Nested Symbols are symbols that contain symbols (and the last ones can also contain other symbols). This combined symbols’ aim is to modify the affected symbols simultaneously when you modify a common element. This function offers more possibilities that we are going to check later.

2. You shall not create the name of the Symbol in vain

Use a system to name the symbols with coherence (terminology, language, upper/lower case use, …) and to be easily identified later.

(Even IKEA has a system to name its products…)

Another recommendation is to use generic names, instead of a visual description, especially when the design is not closed yet and it can be affected by changes. For example, the main color property is better to be named “…/Primary” rather than “…/Blue”, because the last one can be misleading if one day it’s necessary to change that blue for another color.

In addition, creating generic names that define a function, is also useful when you have to distinguish the states of that element. For example a button with the states: …/active, …/hover, …/pressed and …/disabled.

It’s recommended to name the items from the most general section to the most specific one, separated by slashes ( / ) to be organized as shown in the next section.

Meanwhile, within each concept, the dashed are preferred over spaces regarding the separations.

For example: button/medium/double-icon

3. Remember the organization, to keep it holy

As commented on the previous section, the use of the slash / creates folders to classify the elements and then maintain a better organization for the symbols.

Each “folder” can have unlimited sub-levels but it’s recommended to have only the indispensables (a maximum of six).

Every designer is going to have his own order preferences and there’s no unique formula. But the organization must be coherent and the groups that divide colors, buttons, icons,… have to exist to maintain order.

Once created these folders, using the function Insert>Symbols a treemap is going to be shown the efficiency of the organizational structure and the time that is needed to find what the designer is looking for.

4. You shall worship overrides

This feature is really useful to manage and edit the items that are composing a symbol and avoid creating different symbols because an element could change depending on the context.

For example, if we have a button that can suit different icons, text, color or state. We only need to go to the Overrides inspector panel to apply the modification without the need to detach the symbol.

We have to consider the way to use them, in order to have a cleaned up file, by following the tips that appear in the next sections.

And if your list of overrides gets messy, go into your symbols and lock layers to keep them from appearing there.

5. You shall name the layers correctly

The layers also require a clear understandable name in order to be easily identified when we are looking for it to apply changes.

A usual trick is using emojis to highlight which of them are required to be edited (for example, adding a pencil ✏️ before the name). To do it, press Control + Command + Space to open the emoji panel on your mac and select one of them.

For example: ✏️ Text ,🎨 Color, ⭐️ Icon , 🔗 Link …

6. Honor your layers’ hierarchy

Furthermore, the layers order within the symbol is also important, because it will affect the order in the Overrides panel.

As shown in the following images, it’s going to match the position of the elements while including the override options of the symbols involved.

7. You shall create replaceable elements

Creating symbols with exactly the same size means that they are going to be replaceable during the override modifications.

Therefore, it’s recommended that same kind of symbols maintain the same size, and avoid sharing that size in other symbols (as far as possible).

8. You shall prepare symbols for resizing

Many times symbols need to be adapted to different sizes, but after doing it, take a look to the resize panel to adjust the behavior while resizing.

This section is really complex, but also important, to make the symbol work. So, down below, you have a link to an article wrote by Jon Moore that explains it really well.

Sketch 44 Resizing: How does it work???

It’s new! It’s intuitive! It’s better! It’s extra-stretchy!

medium.com

9. You shall adjust symbols to respect every padding

Often the symbols are elements that must have fixed paddings of N px, and for example, when the element has a text that changes the length of the box is also affected.

There are different tricks to control the paddings needed in the elements. One of them consists in having “guide” layers in order to have desired space references, hiding these layers when we have finally placed the element. To do it basically takes having these layers located and using the resize adjustments mentioned above correctly. Take into account that if we need a % the option Fix With is going to be deactivated and if the padding is fixed in px it must be activated.

But if you need something automatic you can use this trick explained by Travis Folck:

Create Adaptive Buttons Using Combined Shapes In Sketch

Learn how to use the combined shape method in Sketch to create buttons that responds to its override text length.

medium.com

10. You shall not unlink symbols

The option Detach symbol let us convert a symbol to an ordinary group of elements in order to apply individual modifications. The best option is to use all the previous features to avoid using this option, and then not losing the symbol properties of the element in subsequent changes.