The Ultimate Design Systems Resources List

Blog posts

  
Design spacing tokens semantically by Donnie Damato

My Five Biggest Design System Mistakes by Steve Dennis

Subcomponents by Nathan Curtis

Improve your designer/developer workflow by automatically generating Storybook stories for your codebase’s icons by Andrico Karoulla

5 Pillars of a Design System by Tom Schoch

Measuring the health of our design system by Chase McCoy

How to understand your Design System’s health, and eventually, its success by Christos Kastritis

Measuring the value of our design system by gitlab

How we measure adoption of a design system at Productboard by Filip Daniško

Design System Coverage by Superfriendly

Evaluating design system adoption using custom CSS by Steve Dennis

How We Drove Adoption of Our Design System by Twilio

Governance is a design system’s friend by zeroheight

What is a design audit and how do you conduct one? by me

Pro tips: How to create your design system by me

Your sketch library is not a design system by Brad Frost

Learn Storybook  Learn to develop UIs with components and design systems

Design System 101 by Nielsen Norman Group

Design Systems are for user interfaces by Brad Frost

Fluid Design Systems With Netlify On-demand Builders entirely based on the Utopia.fyi

Variant-driven Components by Pedro Duarte

How we organise our Design System libraries to help Doctolib designers use more than 70 000 components a week

Spece, Grids, Layouts by Elliot Dahl

Guide to Design Systems by Philip Wallage

The genome color tool A universal color tool for design systems by Kevin Muldoon

Governance

Managing, Maintaining, and Governing Design Systems for Success by Linn Vizard

Team Models for Scaling a Design System by Nathan Curtis

Governance by design by Rick Poulin

Tools

Figma Tokens The most advanced plugin for taking care of your design tokens. You save time and have more control over your designs, when implementing design tokens. Switch between multiple themes, token sets, etc.

Backlight.dev Tool to build design systems on the code side

Style Dictionary  is a build system that allows you to define styles once, in a way for any platform or language to consume.

CSS Stats provides analytics and visualizations for your stylesheets. How many styles are you using? How many colors do you have in your CSS? This information can be used to improve consistency in your design and track performance of your app.

Cobalt turns your design tokens into code

Project Wallace tracks your CSS so you can view changes in your complexity, Design Tokens and much more.

Design Tokens another Figma plugin for managing design tokens

Zeroheight is a design system platform

Storybook  Build component driven UIs faster

Specify is a design data platform

Supernova is a system-as-a-service-platform

Frontify a brand management platform

SHAPER Interface styles shaper.

UI Playbook is a collection of UI components

Catalog Living Style guides for Digital Products

Figspot bird’s-eye view of Figma comments

Nx.dev build system with monorepo support and powerful integrations

Percy all-in-one visual review platform

applitools test automation platform.

Tools for Colors

Farbvelo  by David Aerne generates colors, palettes; awesome color inspiration

Happy Hues curated colors in context.

Color Palettes

Leonardo is a one-of-a-kind tool for creating, managing, and sharing accessible color systems for user interface design and data visualization.

Palette app

Supa-pallette All-in-one palette generator, editor and manager for Figma

Alphredo.app Alpha colors generator

Designsystem.tools

Figma Plugins

Figma Tokens The best plugin for maintaining your design tokens

Story.to.design Plugin to import and sync Figma components from code (with Storybook or Backlight)

Similayer for selecting similar layers (specific text styles, specific border radius, etc.). Very powerful.

Gist Documentation attach docs to your components (very easy to use)

Propstar generates a labelled table for instances of your components

Figspot bird’s-eye view of Figma comments

Gist Attach documentation to your components.

Instance Finder for finding all instances of a component used in your file

ADEE Comprehensive Accessibility Tool, ColorBlind Simulator, Contrast Checker

Contrast checker (very easy to select and object and test contrast in Figma)

Design System Manager visual design tokens manager, built-in document designer (works with Figma + Adobe XD)

Figma Autoname  Rename all your layers in one click. Free. Open source.

Libraries

Tailwind design system components

Ant Design a design system for enterprise-level products.

Chakra UI UI Components for React Applications

Mantine React components library

Wanda Full-featured design system for digital experiences

React Scanner Extract React components and props usage from code.

Smooth UI – React UI library

Omlet. Explore all your reusable and custom components with analytics.

Radix Primitives Design System and Component Library for Modulz.

GOV.UK in React An implementation of the GOV.UK Design System in React using CSSinJS

Styled System lets you quickly build custom UI components with constraint-based style props based on scales defined in your theme.

Base Web – React Component library implementing the Base design language.

Grommet React-based framework

Reach UI  Accessible Foundation for React Apps and Design Systems.

Reshaped design system for everyday product development with Figma and React

ui-neumorphism React component library designed on the “new skeuomorphism” or “neumorphism” UI/UX trend.

Fannypack  is themeable React UI Kit

Blueprint  React-based UI toolkit for the web

Qui Vue.js design-system for Web.

Elastic UI

Brix UI reusable UI components for React, made in minimalistic and light style.

Lunar  design language for Airbnb open source and internal projects.

Ring UI  JetBrains Web UI components.

Dracula UI makes it easy to create beautiful dark apps using plain HTML or React components

Polkadot-js browser libraries and React UI components used inside the polkadot.

Geist  Modern and minimalist React UI library, originating from Vercel’s design.

aragonUI UI kit for decentralized apps

Tamagui React Native + Web UI kit

Arco Design React

StencilJs  A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards

HyperTheme theme editor for Chakra UI

Lucide Icons beautiful & consistent icon toolkit made by the community.

Flagpack 250+ open source flag icons to use in your design tool or in your code project

Design Principles Collection (regularly updated)

Design Systems for Figma updated collection

Great Design Systems

Workbench Design System by Gusto

Deutsche Bahn (DB) Design System

Goldman Sachs Design System

NORD Design System

Carbon Design System open source design system by IBM

Spectrum Design System by Adobe

Seeds SproutSocial Design System

Helsinki Design System

Gestalt Pinterest’s design language.

Primer Design, build, and create with GitHub’s design system.

Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design.

Salesforce Lightning Design System

Orbit – an open-source design system (built on WordPress)

Polaris Shopify’s Design System

Atlassian Design System

Pencil Design System by Brainly

Apple’s Human Interface Guidelines

Fluent Design System by Microsoft

Airbnb’s Design System

Vercel Design System

Audi Design System

Olympics Design System

Comet Scalable design system for use in Discovery Education

Swiss Post Design Design System

Forma 36 Contentful Design System.

Paste – Design System for building Twilio customer experiences.

Arco Design React

Equinor Design System

Munich RE Design System

USWDS: The United States Web Design System A design system for the federal government.

State of California Design System BETA

PIXIV Design System

Kaizen Design System

Thorin A web3 native design system.

React Design Systems  list of design systems made up of reusable React components.

Design Tokens

Figma Tokens and their learning resources

Workshop with Jan Six on setting up tokens in Figma (Jan is co-founder of Figma Tokens plugin)

Naming Tokens in Design Systems by Nathan Curtis

Cobalt turns your design tokens into code

Design Tokens Technical Reports

 Design Tokens 101 by me

Slides and videos

Workshop: How to build a Design System with Design Tokens in Figma – Jan Six -> Jan Six is the creator of the Figma Tokens plugin and this workshop is a must.

Data Informed Design Systems by Jan Toman

In the File: Creating a design system that spans multiple products

The Future of Design Systems Conference Recordings 

Books

Expressive Design Systems by Yesenia Perez-Cruz

Atomic Design by Brad Frost

Continuous Discovery Habits: Discover Products that Create Customer Value and Business Value by Teresa Torres

Laying the Foundations: A book about design systems by Andrew Couldwell

Design Systems Handbook by Invision (free)

Conferences

Into Design Systems / Twitter (Workshops, Conference, Meetups) Led by Silvia Bormüller (Definitely one of the best conferences)

Clarity Conference by Jina Anne

Figma Config (+ recordings)

Converge by zeroheight

Accessibility

• Randoma11 – Accessible Color Preview (random color palletes)
• Contrast Figma Plugin
• Usecontrast Official Website, UseContrast Figma Plugin

Treat your design system as a product. It’s a marathon, not a sprint

If you enjoyed this article and would like more design, strategy, and business tips, subscribe to my newsletter below and I’ll deliver them straight into your inbox.