What a design system is, why you need one, and how to build it?

Inconsistency across products and platforms. Wasted time spent digging up old code snippets. Poor communication between teams. These consequences of large teams just can’t be avoided, right?

Not exactly. Just because you’re expanding your product team and/or scaling processes doesn’t mean you have to sacrifice quality or consistency.

Enter the design system.

With advocates like Airbnb and Salesforce, design systems are seeing their popularity rise over the last few years. In fact, according to our 2017-2018 Enterprise UX Industry Report, 69% of the thousands polled said they either already implemented a design system, or were currently building one.

But what exactly are design systems? How do you build one? And can they help your company in particular? This article will answer all your questions and explain everything you need to know to get started on your own.

What Is a Design System?

A design system contains the principles of design and development and the toolkits for achieving those principles. It’s both living documentation and a robust set of components.

But what specifically is included? Everything you need to know is outlined in the chart below:

the structure of a design system

To paraphrase UX speaker and author Nathan Curtis, a design system isn’t a project, it’s a product serving other products.

Why You Need a Design System

Here are the main benefits to creating a design system:

  • Faster project turnaround. Design systems save time by consolidating information, improving communication, and reducing time spent digging around for assets. This also leads to saving money on projects that adhere to tighter schedules.
  • Better UX. When your design system is up-to-date, everyone on the team follows the right principles and uses approved components. That improves coherence across products and minimizes inconsistency.
  • Easier onboarding and collaboration. New employees have access to a shared general knowledge base and components for designers, PMs, and engineers.
  • Less version control issues. If you update a component in a design system, the changes populate across all instances. The design system is the final record of truth because it’s a tool that increases efficiency, any time you invest into making one will be paid back, and then some.

How to Create a Design System

Making a design system isn’t intrinsically difficult, but it does require time and effort to document and standardize everything. Here’s 8 steps we followed when building our own design system:

1. Go through your UI inventory and capture inconsistencies

Before you create a universal guide, you need to collect all the materials you need and identify inconsistencies. Audit your product against any existing style guides or pattern libraries.

Among other things, you’ll want to make note of inconsistencies in:

On top of collecting these elements, don’t forget to copy the corresponding code snippets.

Naturally, you’ll come across inconsistencies for common usage — after all, discovering these is one of the main benefits of making a design system. Log all these inconsistencies and then work them into a presentation for the rest of your team.

inconsistency presentation

These presentation will come in handy later on, especially during the next step…

2. Get the approval of the team

Design systems are team tools, so you should get everyone on board from the start. You may even require formal managerial approval.

If you come across any apprehension, the presentation of inconsistencies will help uncover the severity of the problem. Additionally, you can also show skeptics an estimation of the time and work wasted by not implementing a design system.

3. Decide on common solutions for inconsistencies

As a team, go through each inconsistency and decide on a single, universal choice going forward. From here on out, everyone will use the new established design principles for each individual instance.

Additionally, you can use this as an opportunity to revisit old design choices. Perhaps your company has outgrown some previous decisions, or a newer, better pattern has come along in the meantime. Since you’re going through everything anyway, this is an ideal time to address these.

Jared Spool offers some great advice on how to create new design principles.

4. Compile the universal color palette

Create the actual document one section at a time, starting with the color palette. When we built our design system at UXPin, we found 116 different shades of gray. That just goes to show you how useful a consolidated color palette can be.

color palette

5. Compile a universal typographic scale

Whether you’re copy-and-pasting it from your editorial style guide or building a new one from scratch, your design system should include a section on typography rules. Different companies will have different requirements, but usually this section includes:

  • Which fonts to use and when
  • Different font weights and sizes, depending on location
  • Line heights
  • Spacing
  • Custom rules unique to your company

You may also want to include editorial guidelines here, such as preferred spellings or tone of voice.

6. Compile an icon library

Icon usage is highly susceptible to inconsistency, so now’s your chance to make a definitive library. Choice which versions of each icon you want your brand to use, and place them all in this section. Include code snippets and usage notes.

7. Compile your UI pattern library

One of the most useful sections of your design system, the UI pattern library lists all the common patterns your company uses in different situations. For example, do you use an ever present search field, or an expandable magnifying glass icon?

Along with each entry, include a screenshot of the pattern as a visual aid, code snippets where applicable, and any usage notes, such its location on the screen.

You can organize your UI pattern in whichever way is most helpful to your team. These could be by function, such as navigation patterns, or by the type, such as interactive patterns.

8. Update regularly

Once the first draft of your design system is finished, your work is just beginning.

Design systems are living documents, meaning they’ll always be changing and updating. Check back periodically to make sure all the style choices are current and relevant. It also helps to establish a set procedure with your team for adding new elements, to avoid any confusion in the future.

Next Steps

For more advice, check out the Design System Starter Kit. It includes everything you need to build a design system from the ground up, including:

  • A 100-point checklist for building your design system
  • A 30-page pocket guide diving deeper into the benefits of design systems
  • Templates for Keynote and PowerPoint to sell design systems to your organization

The kit was based on our experience building our internal design system across two offices.