Sketch symbol best practices (now that nested overrides are a thing)

At Tradeshift, we’re beginning to maintain a central Sketch document with all our symbols. In order to be added to this document, a symbol needs to be of a certain quality. Everyone designing for us (and potentially our partners) will make use of this document, so we don’t want to be distributing anything but the most solid symbols.

Symbols should behave in similar ways, be small enough to be modular, be large enough to be useful, and be organised well for easy editing (or embedding in a document when detached).

Nobody likes to inherit a poorly organised Sketch file, so let’s not distribute poorly organised symbols.

Create the most basic component you can

Nested symbols make this a bit more of a nuanced affair, but use your common sense and you’ll create powerful, maintainable symbols.

Be smart about splitting Symbols up & combining them for easy manipulation

Naming your symbols

Sketch automatically organises Symbols into folders when you put a / in the name:

Input field dependencies are tidied away in the /in/ folder

I recommend a control/definingproperty-state naming convention. Default states shouldn’t have a state — tab-inactive and tab-active is redundant. tab, tab-active is the way to go. Your names shouldn’t be too tightly tied to a controls physical attributes, since they’re likely to evolve.




Denote nested symbol dependencies

Organised symbols make your life easier

Naming your layers

Text is especially important. Ensure that nested symbols you’ll regularly replace (i.e. for different states) have the same text layer names. If you replace a symbol, it will persist any override text if it shares the same text layer name.

You can rename instances of symbols and it won’t affect the link to the original. As such, I’ve taken to naming instances of symbols with lower case text, and text that they edit as all caps. This is just a matter of preference.

Layer hierarchy

Symbols will be reused, detached and remixed — they should be really well organised, so anyone can quickly understand what’s going on when they look under the hood.

Your layer hierarchy is reflected in the overrides panel. If your parent symbol has nested symbols which would be edited in a logical order, make sure the overrides panel reflects that.

Using nested symbols in the override panel

all these icons share the same dimensions

It’s really powerful for changing states, too:

By using nested symbols, you can create super flexible controls that mimic their possible states in any UI library you might be using (like our UI Component library at Tradeshift)

These are all the same symbol:

The same symbol with various overrides enforced

Bulletproof resizing

Play with them, test them, try to break them. Build something bulletproof! An extra few minutes of your time to perfect the symbol will save headaches down the road and make everyone who has to use and maintain your symbols happy.

Check out Peter Nowell’s Resize Cheat Sheet

Miscellaneous tips

Text should be fixed

Placeholder text is an opportunity to reinforce best practices

Design the smallest version of a symbol

Replacing symbols

Use alt+enter to insert a line break on nested text objects

Lock nested symbols to prevent them from appearing in the overrides panel

Symbols should be self-explanatory to use

Example files

Leave a comment or @Lloyd on Twitter with any feedback or ideas for v3.

We’re also hiring at Tradeshift! 🚀

Product Manager at Tradeshift in Copenhagen

Product Manager at Tradeshift in Copenhagen