Sketch Best Practices for Professional Design Teams
By: Michael C. Albers
Tags: Designops, Design Process, Design, Design Systems, Sketch

Symbols

Use Symbols, Overrides, and Nested Symbols

Symbols provide power and flexibility. Symbols allow design object reuse throughout a document.

Symbol Overrides provide customization for symbols while maintaining the master symbol’s core design. Common overrides include custom text and icons. Layer and text styles provide powerful override options. For example, override layer and text styles to show different states of the same object.

Nested Symbols provide enhanced power and flexibility. Create a nested symbol by placing a symbol instance inside a master symbol. Along with simpler properties, symbols can be overridden. A nested Symbol can be overridden with another Symbol that is the exact same size. Swapping out an active icon for a disabled icon is a prime example of a nested symbol override.

Symbol Naming and Organization using “/”

Like layer and text styles, create groups of symbols by placing slashes ( / ) in their names. Sketch’s UI displays submenus for these groupings. Providing this organization guides designers to the symbols they desire and reduces UI clutter.

From Sketch

Create the Simplest Symbols

Always create the simplest symbol possible. To build complex symbols, decompose complicated symbols into their component parts. Create each part as its own symbol and combine them into a nested symbol. Overrides and nested symbols result in fewer symbols and more maintainable symbols.

Symbol Override’s Naming

A symbol’s overridable layers appear in the Inspector’s Override panel. Choose a layer name that describes the layer’s purpose. For example, use “Label” as the layer name for a button’s text.

It is important to coordinate layer names for symbols that will be swapped out for one another. For example, use the exact same text layer names for “Button/Pressed” and “Button/Hovered” symbols. When swapping these symbols for one another, Sketch will keep the text label override.

From Sketch

Explicitly and Correctly Set a Symbol’s Overrides

Any text, image, layer style, text style, and nested symbol in a symbol can appear as an override. But you will not always want every possible override to be an override. Manage a selected symbol’s overrides in the Inspector. Decide which overrides to make available to designers utilizing the symbol.

From Sketch

Make Overridable Symbols the Same Size

Nested symbols allow designers to override a symbol with another symbol. Both symbols must have the same exact width-by-height dimensions for this to be an option.

Icons are a common symbol type to override. Create standardized groupings of square icon symbols with the same dimensions. (The icon symbol’s contents do not have to be square but the symbol itself does.)

From Sketch

Create a Clean and Consistent Overrides Panel

The list of items in the Inspector’s Overrides panel appears in the order they appear in the Layer list. Organize the layers in the order designers expect and find most useful.

Create the Tiniest Version of a Symbols and Test It

It is common to resize symbols for specific needs and circumstances. This is especially true for Nested Symbols. When creating a symbol, take care to align and distribute a symbol’s layers to ensure the symbol resizes as expected. Create the smallest reasonable symbol and test how it responds when made taller and wider.

Consider having a specific quality page for symbols. Use this page for symbol instances that are taller, shorter, thinner, and wider than the master symbol. When updating symbols, check the quality page to ensure the symbol is resizing as desired.

Use Generic Placeholder Data

For overridable symbol layers, use placeholders that remind designers of the override’s purpose. For text, use a word or two signaling the expected phrasing. For images, use a generic image that reminds designers to override it. For layer styles, use a fill that stands out like magenta (#FF00FF) or chartreuse (#7FFF00) to remind designers to override it.