How to build a design system in Sketch · Sketch Blog

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.
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.
You can find all of Apple’s Sketch resources here.
You can use Libraries to create a source document to store your components such as Symbols, Color Variables, Styles and frame 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 read our docs.
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 frame 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 frame 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.
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:
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.
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.
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.
With Sketch, you can use Stacks to add internal logic to your designs. Stacks help you define the spacing between layers inside a frame — so everything stays aligned, evenly spaced, and easy to manage as your content grows or changes. This makes it simple to maintain structure and consistency across your designs, while reducing the need for manual adjustments.
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.
Get all the latest news, blog posts and product updates from Sketch, delivered directly to your inbox. We’ll rarely send more than one email a month.