LogoLogo
  • 👋Welcome to UX Library
  • 🎁Beginners UX Design Kit
  • EXPLORE
    • 💡The UX Process
      • 📚Books
      • 📃Articles
      • ⚡Activites
      • ⚙️Processes
    • 🔬UX Research
      • 📚Books
      • 📃Articles
      • 🖥️Software
      • 📇Templates
    • 🗂️Information Architecture & Content Strategy
      • 📚Books
      • 📃Articles
      • 🖥️Software
    • 🖍️UI Design
      • 📚Books
      • 📃Articles
        • Sketching & Whiteboarding
        • Color, Typography, & Icons
        • UI Design Principles & Tips
        • Design Systems
      • 🖥️Software
      • 🍂UI Patterns & Inspiration
      • 🛍️Free UI Resources
    • ✍️UX Writing
      • 📚Books
      • 📃Articles
      • 🖥️Software
  • MORE
    • 👔Job Hunting
    • 📺Design Courses
    • 🛍️Free Resources
      • 📱UI Kits
      • 🆎Fonts
      • 🖼️Photos
      • 🏠Icons
      • 🎄Illustrations
    • 🎙️Podcasts
    • 👪Facebook Groups
    • 📖Books & Blogs
    • 🚀About Us & Feedback
Powered by GitBook
On this page
  • What is a design system?
  • 1. A Comprehensive Guide to Design Systems
  • 2. Building Design Systems with Atomic Design
  • 3. A Deep Dive into Existing Design Systems
  • 4. Bonus: Read the Design Systems Handbook
  • Improve your design system workflow
  • Stories of How Industry Design Systems were made, improved, & maintained
  • How to use Figma for making your Design System
  • How to use Sketch for making your Design System
  • Explore Industry Design Systems
  • Also Explore

Was this helpful?

  1. EXPLORE
  2. UI Design
  3. Articles

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.

PreviousUI Design Principles & TipsNextSoftware

Last updated 4 years ago

Was this helpful?

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.

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.

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.

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.

Improve your design system workflow

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

How to use Figma for making your Design System

How to use Sketch for making your Design System

Explore Industry Design Systems

Company Name

Design System Name

Google

IBM

Shopify

Atlassian

Salesforce

Alibaba

Github

Buzzfeed

WeWork

UX Power Tools

Also Explore

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 and . Here is a list of the most popular design systems out there.

To read a more comprehensive list we recommend using or .

🖍️
📃
Material Design
EOS
UX Pin's Adele Design System Search Engine
Design Systems Repo
🖥️Software
🍂UI Patterns & Inspiration
Material Design
Carbon
Polaris
Atlassian Design Guidelines
Lightning
Ant Design
Primer
Solid
Plasma
UX Power Tools
A comprehensive guide to design systems | Inside Design Blog
Building Design Systems with Atomic DesignMedium
What are Design Systems?Dribbble
Design Systems Handbook—from DesignBetter.CoDesign Systems Handbook - DesignBetter
https://designsystemchecklist.com/export/?fbclid=IwAR35A94wYivRSCs3ZC4o0EAWWEIBOUcUyVqrxOfSQ2H68jf6i2TFXoFg4B8designsystemchecklist.com
Typography in Design SystemsMedium
Logo
Color in Design SystemsMedium
Why design systems fail, and how to make them workMedium
How to: measure a Design System’s impactMedium
https://blog.bitsrc.io/7-tools-for-building-your-design-system-in-2020-452d9c9b3b8eblog.bitsrc.io
Who Are Design Systems For? | CSS-TricksCSS-Tricks
https://uxplanet.org/design-system-icons-5955b68eb3dduxplanet.org
Building a Design System from ScratchMedium
How a small team built Figma.com’s design systemDesignSystems.com
https://uxdesign.cc/figma-design-thinking-building-a-design-system-for-an-existing-product-388bfdeb844buxdesign.cc
Logo
https://ux.shopify.com/a-template-for-figma-wayfinding-2b3d393f9771ux.shopify.com
10 reflections on designing a design systemMedium
The lessons learnt creating a design system for BBC OnlineMedium
https://design.lyft.com/building-a-design-system-library-3a1f0d09088fdesign.lyft.com
How to Build a Design System in FigmaMedium
Building an Atomic Design System with Sketch Library — UX BlogUX Blog
Logo
How to Create a Sketch Style Guide, Library, and UI KitMedium
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo