# Design Systems

## What is a design system?

Inspired by Brad Frost's Atomic Design, many organizations today have started to adopt design systems - a single source of truth which group all the elements that will allow teams to design, realize and develop a product. 

This not only includes the stylesheet and the components but also the voice and tone to use, the overall principles, use cases for each component, and the dev framework (this may vary from team to team). 

Rather than writing more, we recommend that you read the following three articles to get a solid understanding of the subject as many UX Designers are expected to work with design systems @ work.

### 1. A Comprehensive Guide to Design Systems

A perfect start to understanding the subject better, this article covers the basics of design systems and the need for one.

{% embed url="<https://www.invisionapp.com/inside-design/guide-to-design-systems/>" %}

### 2. Building Design Systems with Atomic Design&#x20;

A natural next read, this article uses strong visuals to give you a step by step detailed overview of the journey of a design system from start to finish.

{% embed url="<https://medium.muz.li/building-design-systems-with-atomic-design-93a13286f676>" %}

### 3. A Deep Dive into Existing Design Systems

Rather than getting more textbook definitions and explanations, this dribble blog post takes a different approach and shows you how design systems vary from organization to organization and how there is no one correct/perfect way of making a design systems.&#x20;

{% embed url="<https://dribbble.com/stories/2019/02/22/what-are-design-systems?ref=webdesignernews.com>" %}

### 4. Bonus: Read the Design Systems Handbook

The Design Better team has collaborated with UX designers from Etsy, Github, and inVision to deliver this perfect book to accompany you in creating your design system.

{% embed url="<https://www.designbetter.co/design-systems-handbook>" %}

## Improve your design system workflow

{% embed url="<https://designsystemchecklist.com/export/?fbclid=IwAR35A94wYivRSCs3ZC4o0EAWWEIBOUcUyVqrxOfSQ2H68jf6i2TFXoFg4B8>" %}

{% embed url="<https://medium.com/eightshapes-llc/typography-in-design-systems-6ed771432f1e>" %}

{% embed url="<https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3>" %}

{% embed url="<https://uxdesign.cc/why-design-systems-fail-and-how-to-make-them-work-6f6d812e216d>" %}

{% embed url="<https://uxdesign.cc/how-to-measure-design-system-impact-guide-f1f9f0c3704f>" %}

{% embed url="<https://blog.bitsrc.io/7-tools-for-building-your-design-system-in-2020-452d9c9b3b8e>" %}

{% embed url="<https://css-tricks.com/who-are-design-systems-for/?ref=webdesignernews.com>" %}

{% embed url="<https://uxplanet.org/design-system-icons-5955b68eb3dd>" %}

## Stories of How Industry Design Systems were made, improved, & maintained

{% embed url="<https://medium.com/segment-design/how-i-built-a-design-system-from-scratch-31e0dbdf7b2f>" %}

{% embed url="<https://www.designsystems.com/how-a-small-team-built-figma-dot-coms-design-system/>" %}

{% embed url="<https://uxdesign.cc/figma-design-thinking-building-a-design-system-for-an-existing-product-388bfdeb844b>" %}

{% embed url="<https://ux.shopify.com/a-template-for-figma-wayfinding-2b3d393f9771>" %}

{% embed url="<https://medium.com/design-ibm/10-reflections-on-designing-a-design-system-b79ac93e1fd7>" %}

{% embed url="<https://medium.com/bbc-design-engineering/the-lessons-learnt-creating-a-design-system-for-bbc-online-38625885870e>" %}

{% embed url="<https://design.lyft.com/building-a-design-system-library-3a1f0d09088f>" %}

## How to use Figma for making your Design System

{% embed url="<https://uxplanet.org/how-to-build-a-design-system-in-figma-6c169e3ea6cc>" %}

{% embed url="<https://www.youtube.com/watch?v=YN1noUpMeZ0&list=PLDaHCLWmCcQL3ipBjcrJYc_DT6B2nxVf0&ab_channel=DesignCode>" %}

## How to use Sketch for making your Design System

{% embed url="<https://theuxblog.com/blog/atomic-design-sketch-library>" %}

{% embed url="<https://uxplanet.org/how-to-create-a-sketch-style-guide-library-and-ui-kit-af032b4610af>" %}

## Explore Industry Design Systems

A great way to start designing your own design system is to explore pre-existing design systems. Doing this will help you identify what types of components, rules, and pattern guidelines are usually included in a design system. Our favorite design systems to explore for guidance are [Material Design](https://material.io/components/) and [EOS](https://suse.eosdesignsystem.com/). Here is a list of the most popular design systems out there.&#x20;

| Company Name   | Design System Name                                                                                   |
| -------------- | ---------------------------------------------------------------------------------------------------- |
| Google         | [Material Design ](https://material.io/design/)                                                      |
| IBM            | [Carbon](http://carbondesignsystem.com/)                                                             |
| Shopify        | [Polaris](https://polaris.shopify.com/)                                                              |
| Atlassian      | [Atlassian Design Guidelines](https://atlassian.design/guidelines/product/overview)                  |
| Salesforce     | [Lightning](https://www.lightningdesignsystem.com/)                                                  |
| Alibaba        | [Ant Design](https://ant.design/)                                                                    |
| Github         | [Primer](https://primer.github.io/)                                                                  |
| Buzzfeed       | [Solid](http://solid.buzzfeed.com/)                                                                  |
| WeWork         | [Plasma](http://plasma.guide/)                                                                       |
| UX Power Tools | [UX Power Tools](https://www.uxpower.tools/?source=post_page-----7d2810bee810----------------------) |

To read a more comprehensive list we recommend using [**UX Pin's Adele Design System Search Engine**](https://adele.uxpin.com/) or [**Design Systems Repo**](https://designsystemsrepo.com/design-systems/).

## Also Explore

{% content-ref url="/pages/-Lvzbp-PfUnUZbWUazZx" %}
[Software](/explore/ui-design/software.md)
{% endcontent-ref %}

{% content-ref url="/pages/-Lvzc3xXsMczPmyS\_3Rd" %}
[UI Patterns & Inspiration](/explore/ui-design/ui-patterns-and-inspiration.md)
{% endcontent-ref %}

![](/files/-LyTzMN_2df8kzPj8tGD)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.uxlibrary.org/explore/ui-design/articles/design-systems.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.