Best Design System Design Resources in 2022

Step by step guide in creating a design system, a unified visual language across products within the brand. Accessible to designers, developers as well as marketers.

Guides

Resources

Screenshot of Do You Know Design Systems

Do You Know Design Systems

Slides from "Do You Know Design Systems - AMA with HK Design System Experts", organised by Friends of Figma, Hong Kong

Screenshot of Benchmarking Your Design System

Benchmarking Your Design System

Free e-book by Invision to help you to evaluate and evolve your design system

Screenshot of Themer

Themer

Themer allows you to create and switch themes from your published style library. Applying to color, shadow and text styles.

Screenshot of Polaris Design System

Polaris Design System

Shopify's Design System - Polaris

Screenshot of Gestalt

Gestalt

Pinterest's design system - Gestalt

Screenshot of Fluid Type Scale

Fluid Type Scale

Generate font size variables for a fluid type scale with CSS clamp.

Screenshot of Type Scale

Type Scale

Type Scale helps you to improve your web typography with a better scaling calculation.

Screenshot of Figma Tokens

Figma Tokens

Figma Tokens is a Figma plug-in allows you to generate, switch and apply theme through JSON.

Screenshot of Spotify Icon System Update

Spotify Icon System Update

Collaborated with icongrapher Rob Bartlett, Spotify design shipped updated icon library from 1px to 2px width and unified size variants from 5 to 2.

Screenshot of Utopia

Utopia

Utopia is a calculator that help you to tokenize spacing values to be used with their fluid type calculator.

Screenshot of Awesome Design Systems

Awesome Design Systems

Curated list of design tools and systems in a github repo.

Screenshot of Inclusive Components

Inclusive Components

A blog that advocate inclusive web interfaces and components, to make the web more accessible

Screenshot of Project Wallace - CSS Analytics

Project Wallace - CSS Analytics

CSS analytics tool to monitor your design system.

Screenshot of Design System Checklist

Design System Checklist

An open-source checklist for building a design system

Screenshot of Design Systems by Figma

Design Systems by Figma

A publication curated by Figma Team regarding building a design systems. Include tutorials, templates, case studies and more.

Screenshot of Refactoring UI

Refactoring UI

Refactoring UI started as design tidbits to work smoothly with developer. It stresses on visual hierarchy and systematic approach to UI design from a developer point of view. Brand new ebook and resources are available for $149.

Screenshot of Releasing Design System

Releasing Design System

Series of writing uncovering the process of of shipping an effective, collaborative design system, with examples from Atlassian, Financial Times, Shopify and more. Written by Nathan Curtis from Eightshapes

Screenshot of Zero Height

Zero Height

With Sketch Plugin, Invision and Story integration, Zero Height allow you to create design system manual and resources in a WYSIWYG environment. Recently added support for Figma Library. Free for 1 user, $12 for Team