Design Systems
Learn what design systems are, how to make one, and how to maintain it with this crash course of curated articles from us.

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.
A comprehensive guide to design systems | Inside Design Blog

2. Building Design Systems with Atomic Design

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.
https://medium.muz.li/building-design-systems-with-atomic-design-93a13286f676
medium.muz.li

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.
What are Design Systems?
Dribbble

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.
Design Systems Handbookβ€”from DesignBetter.Co
Design Systems Handbook - DesignBetter

Improve your design system workflow

https://designsystemchecklist.com/export/?fbclid=IwAR35A94wYivRSCs3ZC4o0EAWWEIBOUcUyVqrxOfSQ2H68jf6i2TFXoFg4B8
designsystemchecklist.com
Typography in Design Systems
Medium
Color in Design Systems
Medium
Why design systems fail, and how to make them work
Medium
https://uxdesign.cc/how-to-measure-design-system-impact-guide-f1f9f0c3704f
uxdesign.cc
https://blog.bitsrc.io/7-tools-for-building-your-design-system-in-2020-452d9c9b3b8e
blog.bitsrc.io
Who Are Design Systems For?
CSS-Tricks
https://uxplanet.org/design-system-icons-5955b68eb3dd
uxplanet.org

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

Building a Design System from Scratch
Medium
How a small team built Figma.com’s design system
DesignSystems.com
Figma & design thinking: Building a design system for an existing product
Medium
A template for Figma wayfinding
Medium
10 reflections on designing a design system
Medium
The lessons learnt creating a design system for BBC Online
Medium
https://design.lyft.com/building-a-design-system-library-3a1f0d09088f
design.lyft.com

How to use Figma for making your Design System

How to Build a Design System in Figma
Medium

How to use Sketch for making your Design System

Building an Atomic Design System with Sketch Library β€” UX Blog
UX Blog
How to Create a Sketch Style Guide, Library, and UI Kit
Medium

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 and EOS. Here is a list of the most popular design systems out there.
Company Name
Design System Name
Google
​Material Design ​
IBM
​Carbon​
Shopify
​Polaris​
Atlassian
Salesforce
​Lightning​
Alibaba
​Ant Design​
Github
​Primer​
Buzzfeed
​Solid​
WeWork
​Plasma​
UX Power Tools
​UX Power Tools​
To read a more comprehensive list we recommend using UX Pin's Adele Design System Search Engine or Design Systems Repo.

Also Explore

Last modified 7mo ago