Design Systems 101
Tags: designsystems, learning, beginners
Published: 2020-04-01 14:12:55

---
title: Design Systems 101
published: true
cover_image: https://imgur.com/mkcG5lz.png
description: Just what the heck is a design system?
tags: design systems, learning, beginner
---

<figure>
![](https://i.imgur.com/8jtaN4C.gif)
<figcaption>
How a design system speeds up page design
</figcaption>
</figure>

# What the heck is a design system?

Let's start out with a couple quotes to set the mood:

> A design system’s purpose is to provide consistent, tested and reusable solutions for a common UX problem.
> [*Mina Markham*](https://medium.com/git-out-the-vote/pantsuit-the-hillary-clinton-ui-pattern-library-238e9bf06b54#.c6rnwv18f)

---

> A style guide is an artifact of the design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.
> [*Nathan Curtis*](https://articles.uie.com/a-design-system-isnt-a-project-its-a-product-serving-products/)

## So what is a design system?

![A design system is...](https://imgur.com/MBiECbM.png)

Well, it's not a box of Legos. It's more like the Lego factory.

## People | Tools | Patterns | Guidelines | Values

A good design system is a collaboration between many parts of a business and product. It is a distillation of a companies values and people into a set of guidelines, tools, and patterns that make rapid development easier and enable a team to produce accessible functional tools.

A design system is integrated - it's built into the product and organization/product development process, not merely a style guide you reference

A design system is shared - it’s actually shared and adopted across the organization, in order to cover major part of the product

A design system contains patterns - can be patterns and/or components. 

A design system contains principles - there is underlying principles behind the patterns that guide the work

> We think we merely design and build websites and apps. And that’s true  for the most part. After all, that’s what our clients pay us to do, and the products we create are the vehicles that generate money and success for our organizations. It seems natural to focus on the final implementations rather than the underlying system. The live products remain the primary focus of everyone’s attention, while any pattern library exists as an offshoot that simply provides helpful documentation.

## Deliverables

[Shopify](https://polaris.shopify.com/) has a great example of the various deliverables that might be produced from a design system. 

![an example of shopify's deliverables](https://imgur.com/OD8p6kX.png)

### Patterns
Rules around accessibility, internationalization, layout patterns, and error messages would all be gathered in the Patterns section.
**[Example](https://polaris.shopify.com/patterns-and-guides/product-experience-principles#navigation)**

### Content
Rules about website content, blog posts, and documentation all fall into the content portion of the design system. 
**[Example](https://polaris.shopify.com/content/product-content#section-write-for-a-grade-7-reading-level)**

### Style Guide
Rules about design and the creation of visual elements fall into the style guide portion.
**[Example](https://polaris.shopify.com/design/colors)**

### Code Style
Code style and formatting, stylelint rules, and CSS patterns are all part of the code style portion of a design system.
**[Example](https://about.lessonly.engineering/styleguide/css)**

### Component Library
Reusable components like buttons, form fields, and grids make are part of the component library.
**[Example](https://polaris.shopify.com/components/forms/autocomplete#navigation)**

---

# Benefits of a design system:

- **Design systems bring order to chaos.** Everyone is kept on the same page, so the entire product remains consistent and polished throughout.
- **Design systems improve the user experience through the repeated use of familiar and proven patterns.** Designing anything from scratch leaves room for error, so try to use what already works.
- **Design systems improve workflow efficiency.** Product teams know exactly how components of new features should look and how to implement them.

#Building a design system

![a visual representation of a design SYSTEM](https://imgur.com/2VLKmFj.png)

## Questions to ask

- How does the system work today and in the future?
- What is our vision?
- What problems are we trying to solve?
- Who does this problem most impact?
- What impact do we want a design system to have on how we work?

## Building on a smaller team

### 1. Don't start from scratch

"Steal like an artist", where you can. There are lots of open design systems out there that we can borrow from. Additionally, there are lots of good tools that we can use. 

Even things like Bootstrap can be useful to steal from - we can find common patterns that many web-apps use and build reusable components to build them out for our companies.

### 2. [UX/UI Audit](https://www.invisionapp.com/inside-design/guide-to-effective-ux-audit/)

We can't know where we are going until we know where we are and where we have been. Before starting, get an idea of where you are, what pages you have, what components they use, and what makes sense to abstract into a design system.

### 3. Build a living document

A design system is a living breathing collaboration between designers and developers. As such, it can and should grow and evolve - which means getting started and letting it change/evolve.

Some ideas of sections:

1. Colors
2. Typography
3. Sizing/Spacing
4. Imagery

### 4. Build a component library and document it

Once the audit is done, begin to build out a component library. For each component, include documentation and standards. Remember that when *not* to use a component is just as important as when you should use it.

## Quick Activity for getting started

> Our design system offers _______[kit scope]_______
> released as _______[kit outputs]_____
> and documented at _______[kit doc site]_____
> produced by _______[people]_________
> in order to serve _______[products]_______
> products and experiences.

# To infinity and beyond

As the design system grows and evolves it enables us to work in interesting and new ways. 

## Giving Back

One great thing about a design system is that it can live out in the open. It's a great way to represent your Product/Engineering brand and give back to the community. 

## DesignOps

DesignOps (also called div-ops!), much like DevOps, is a fast-growing field. A design system is the first step in implementing a DesignOps team.

[https://clearleft.com/posts/design-ops-a-new-discipline](https://clearleft.com/posts/design-ops-a-new-discipline)

## Full Stack Design systems

> When you’re creating a bespoke Design System for a specific product, you have the opportunity to not just group common UI elements together, but to actually represent your core product concepts at many levels. I call this a **Full Stack Design System.**
[[Link]](https://www.intercom.com/blog/the-full-stack-design-system/)

# Tips

### Any design system is better than no design system at all.

Get something built sooner, rather than later.

> GitHub’s design system, Primer, was being revamped internally and privately. Doing so, Diana said, was in part because her team faced Imposter Syndrome comparing Primer to the systems of matured and larger organizations like AirBnb’s DLS, Shopify’s Polaris, and the US Web Design System. Primer felt unpolished in comparison. Many components were deprecated.
**[[Link]](https://medium.com/tradecraft-traction/eight-things-you-need-to-know-about-design-systems-bae8bd884b3b)**

### Build systems, not pages

The web is massive and diverse - it is no longer enough to build webpages. Instead, we need to think about responsive and adaptive design made up of components.

[http://www.atomicdesign.bradfrost.com/chapter-1/](http://www.atomicdesign.bradfrost.com/chapter-1/)

### Pay attention to the team's limits

We can't build a design system in a day, a sprint, or a quarter. Even starting with just a sketch file that makes the creation of new features and pages consistent is a good base. 

### Organization is key

Avoid "quick and dirty", you'll only bite yourself later. Make sure people know what is happening and get input from everyone that might touch the system. The worst possible timeline is some people using the design system and others not using it.

### Have a single source of truth

Have a sharable Sketch library and component library that everyone uses while working on the design system.

# Links & Tools

- [Abstract's Customer Stories](https://www.abstract.com/blog/category/customer-stories/) - Stories from Abstract's customers, who are using Abstract to build collaborative design systems
- [Design Systems](https://www.designsystems.com/) - A Figma publication for design systems
- [Getting Developers Started with a Design System](https://medium.com/eightshapes-llc/getting-developers-started-with-a-design-system-d814fd390389) - A good article on ramping developers into a design system.
- [Design Systems Repo](https://designsystemsrepo.com/tools/)
- [Getting executive buy-in for your design system | Inside Design Blog](https://www.invisionapp.com/inside-design/getting-executive-ok-design-system/)
- [Picking Parts, Products & People - EightShapes - Medium](https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742)
- [Accessible Brand Colors](https://abc.useallfive.com/?ref=producthunt)
- [Sketch version control & design workflow management - Abstract](https://www.goabstract.com/)