Getting the most from your Sketch design toolkit
Like other companies with a centralised Design System and style guide, our Tangram design toolkit was created to solve inconsistency problems within our design files and to speed up the design process. One of my tasks as a Summer of Tech intern at Trade Me was to update our design toolkit resources.
While using Sketch alone was fine, it wasn’t as streamlined as we hoped. By adding in a healthy dose of plugins, we have been able to level-up our toolkit.
Symbolizer, symbolizer
I was updating resources which were made before Sketch had added symbols, so my first job was to investigate the best approach to symbols and how to structure our toolkit wisely. Recent symbols and resizing rules within Sketch have made it much easier to control consistency, but my first attempt at setting the symbols up was overly complex, which negated the power they were intended to bring.

I’d fallen down the rabbit hole that is the nested-symbol-functionality. I had tried to pack all the different options for a component as overrides in one symbol. Designing with the symbols in this way didn’t actually speed up the process, and I found that having to set all the overrides took longer than searching through a list of symbols to find what was needed.
However, I did learn how the resizing rules to mimic responsive elements work, and when to ‘pin to corner’, ‘stretch’ or ‘resize’ the symbol. A big thanks to these super-great articles on Sketch that helped make sense of it all: symbols, resizing, adaptive text, right-hand pinned icons and nested symbols.
My second attempt at symbol structures was much more balanced; a list of high-level symbol options and a concise list of overrides, which is much more efficient to design with.
Plugins a’plenty
Once we had a good foundation with well-structured symbols, we could leverage plugins from the Sketch community to make our toolkit even more useful.
BoundingBox
Part of our design system is consistent default spacing between elements –including the spacing in the symbols. It makes it easier to move symbols around, and allows them to be placed flush together on the art board. This reflects the behaviour in code, without any effort from the designer.
BoundingBox visually shows the spacing related to a symbol, which is really useful when resizing and placing symbols. It was easy to set up with a simple layer naming convention.
RenameIt
Sketch symbols can be organised by using slashes to create folders, and I was often renaming large batches of symbols at once to group them. This would take ages by hand, but using RenameIt had it done in a flash, and this is especially useful in the setup stages of the toolkit.
Craft vs. Brand.ai
We wanted a way to share our common styles, colours and typography. We started with using Craft to store symbols, however we eventually arrived at using it only to share colours and type styles. We’ve recently started to use Brand.ai, which is looking promising as a more comprehensive centralised library system.
Sketch Runner
Sketch Runner is a real favourite with the team! It allows you to skip all of those pesky dropdown menus by simply searching for the symbol you need. Runner allows us to hide the nested parts of a symbol by using a simple prefix in the naming.
Animas Auto-layout
The latest addition is the Animas Auto-layout plugin. We use it in card symbols to keep image ratios fixed. The ‘stacks’ function means that text can wrap to mimic flex-box implementation.
The resulting toolkit makes the design process easier and more efficient for the team. I learnt so much during my internship and consider all the skills I gained highly valuable. I thoroughly enjoyed my time at Trade Me and I’m so grateful to the Tangram team and all the designers for being such a supportive and generally awesome bunch of people to work with!

