Jun 26, 2017
Harness the power of symbols
A tutorial for consistent design in Sketch
I wanted to share a process, or rather a technique that’s been really successful for me for system, web and product design. At the end of this article I’ve provided a free Sketch file you can download, dig into and understand what I’m sharing here.
Below is a basic demonstration of what we’re going to create. We’ll also look at a useful technique I call ‘variable symbols’. The example shows a simple form, but these principles can be applied to any system component, and even larger patterns. The idea is to provide quick and easy access to all components, and all of their states.
The problem: Inconsistency
Design teams working on the same product(s) commonly run into the same problems. Does this sound familiar:
- Designers re-create components (e.g. inputs, buttons) over and over,
- Which quickly leads to variations in the design (system).
- In time the team loses sight of what those components, and the wider brand and product(s) should look like.
- Developers get frustrated with designers for these inconsistencies,
- Or worse, they build the designs as they receive them (and why wouldn’t they), and the code increasingly gets bloated with rogue styles, naming conventions, components, colours and text styles…
Too real, right?!
The solution: Symbols
I believe the key to designing and building consistent websites, products and design systems is organisation. Fortunately, Sketch has many ways to keep organised — symbols are among the best of these methods. Symbols are particularly powerful for system design — to maintain consistent styles and UI components. And Sketch plugins like Craft Library or Brand.ai make symbols easily accessible by your team.
A good design system should cover all components and all of their states (e.g. placeholder, value, hover, focus, error, disabled). Not only should you design each of these states so they can be built and documented, but having a symbol for each state (of a component) is also very useful for easy application when documenting a product flow or interaction, like below:
But what about when you have dozens of system components, each with several different states… You could end up with hundreds of symbols! This may seem hard to manage, but it’s not. Enter nested symbols and what I’ve been calling ‘control symbols’ and ‘variable symbols’.
Nested symbols
Nested symbols are symbols nested, or inserted within another symbol(s). I’ve been calling the parent symbol containing these nested symbols a ‘control symbol’. In the example above I’ve attempted to demonstrate how I set this up in Sketch. To the top-left are a couple of control symbols: One for a text input, the other for a checkbox and radio button. Each of those control symbols contain the nested symbols you see to the right. The text input control symbol has 7 symbols nested within it — each nested symbol represents a state for a text input (e.g. focus, disabled). And the checkbox/radio control symbol has 9 symbols nested within it — each covering every state a checkbox and radio button have.
Nested and control symbols make design system components really easy to access, use and update.
Update: 2018
Since writing this article, Sketch has improved how they handle symbols. Thus, the control symbol method below is now no longer needed! I’ll leave this section here, but feel free to skip to the next section on variable symbols.
Control symbols
Lets breakdown how a control symbol is made:
- The control symbol should be the same (px) size as the nested symbols you’re going to insert into it.
- Insert all nested symbols you want (e.g. component types and states) into the control symbol.
- All layers (containing a nested symbol) should be positioned in exactly the same position, for a seamless change between symbols.
- Hide all but one layer: The (first) layer not hidden is the nested symbol you want to be the default to show when you insert the control symbol into an artboard.
- Note: I renamed the first, visible layer to be “Type”, which Sketch uses as the label for a select to access all the nested symbol overrides. See below:
- Also note: All (related) nested symbols use the same label names for text (e.g. “Data”). This is so any symbol (text) override you make will be maintained, regardless of which ‘Type’ (nested symbol) you switch to.
- A control symbol’s only limitation is its (px) size. Each control symbol should only include nested symbols of the same dimensions, so you don’t get distorted symbols as you switch been nested symbols. For example, a text input and a radio button would likely not pair well. But a text input and a select (and all their states) make for a good control symbol, as do all button types. But remember, with responsive symbols you can also combine variable height inputs like a text input and a textarea!
Once you’ve set this up you’ll only ever need to add a few control symbols to an artboard, and quickly switch between all component types and states. Then just duplicate the control symbol to quickly build a UI.
Control symbols make designing a product flow very fast, and most importantly consistent.
Variable symbols
You may have noticed a few symbols under the heading “Variables” in my examples above… This is where we get creative with nested symbols! To explain: The behaviour of a symbol is not too dissimilar to how Sass variables work. As a web developer I love the organisation and automation of Sass. I believe any methodologies from development we can bring into design is a good thing — so I’ve been using [Sass] ‘variable symbols’ as ‘building blocks’ for symbols, for things that are likely subject to change (e.g. background-color, border-color).
In the example above, under the “Variables” header there are 6 (variable) symbols, all representing a different system colour. The nerds amongst you will notice the Sass variable naming conventions too (e.g. $blue50 to match the code). In this case, I’m utilising these variable symbols for the normal and hover state colour of buttons, but the same method can apply to just about anything, be it a background colour of a pattern, or the border colour of form fields (as seen in an earlier example image).
- You can see in the layers list to the left that each nested symbol has one of the variable symbols nested within it.
- Importantly, the layer (containing the variable symbol) is locked, so all variable options don’t appear as overrides for the nested symbol… unless you want that — in this example they are fixed to maintain consistent use of this component.
- Note: The size of the variable symbol isn’t important, since symbols resize responsively.
Now, I only need change the one variable symbol, and the change is reflected in all symbols using that variable symbol! The button example above is only basic, but imagine a border colour variable symbol used in dozens of form field symbols… A huge time saver, right?!
See how its done
Below is a link to a free Sketch file download (preview above), with a basic example covering everything in this article. I hope this helps :)
Update: 2018
I have created a Skillshare class on the basics of how to create symbols in Sketch, and how to share/sync them across files and with your design team.
