awesome-design-systems

Design system guide

A curated collection of resources and articles on design systems, aiming to support developers in creating consistent and maintainable user interfaces.

📒 A curated list of bookmarks, resources and articles about design systems focused on developers.

GitHub
721 stars
20 watching
45 forks
last commit: over 1 year ago
Linked from 1 awesome list

atomic-designawesomeawesome-listcssdesigndesign-patternsdesign-systemdesign-systemsdesign-tokensdigital-productsfigmafrontendpattern-libpattern-libraryresourcesreusable-componentsstorybook

Awesome Design Systems / Design systems / Design systems of some "known" companies
Atlassian Design Guidelines End-to-end design language to create straightforward and beautiful experiences
Firefox Photon Design System Launch recognizable, enjoyable Firefox products and features faster
GitHub Primer Open-source it to allow the community to design and build their own projects
GitLab Design System - Pajamas Resources, components, and design guidelines behind GitLab
Google Material Design Create intuitive and beautiful products with Material Design
IBM Carbon Carbon is IBM's open-source design system for products and experiences
Shopify Polaris Our design system helps us work together to build a great experience for all of Shopify's merchants

Awesome Design Systems / Design systems / Design systems articles
A design system governance process
A guide to collaborating on design systems
Building a Design System? Start with a map
Building your design system
Design Systems are for People
Design Systems vs. Pattern Libraries vs. Style Guides – What's the Difference?
How Spotify organises work in Figma to improve collaboration
How to Build Design Systems
What is a Design System – Everything You Need to Know
Your sketch library is not a design system

Awesome Design Systems / Design systems / More resources
Design system checklist Build better design systems. An open-source checklist to help you plan, build and grow your design system
Design Systems Survey Designers and developers from more than 20 industries tell us about their design systems and their uses
Design.system Resources for the design systems community
Super friendly We help in-house teams make better digital products with design systems

Awesome Design Systems / UI Design tools / Design tools
Figma Helps teams create, test, and ship better designs from start to finish (cross-platform)
InVision The digital product design platform powering the world's best user experiences
Sketch A design toolkit built to help you create your best work from your earliest ideas, through to final artwork (for macOS)
AdobeXD 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 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
UXPin Design and manage your entire UX/UI project in one tool
Penpot Penpot is the first Open Source design and prototyping platform meant for cross-domain teams

Awesome Design Systems / UI Design tools / Integrations
Abstract Design collaboration without the chaos (for Sketch and XD on macOS)
Avocode Helps you share design files, discuss changes, and code websites, mobile apps, & newsletters faster
InVision Design System Manager Powers creative and consistent design at scale with a central place to manage design and coded components
Zeplin The better way to share, organize and collaborate on designs—built with developers in mind

Awesome Design Systems / UI Design tools / Accessibility (a11y)
Accessibility for developeres 5 simple ways developers can help improve and enforce website accessibility
Stark Empowers you to design with accessibility in mind from conception of brand to fruition of product. Contrast checker, colorblind simulation and color suggestions
The A11Y Project A community-driven effort to make web accessibility easier. See section

Awesome Design Systems / UI Design tools / Design tools articles
Adobe XD vs Sketch vs Figma vs InVision - How to Pick the Best Design Software in 2020

Awesome Design Systems / Design tokens
Design Tokens W3C Community Group View repository on GitHub !
DesignTokens.dev Ship your design tokens without managing infrastructure
Diez Free & open-source developer toolkit for expressing visual styles that can be shared across codebases, native platforms, and teams
Design Tokens Validator Validate your design tokens against the Design Token Community Group spec

Awesome Design Systems / Design tokens / Plugins
Abstract Connect 7 almost 2 years ago A Design tokens extractor for devs using Abstract & JavaScript
Zeplin JSON export tokens Design tokens Zeplin extension to generate your tokens in JSON format

Awesome Design Systems / Design tokens / Tools
Figmagic 814 4 days ago Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents
Style Dictionary 3,924 7 days ago A Style Dictionary uses design tokens to define styles once and use those styles on any platform or language
Superposition Extract design tokens from websites and use them in code and in your design tool. Use the design system you already have
Theo 1,965 about 3 years ago Theo is an abstraction for transforming and formatting Design Tokens

Awesome Design Systems / Design tokens / Articles
A designer's guide to the Figma API
Building a Visual Studio Code Theme with Style Dictionary
Design tokens with Figma
Documenting Design Tokens
How to manage your Design Tokens with Style Dictionary
Manage design tokens with TypeScript and styled-components
Theo Design Tokens Using Node-Sass Importer For Any Build Method
Tokenize it
Tokens in Design Systems

Awesome Design Systems / Coding tools
Backlight — 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

Awesome Design Systems / Pattern library / Styleguides and documentation
Stencil Toolchain for building reusable, scalable Design Systems
Zeroheight Create beautiful living styleguides and document all your design system resources in one place.

Awesome Design Systems / Pattern library / Develop isolated components
Backlight 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 Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles
React Styleguidist Isolated React component development environment with a living style guide
Storybook 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 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 84,675 6 days ago Test component compliance with web accessibility standards
Actions 84,675 6 days ago Get UI feedback when an action is performed on an interactive element
Backgrounds 84,675 6 days ago Switch backgrounds to view components in different settings
Console 200 4 days ago Show console output like logs, errors, and warnings in the Storybook
Docs 84,675 6 days ago Document component usage and properties in Markdown
Knobs 84,675 6 days ago Interact with component inputs dynamically in the Storybook UI
Links 84,675 6 days ago Link stories together to build demos and prototypes with your UI components
Source 84,675 6 days ago View a story's source code to see how it works and paste into your app
Storyshots 84,675 6 days ago Take a code snapshot of every story automatically with Jest
Viewport 84,675 6 days ago Build responsive components by adjusting Storybook's viewport size and orientation

Awesome Design Systems / Pattern library / Pattern libraries articles
Dependency discovery in Storybook
Design systems workflow in Storybook
How design systems use Storybook
How packaging makes it dead simple to share UI components
Storybook design system 1,917 4 days ago
Storybook Docs sneak peek

Awesome Design Systems / Testing / Unit & Regression test
Chromatic 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
Testing library Simple and complete testing utilities that encourage good testing practices

Awesome Design Systems / Books
Acing the System Design Interview Book that gives the insights, skills, and practice needed to ace the toughest system design interview questions by Zhiyong Tan
Atomic Design Atomic design methodology for creating design systems by Brad Frost
Building Design Systems Unify user experiences through a shared design language by Sarrah Vesselov and Taurie Davis
Design systems A practical guide to creating design languages for digital products by Alla Kholmatova (Smashing Magazine)
Front-End Style Guides Creating and maintaining style guides for websites by Anna Debenham
Frontend Architecture for Design Systems A modern blueprint for scalable and sustainable websites by Micah Godbolt
Introduction to Design Systems A practical introduction to design systems by using React, Figma and Storybook by Emma Bostian
Modular Web Design Creating Reusable Components for user experience design and documentation by Nathan Curtis

Awesome Design Systems / Talks
Building Accessible Interfaces: Patterns And Techniques 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 Processes & Systems in Craft 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
Design Systems - The State of the Web 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)
Design Systems Women of React conf by
How To Build a Design System | UXPin Will teach you how to build a UX Design System using the UX Pin prototyping & design platform
Introducing Design Systems Into Chaos 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)
Jina Anne - Designing a Design System 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)
Level up your Design System with styled-system Women of React conf by
Maintaining Design Systems 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)

Backlinks from these awesome lists:

More related projects: