5 quick tips when creating a Design System in Sketch

In this article I hope to bring you a few valuable tips for when you're building a Design System, or working with any large file in Sketch for that matter.

The tips compiled below I’ve used frequently myself, and I'm sure they'll also help you in producing cleaner Sketch files, as well as improving your workflow considerably.

Let's dive on in...

Rename, and organise those Layers often. Your sanity will thank you.

When you’re building your own System it really does pay to name your Layers as you go.

With an-all singing, all-dancing System, with its many Text Layers, Symbols and more… You’re guaranteed to end up with a ridiculous number of layers filling up your Layers List by the end.

Things can really turn into one long Layer List of confusion if you leave the renaming and organisation of Layers till the end of a project.

Back in the day, I used to sort out this layer spaghetti manually. Yeah, I’m one of the crazy ones. But now there so many great plugins out there that can help you quickly sort out the renaming and organisation of your Layers, and I’ll be touching upon these in the next tip.

Now, that’s not to say you should leave everything right to the end, and X plugin’s magical fairy dust should be sprinkled over your System, which it could, but to rename, and organise sections as you move along. Just small chunks at a time will ease the burden when you come to put X plugin to work.

Tab and Cmd + R are two of the most valuable shortcuts to know in Sketch. Use them. Frequently.

Plugins are your time-saving friend. Use them.

n the past, I’ve opted to do things manually, without the help of Plugins. What was I thinking? Like seriously!

I knew there were Plugins out there that could assist my workflow, and some of them I had used briefly, but then I decided to forget about them. Crazy I know.

Since I regained my sanity, I’ve used the following Plugins consistently when working on my own System –

• Rename It
• Sketch Cleaner
• Symbol Organiser
• Sketch Runner

The above-named plugins are massive timesavers for when working on your own System and come highly recommended.

Put them to good use folks.

Use Math when working with elements. It's quicker than using your brain.

Quick one this. Use Math as much as possible when creating your own System.

Don’t spend time resizing elements manually to fit into a certain element, and just freewheeling it with your measurement, or size estimations, just use Math in the Inspector and save yourself some time.

You want to be in full-on creative mode when building a large-scale Design System, and not trying to do sums in your brain.

Create Colours, and Typography first. Get the boring stuff out of the way.

Colours, and Typography are the backbone of any great System, and every other Component or Symbol that you subsequently create is going to feature these elements in some shape or form, so it pays to get these into place first, before you create anything else.

But, personal experience has taught me that these are also the most mundane, and energy-zapping elements to create.

Typography for me, personally, is the most unenjoyable part of creating a System. You have to create multiple Text Styles to account for various Colours, Text Alignment, Weights etc…, and as we all know there is still no streamlined way of completing this laborious exercise in Sketch.

So, my advice to you is – get the boring stuff out of the way first and then you can get onto the more fun stuff. Simple as that really.

Use hyphens in your Text Styles naming. Honestly, they really do help.

Yes, the lowly hyphen can do wonders with the naming of your Text Styles.

I’ve done this since the 1st version of my own Design System, and continue to do so. It allows you to easily create a hierarchy in your Text Styles menus, and to select elements in a more efficient way.

For example, with Heading choices available in the Text Styles menu, I will give prominence to the Bold weight via the naming convention of /- Bold, so this will be the first available choice versus Regular set at /–Regular.

This just makes sense. When it comes to Headings, 90% of the time you’ll be wanting to use a Bold weight, whereas on the flip side of this, for something like Body text you’ll be looking at using Regular as your first choice.

Using the Hyphens, be they a single or double hyphen, will allow you to give prominence, or not, to certain styles. Simple as that really. Nothing too revolutionary here, but a handy little method of doing things nonetheless.

I know from personal experience that implementing the tips that I’ve just mentioned will improve your workflow considerably, and keep your frustration levels to a minimum when working on your own large-scale Design System in Sketch.

Put them to good use. Your sanity will thank you.

Thanks for reading the article,
Marc.