Getting Started

Before starting this project, I went through all our designs and created a list of commonly used styles. This allowed me to see everything as a whole and reduce the number of redundant styles throughout the system.

When creating design systems, I limit our color and text styles to make the overall system easier to understand. For example, over the years, I have learned that having text styles that span from 12pt - 72pt is only necessary if you have specifically designated use cases for each size.

‍

Atomic Design Thinking

To build any design system, the "Atomic Design" method is most used. This means starting with the most minor components, such as color, spacing, icons, and type, then slowly building up to larger modules. Below is a small example of a few of our building blocks and how they are used to create a more significant component.

‍

‍

Building the Library

Once I had a general sense of the styles I had to work with, I began building the atoms and molecules of the system. The entire library consists of hundreds of components and modules we continuously iterate on and add to. Below are a few examples of various components that help make up the Yat design system.

‍

‍

‍

Variants, Options, and Usability

One thing that is very important to me when building design systems is making it easy for everyone to use, regardless of skill level. I do this by creating a master component and exposing nested options so everything can be easily changed using the side panel with little to no overrides.

The Devil's in the Details

Sometimes, it was imperative to have explicit instructions on how elements should be spaced out and aligned with other components. I created detailed examples of spacing requirements for larger components to make things easy for the developers.