Table of contents

1. What is a design system?
2. Why create a design system?
3. When do you need to create a design system?
4. A glossary of design system terms

1. What is a design system?

Let’s start by saying what a design system is not. It’s not a sketch library, nor a style guide, nor a bunch of examples. It’s a whole lot more than that! 

A design system is a collection of reusable, functional components and patterns with an accompanying set of guidelines that product teams use to create a consistent experience across a range of products. A design system can act as a single source of ‘truth’ for an entire organisation. Design systems usually include guiding principles, branding elements, voice and tone guidelines, code standards, and a UI library.

The definition of design system can be summed up as follows: a series of elements you can reuse in multiple combinations to make it easier to create consistent design at scale. Think of it as a LEGO set. The components—the coloured bricks, the tiles, the assorted accessories with their interlocking pegs—can be used to build a universe of unique and extraordinary objects whose consistency is unmistakable.

Unfortunately, however, most of us snap our LEGO together in a fairly haphazard way and rarely end up with anything more inspiring than a box with a door, a window (or two), and a roof with a simple chimney on top. 

On the other hand, if you take the time to organise the pieces, start to create rules, conditions, combinations, and conventions, you can work in a much more ‘deliberate and efficient manner’. And that’s what a design system is all about. 

2. Why create a design system?

There are many reasons for creating a design system: to increase productivity and collaboration, for example, to improve quality, consistency, and accessibility, to make it easier to work with partners, to name but a few. 

At TestingTime, we had four main reasons for developing our design system:

  • Scalability
  • Consistency
  • Workflow improvement
  • Efficiency

2.1 Scalability

As a company, we need to keep growing and deliver a better product to an ever-increasing number of customers. If we only have one person who understands the rationale behind the use of certain design features and conventions, we put ourselves in a very vulnerable position. The person could quite easily quit the company at any time, leaving the rest of us to start again from scratch. That’s why a design system is so essential. When onboarding, it enables newcomers to gain the information they need and serves as a trusty reference point for older members of the team.

2.2 Consistency

Consistency is a significant issue when dealing with a huge product range. If your users see that your brand does not have a clear identity, it may seem that the design, and therefore the user experience, is not important to your company or that you don’t have enough resources. In the worst case, they may get confused and think that there are different brands. With a design system, you can deliver cohesive, consistent user experiences that enable end-users to learn and master the product much faster.

2.3 Workflow improvement

Not having to start every component from scratch speeds up the design process immensely. A well-thought-out design system empowers the team to focus on people and the user experience instead of losing themselves in aimless pixel pushing.

2.4 Efficiency

A design system allows you to prepare more iterations much faster. Rather than reinvent the wheel every time, we can reuse pre-existing components. We can even work on things we couldn’t do if not for the agility a design system permits. This could be illustrations, animations, learning new applications or techniques, or any other skill that takes your product to the next level. Moreover, when we’re saving time, we’re saving money too.

3. When do you need to create a design system?

There is no ‘right time’, but if you leave it too late, inconsistencies and bad practices will get compounded. Signs that it’s time to introduce a design system might include discovering redundancies in your code due to different designs with similar elements or when the workforce has expanded leading to indiscriminate design changes made by multiple users, which cause confusion. If you notice symptoms like these, it’s probably a good time to get together and define your company’s design system. 

Fun fact: Google was using 42 different shades of blue before introducing their Material Design.

We often work frenetically (and not always productively) without stopping to consider more efficient ways of working and that perhaps it’s worthwhile pausing for a moment to improve our work process.

4. A glossary of design system terms

The world of design systems can be a bit tricky if you don’t know some of the terminology. Here is a glossary of the main terms so that you don’t get lost in the rest of our design system articles.

Component
A reusable snippet of code or design. Sometimes used interchangeably with a pattern, but we think of them as different things.

Component library
One of the main ingredients of any design system (also referred to as a pattern library), the library is a collection of components or patterns you can browse to find code references for ways to implement the components into your codebase or design.

Guidelines
The other major ingredient of design systems (along with the component library), guidelines are suggestions or rules on the best ways to use any given design system. Good guidelines tell you what and what not to do. A great example is this advice from the anti-patterns section of Shopify’s Polaris design system.

Pattern
A reusable flow, like signing in or finding out. Sometimes used interchangeably with components.

Token
Tokens are the most basic style elements of a design system—specified brand colors, for example. These are managed through a centralised file, such as a JSON file, which acts as a single source of truth for the design system’s styles.

UI kit
Usually refers to a file or document of user-interface elements such as buttons, form fields, checkboxes, and radio buttons. These are used by design teams to create screen mockups and prototypes. Examples of UI kits are Sketch libraries and Figma design systems.

Brand guidelines
Everything related to the brand including principles, tone and voice, grammar, etc. This tells both the users and the company who you are and what your narrative is.

CSS Framework
Front-end code that developers use to build a product.

In my next article, I’ll show you the process we used to create our design system, and I’ll guide you step by step with real examples. If you’d like to be notified when the article is published, subscribe to our blog.