How to build a design system in Sketch

Great design is often a byproduct of great collaboration. But when it comes to big projects like brand guidelines or product redesigns, you need an extra communication tool in your arsenal. Design systems are just that, a way to make sure everyone’s on the same page and executing the same vision.

Today, I’ll show you how to set up your own design system in Sketch from start to finish.

Let’s dive in! 🪂

What is a design system?

Before we get started, let’s quickly recap what a design system is. In essence, it’s an agreement between you and the rest of the team, including developers and product managers. Design systems help you create cohesive and scalable products with a shared set of design guidelines, components, and styles.

How to set up a design system in Sketch

You can use Libraries to create a source document to store your components such as Symbols, Color Variables, Styles and Artboard templates. They’re the foundation of any design system built in Sketch. If you need a refresher on Libraries or are new to Sketch, we encourage you to check out our Sketch 102 lesson on Libraries — it’s free!

Basic components

The main goal of a design system is to create something scalable that works for everyone. To that end, it’s better to start with the most basic elements and grow from there. You’ll first want to define your Color Variables, Text and Layer Styles, which you can base on your brand identity or project, depending on your design system’s scope.

Once you’ve got your basic components ready, you can use them to build more complex components like Symbols and Artboard templates.

Symbols and Artboard templates

Symbols are the core of any design system in Sketch. They’re great for creating reusable components with varying degrees of complexity. And while having the freedom to edit Symbol instances to our heart’s content is one of their benefits, how can we make sure we stay true to brand?

This is where applying Styles and Color Variables to your Symbols comes in handy. You can easily swap between styles and colors using Symbol Overrides without making any changes to the parent Symbol itself. For example, you may want to use two Color Variables to differentiate between active and inactive buttons. Or you might want to change Text Styles for copy of varying lengths or prominence.

Following the same logic, you can use Artboard templates to hold many Symbols like navigation bars or logos. These templates can serve as your screens and you can reuse them and update them in the same way as Symbols.

The more you rely on Text Styles, Layer Styles and Color Variables the easier it will become to manage and scale your design system. This way, you can change the entire look and feel of an app’s design with just a couple of adjustments — all while following the project or brand’s predetermined identity.

Bringing it all together

Let’s look at an example of how we can bring all of our components together. Here are the steps I’d follow if I wanted to design a landing page with a search box:

• Create Color Variables for icons and text fields.
• Create icons as Symbols and apply the Color Variable.
• Create Layer Styles for fields using the Color Variables.
• Create text form fields as Symbols.
• Create Text Styles for placeholder text.
• Create a Symbol for a search field using the search icon Symbol, the text field Symbol and the placeholder Style.
• Add the search field Symbol to the landing page Artboard and set it as a template.

With this approach, if you need to change the color of that text box, it’s just one change to the Color Variable. You could also change the Style of a placeholder text once and apply it everywhere. Laying the groundwork makes iterating and scaling so much easier later on.

Taking your design system to the next level

As I mentioned, design systems are a lot more than just a collection of components. They speak directly to the needs of a design team or project by setting the right rules and guidelines in place.

A design system should answer questions like, “How do I apply this Style?” and “How do I use this component?” That way, everyone in your team will be able to make aligned decisions without needing to sync on every step.

Guidelines and agreements

There’s no right or wrong way to include guidelines and agreements in your design systems. The best practice you can apply here is settling on some ground rules with your team. That means bringing in devs, project managers and any other stakeholders who will end up interacting with the designs you create.

Guidelines don’t have to be limited to design, either. You can bring in your UX writer and establish a UX copy ecosystem right off the bat. You can also establish some ground rules with your devs so that you’re building out the design system in a way that’s most helpful for handoff.

Don’t forget spacing

With Sketch, you can use tools like Smart Layout to assign an internal logic to components. Setting up spacing rules is important to help you keep a defined grid that will make your designs look cohesive and balanced.

Smart Layout allows your layers to expand or shrink automatically in proportion to their content, directly communicating how you expect designs to behave in terms of margins and proportions.

Overrides

Don’t forget that you can override text, styles and colors in your Symbol instances. Overrides give your design system incredible flexibility and makes customizing Symbols a breeze. It’s one of the most useful tools you could have at your disposal.

Additionally, you can specify which overrides will be available for each component in Sketch. This gives design system managers greater control over how components and Symbols behave, all while preventing less familiar team members from implementing results that don’t follow the design system rules.

Design systems are at the heart of every great, scalable project. So one post isn’t enough to cover it all! Stay tuned for the next installment, where we’ll be discussing how to organize design systems in Sketch.