If you’re new to design systems, read my introductory post or Design Tokens 101 first.
The article was last updated on Tuesday, 31st of January 2023
📝 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
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
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.
Leonardo(⭐️) is a one-of-a-kind tool for creating, managing, and sharing accessible color systems for user interface design and data visualization.
Supa-pallette All-in-one palette generator, editor and manager for Figma
Alphredo.app Alpha colors generator
💥 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.
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.
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
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
NORD Design System
Carbon Design System open source design system by IBM
Spectrum Design System by Adobe
Seeds SproutSocial 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
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.
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
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)
⭐️ Into Design Systems / Twitter (Workshops, Conference, Meetups) Led by Silvia Bormüller (Definitely one of the best conferences)
Clarity Conference by Jina Anne
Converge by zeroheight
- 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.
Get Exclusive Design Strategy Tips
That I Only Share With Email Subscribers
Hey, I’m Romina.
I am a Design Strategist who holds a Master of Business Administration. I have 15+ years of career experience in design work and consulting across tech startups and several marquee tech unicorns such as Stellar.org, Outfit7, Databox, Xamarin, Chipolo, NIVEA, Zemanta, etc. I currently advise, coach, and consult with companies on design strategy and design systems. I received numerous awards for my designs, but I’m much happier when I prove that the right design decisions increase your ROI. 🔥
My personal page * Let’s connect on Linkedin * Twitter
Want to know more about design systems? Let me know.
Connect with me on Linkedin or send me an email on hey @ romina.design