Design System 101: How We Built Ours?

When it comes to design, there are many different ways to try to organize resources. The most commonly used, however, seem to be style guides, pattern libraries, and design systems.

Style guides document design elements and how to use them. A style guide can also include rules for using certain elements and is more like a collection of all design elements.

Pattern libraries define user interface components, how they behave, and how they should be implemented. While a style guide focuses on how things look and where they can be used, pattern libraries act as a repository for UI / UX elements.

Design systems are all-encompassing and can be a bit more abstract. They can consist of both style guides and pattern libraries, along with other things such as documentation, procedures, code snippets, brand guidelines, workflows, and rules. A design system is a more holistic approach to design and is often design combined with engineering.

In short, style guides and pattern libraries are sub-elements of design systems. A design system is a much bigger structural framework that defines how visual designs work within the technology used.

The first thing we did was audit all of the reusable components found throughout our product. This included things like icons, buttons, colors, fonts, and more. By cataloging these different elements, we could discover design inconsistencies and think about how we could change things to make them more consistent.

For example, below is a look at the various button styles we had before we created our design system. We used a wide range of styles, colors, sizes, and corner radiuses.

If you’re new to design systems like we were, creating one can seem like a daunting task. Fortunately, many companies and designers have already come up with elegant solutions on the best way to approach design systems. Better yet, many have even shared them by making them public. You can find a lot of free templates to help you get started, and there are also paid options as well if you’re looking for something more in-depth.

Here are a few of our favorite design systems (in no particular order):

• Atlassian
• Mailchimp
• Google
• Adobe
• Cisco

As you build a design system, it’s essential to include key team members and stakeholders in updates and standups. That way, you can communicate changes and updates and how those things might affect others’ work. 

By including others in the team early on, you can also learn how others might be able to contribute to the design system and figure out how to create consistency between the design side and the code side of things.

As you build your design system, you’ll need to decide how to structure and name things. There is no right or wrong way to do this, but the way you organize your system should make sense to you and everyone else on the team.

One place to seek inspiration could be Brad Frost’s atomic design methodology. Basically, atomic design takes design elements and relates them to chemistry.

One of our main goals when creating our design system was clearly defining our brand’s visual design language. We didn’t want to force designers to do things a certain way necessarily, but we did want to give them a framework to explore various approaches when designing for Crystallize.

Overall, we approached our visual language with a more loose and flexible approach, though this might not work for everyone. Some teams might prefer a more strict and structured approach, with a more rigorous process for introducing new things into the system. 

Either way, if you can define your visual design language, it will help you create visual consistency throughout your product.

Once we defined our visual language and built our design system, it was important actually to start using it. We started talking to people on our team to figure out a strategy on how to begin implementing our new design system. We also talked to our developers to figure out what changes we’d need to make and what we could include in our system moving forward. To begin, we had to start creating new components in Figma and using them throughout our designs.

In the beginning, this will take some time⁠—but once you start using your design system, you’ll save yourself (and your team) even more time in the long run. You’ll also be able to maintain consistency throughout your product and all of your designs!

A design system is a dynamic reflection of your product design that will grow and change over time. Once our team started using our design system,  we tried to approach it with the mindset that the design system would constantly be going through various iterations.

We also learned that whenever changes are made, they should be communicated to the team - whether that’s through a changelog, documentation, or any other method that suits your organization. Whatever you choose—updates should tell everyone what was changed and how that might impact their work.