Working With Sketch Symbol Overrides: 3 ways.

Verizon Design, CX Platforms App Team: Brandy Bora, Ori Statlender, Christine Phan, Kevin Young, & Jackie Colognesi.

What’s the best way to work with overrides in Sketch?

We’ve been tackling this question lately at Verizon Design, where we’re in the process of renovating (if you will) the design system for our My Verizon app.

Our original design system was built in an older version of Sketch, before overrides were a thing. This meant that every. single. possible. combination. of components and styles had to be drawn as a distinct symbol.

The result? A bloated system with THOUSANDS of symbols. It was overwhelming and difficult to navigate. Designers, unable to find what they were looking for, often “went rogue” and created new, bizarro variations of symbols that didn’t fit the system.

Just a small sampling of our original design system. Over 230 List items.

The design system also came with a totally non-intuitive naming system and no nesting.

An example of combinations of nested symbols (in this case, text and actions).

We’re interested in using overrides to reduce the frequency of symbol breakage, to help designers learn the correct combinations of components, and to reduce the overall number of symbols.

As we refine and rebuild our components, we’ve been experimenting with three different approaches to working with symbol overrides in Sketch. Each has its pros, cons, and relevant renovation metaphor.

Here’s what we’ve found so far:

Method 1: State Swap (Old cabinet, new knobs)

This is the most straightforward approach to overrides. In this swap, you’re simply replacing one state of a symbol for another. We’ll use this for simple state swaps like the toggle below.

Example of a symbol override for swapping states.

At its core, it’s an easy way to make a change. Like when you want to re-do your kitchen but resign yourself to just painting the cabinets. Same item, different state.

That cabinet looks fresh though. (Credit: ATD Painting)

Pros

• No distortion of symbols when swapped.
• Should prevent unnecessary symbol breakage.
• Very easy to figure out.

Cons

• If you need to make a lot of symbols, this method won’t necessarily reduce the count.
• If you have symbols that are the same size, this may allow designers to use the wrong combinations.
• Did you even like those cabinets?

Method 2: Artboard Override (The Ikea Hack)

It’s easier than this. We swear.

Sketch only allows symbol overrides for artboards with the same dimensions. But what if you need to swap out symbols that are different in size or shape?

You can create a potentially more streamlined Sketch document by placing instances of symbols on same-sized artboards.

An example of “The Ikea Hack” where different shaped icons are placed on the same size artboard so they will be available for override within the nested component.

We think this works really well for symbols that use different icons in the same layout, as we’ve demonstrated above. Just swap out the symbol you need like you’re building a modular VIMLE sofa.

What to do:

1. Draw an artboard symbol that nests within another symbol’s layout.
2. Place your content on that artboard based on where you want it to appear in the final symbol.
3. Repeat that for all content that you would like to be able to override.

Pros

• Perfect for working with icons.
• No breakage. No distortion.
• Potentially more flexible swapping.
• Can help ensure that objects are correctly aligned within an available image area. Ex: Icons are always horizontally aligned within the available space.

Cons:

• Potential confusion about content layout. Subcomponent symbols that require unique placements (as seen below) will need hyper-specific rules per symbol, which can be challenging to maintain.

Inconsistent placements can create confusion as to how objects typically align in an available space.

• You may end up with a lot of layout-specific symbols. Since we want the overall number to drop, this method may just displace the total count to the nested symbols.

Method 3: Symbol Overlap (The Kon Mari)

This method looks crazy! Much like Marie’s Kondo’s method of piling all the clothes you own on your bed to sort out what you really want to keep, it can seem like a messy way of creating a simpler system.

If your symbols don’t spark joy, dismiss them.

But trust us. Having everything in one place makes it easy to find what you need. This method helps us dramatically reduce the overall number of symbols in our system. We will use this for components with different input options. Marie Kondo would be proud…does she have Sketch?

What to do:

1. Place all your acceptable overrides on top of one another in a stack.
2. Turn off the ones you don’t want per instance. Try to place them in an order that works for you (e.g., most commonly used first or left to right) so your overrides are easier to work with.

An example of a nested symbol component with all the possible actions overlapping. Don’t forget to thank all of your symbols as you dismiss them!

Pros

• Very obvious which symbols are acceptable for a given component.
• Reduces the amount of unique symbols created and managed.
• Helps us with naming. This is important when working with enormous design systems like ours.
• Good for visual components like icons, logos, inputs, etc.
• Helps organize by category (Like the Konmari method).

Cons

• Looks crazy, inelegant, not-smart, and any other pejorative.
• Needs some planning.
• Not good for text symbols. Impossible to read/see what you need.
• You’re still mad about that time Marie Kondo said you should have no more than 25 books. That’s not what she meant, guys.

Conclusions

There’s no one way to do overrides in Sketch that will work for all of your symbols. Our system is ultimately going to use a mix of all three approaches. We’re testing our new design system with our teammates at Verizon Design as we build it, and will be continuing to refine the system based on the feedback we get.

References:

Symbol Best Practices (now that nested overrides are a thing) @llyod

Sketch announces better ways to manage overrides in Sketch 53 @sketchapp

All of Marie Kondo’s life-changing work @mariekondo