awesome-design-systems

End-to-end design language to create straightforward and beautiful experiences

Launch recognizable, enjoyable Firefox products and features faster

Open-source it to allow the community to design and build their own projects

Resources, components, and design guidelines behind GitLab

Create intuitive and beautiful products with Material Design

Carbon is IBM's open-source design system for products and experiences

Our design system helps us work together to build a great experience for all of Shopify's merchants

Build better design systems. An open-source checklist to help you plan, build and grow your design system

Designers and developers from more than 20 industries tell us about their design systems and their uses

Resources for the design systems community

We help in-house teams make better digital products with design systems

Helps teams create, test, and ship better designs from start to finish (cross-platform)

The digital product design platform powering the world's best user experiences

A design toolkit built to help you create your best work from your earliest ideas, through to final artwork (for macOS)

Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one UI/UX design tool

Marvel has everything you need to bring ideas to life and transform how you create digital products with your team. Placing the power of design in everyone’s hands

Design and manage your entire UX/UI project in one tool

Penpot is the first Open Source design and prototyping platform meant for cross-domain teams

Design collaboration without the chaos (for Sketch and XD on macOS)

Helps you share design files, discuss changes, and code websites, mobile apps, & newsletters faster

Powers creative and consistent design at scale with a central place to manage design and coded components

The better way to share, organize and collaborate on designs—built with developers in mind

5 simple ways developers can help improve and enforce website accessibility

Empowers you to design with accessibility in mind from conception of brand to fruition of product. Contrast checker, colorblind simulation and color suggestions

A community-driven effort to make web accessibility easier. See section

View repository on GitHub !

Ship your design tokens without managing infrastructure

Free & open-source developer toolkit for expressing visual styles that can be shared across codebases, native platforms, and teams

Validate your design tokens against the Design Token Community Group spec

Abstract Connect

A Design tokens extractor for devs using Abstract & JavaScript

Design tokens Zeplin extension to generate your tokens in JSON format

Figmagic

Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents

Style Dictionary

A Style Dictionary uses design tokens to define styles once and use those styles on any platform or language

Extract design tokens from websites and use them in code and in your design tool. Use the design system you already have

Theo

Theo is an abstraction for transforming and formatting Design Tokens

— With collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems

Toolchain for building reusable, scalable Design Systems

Create beautiful living styleguides and document all your design system resources in one place.

Collaborative platform to build Design Systems on the code side. Empower your front-end with an all-in-one solution to manage components. Quick start, speed-up collaboration

Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles

Isolated React component development environment with a living style guide

Build bulletproof UI components faster. Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient

Styled System is a collection of utility functions that add style props to your React components and allows you to control styles based on a global theme object

Accessibility

Test component compliance with web accessibility standards

Actions

Get UI feedback when an action is performed on an interactive element

Backgrounds

Switch backgrounds to view components in different settings

Console

Show console output like logs, errors, and warnings in the Storybook

Docs

Document component usage and properties in Markdown

Knobs

Interact with component inputs dynamically in the Storybook UI

Links

Link stories together to build demos and prototypes with your UI components

Source

View a story's source code to see how it works and paste into your app

Storyshots

Take a code snapshot of every story automatically with Jest

Viewport

Build responsive components by adjusting Storybook's viewport size and orientation

Visual testing for React, Angular and Vue. Chromatic ensures consistency in UI components, down to the pixel. Every commit is automatically tested for visual changes in the cloud

Simple and complete testing utilities that encourage good testing practices

Book that gives the insights, skills, and practice needed to ace the toughest system design interview questions by Zhiyong Tan

Atomic design methodology for creating design systems by Brad Frost

Unify user experiences through a shared design language by Sarrah Vesselov and Taurie Davis

A practical guide to creating design languages for digital products by Alla Kholmatova (Smashing Magazine)

Creating and maintaining style guides for websites by Anna Debenham

A modern blueprint for scalable and sustainable websites by Micah Godbolt

A practical introduction to design systems by using React, Figma and Storybook by Emma Bostian

Creating Reusable Components for user experience design and documentation by Nathan Curtis

Will be building and refactoring common UI components, and share a couple of techniques she often uses to build with accessibility in mind by Sara Soueidan

Design shouldn't be a siloed practice, but a collaborative effort rooted in process. How do we get there? In this session, we'll look at how we can reframe our design approach to be more human-centric and systems-minded by Courtney Bradford

Conversation about the role of design systems in modern web development and how they can change the dynamics between designer and developer by Adam Argyle (Design Advocate at Google)

Women of React conf by

Will teach you how to build a UX Design System using the UX Pin prototyping & design platform

Shares practical examples on where to begin to set up a design system, what to prioritize, and how to make a big impact to customers and colleagues, to help you introduce systems that bring order to chaos by Diana Mounter (Design Systems Lead at GitHub)

Will share strategies for how to approach, design and build an effective design system; how to successfully maintain the system to ensure ongoing usefulness by Jina (Lead Designer on the Design Systems team at Salesforce UX)

Women of React conf by

Helps you learn how to keep your system and the products it serves in sync and understand how to maintain and evolve your design system to give your users get the best possible experience by Brad Frost (Front-end designer)