Build an efficient design system library in Sketch — Part 1 Color

In this article, we’ll look at how to set a design system library in Sketch and the useful organizing methods and techniques to ensure the design system library is easy to maintain and scale.

Every team has their preference for organizing their style library, and in this post, I’ll share how I do it. At the end of this article, I’ve attached a free Sketch file you download and dig into what I’m sharing here.

Design system 101: Reusability

The key to building a sustainable and scalable design system is reusability. Before we move forward to make the libraries in Sketch, there are some principles and methodologies that can guide us throughout the build process :

1. Don’t Repeat Yourself (DRY): This principle is a known mantra in software development. The idea is to avoid code duplication and replace reoccurring patterns with reusable abstractions. This principle is also extremely helpful in building design systems. Designers should create reusable components, which helps us keep our designs consistent and our file lightweight.
2. Atomic Design: I am following Brad Frost’s Atomic Design for constructing and organizing UI components. In a nutshell, Atomic Design helps us think of user interfaces as a composition of independent modules put together, just as all matter is composed of atoms and molecules. In atomic design, Atoms are the smallest functional unit of a user interface, such as buttons, labels, input, etc. When combine, Atoms form Molecules, the larger and more interactive parts of the interface. In the next stage, Molecules make up Organisms, which are more complex and reusable components that we can put into a broader context.

Brad Frost’s Atomic Design Methodology

1. Extend Atomic Design with Subatomic Thinking: Subatomic Design digs one layer more in-depth into the Atomic Structure by introducing “subatomic particles.” In detail, particles are abstract visual attributes that make up all atoms, molecules, and organisms, such as color, type, spacing, etc. As developers might store those reoccurring attributes as SASS variables to reduce code duplications, we designers can do the same thing by using the Library, Shared Layer, &Text Styles, and Color Variables in Sketch to help us build a consistent UI library.

An example of reusable attributes of a button element in SASS and Sketch

1. Conduct an interface inventory

Bob Faust, the author of Atomic Design, defined the interface inventory:

“ An interface inventory is a comprehensive collection of the bits and pieces that make up your interface.”

Creating an interface inventory is the first step to build an efficient design system. It’s tedious to conduct a design audit and make an interface inventory. However, the hard work will pay off: an interface inventory will expose the inconsistencies and redundancies in our design and lay the groundwork for a cohesive design system.

In the next section, we will start establishing the colors in our design system. Why starting with colors? Because colors are one of the essential visual properties that affect every design system library components. Below are some important terms of building colors in a design system.

Glossary of Terms:

1. Color palettes: In the design system, a color palette refers to a full range of prevalent color choices in the UI.
2. Color swatches: A sample color and its derivatives usually include dark and light variants of the sample color.
3. Theme: Color themes are product-specific color decisions that have clarified usage, such as colors for backgrounds, typography, and iconography, etc.

2. Structure essential color palettes

Colors in a design system require structure. If you don’t structure colors, they can quickly slip out of control: you will be surprised by the number of colors you use and the inconsistencies that exist by the time you reach the end of the project. Thus, it’s good to have an organizational framework in mind when defining UI components’ colors.

When it comes to color organization, I break my colors into basic color palettes and themeable colors.

Basic colors VS Themeable colors

Simply speaking, basic colors are the color options offered in a design system. They are composed of color swatches designed to maintain our brand personality throughout the UI, a neutral color swatch that plays a supportive role in our UI, and an alternate color palette for data visualizations, such as charts and graphs.

Themeable colors consist of color decisions based on the basic colors to define a product’s theme. A themeable color system can help us restrict the total number of colors used in our design to ensure a high-level consistency between products. Also, it provides a framework that guides users to customize the colors for their products.

Themeable colors include:

• Primary, secondary colors and their derivatives
• UI state colors
• UI colors affecting all UI details that don’t represent the brand, such as colors for backgrounds, fields, typography, and iconography.

3. Organize colors in Sketch

Now we can begin organizing colors in Sketch. First, we need to create a Shared Layer Style for each color we have in our design system and structure them according to the method mentioned earlier. In Sketch, we can manage the style structure by adding a “/” between each category.

For example:

• Basic color swatches: color / blue / blue derivatives lightness
• Themeable colors:
• theme / interactive-01
• theme /ui colors / field-01
• theme / ui colors / text-01

Then we’ll use “Create Symbol” to convert each color style into a Symbol. After this step, you should have the colors clearly labeled and organized in your Sketch file’s Symbols and Layer Styles section.

Nested symbol styles in Sketch

💡Pro-tip. To make this UI library more helpful for other designers to use, you might also want to create a master page that documents the colors and explains their usages. This documentation helps communicate our color system to potential users and offers efficient access allowing future users to customize the color system based on their needs.

Color master page in Sketch

4. Turn the color document to a library.

Next, we need to turn our document into a Sketch library. This step allows us to share the sketch library and later release updates within a team. You can upload your file to the Sketch Cloud and then authorize your file to be used as a library.

To use the color library in other Sketch files, go to Sketch > Preferences, then click on the “+” button to locate the new library file. Now we can start building atomic components using this Sketch library!

See how it’s done

Below is a link to a free sample Sketch file download covering everything in this article. I hope this helps you to see how I’ve set everything up.

https://dribbble.com/shots/14515242-Color-system-for-design-system-in-Sketch

Closing Note

We were using the Library feature in Sketch to set the foundation for building an atomic UI library for our design system projects. As I was writing this post, the newly released Sketch 69 included the Color Variables feature that empowers easy color updates and organizations across a document. Color variables will be another feature we can utilize to speed up our build workflow of colors.

If you are iterating your component library and need to maintain it to ensure it is effective, version control is another aspect you should consider for your project.

In my team, we are using InVision DSM to control and release new versions of our library. There are other design version control tools such as Abstract and Kactus that help the challenging process of maintaining a design system. If you are looking for free version control solutions and are comfortable with Git, you can also use Git and Github to store and share your Sketch files within your team.

That’s all! I hope my post is helpful for you to start building/organizing your component library in Sketch. Feel free to reach out if you have any questions or comments.

Thanks for reading!