⭐🦄 Building Design Systems ✨🌈

A collection of useful resources for building and maintaining a Design System.

☝ Note that this list is meant to be used for learning and researching purposes and is not complete.

Contents

• Articles
• Courses
• Examples
• Guides
• Tools
• Testing
• Contributing

Articles

• Introducing Storybook Design System
• [Storybook] How to setup visual regression tests with Loki

Courses

• Design Systems with React & Storybook by Emma Bostian - Frontend Masters

Examples

• Material UI - "MUI"
• Microsoft - "FluentUI"
• Storybook - "Storybook"
• Airbnb - "Lunar"
• Uber - "Baseweb"
• GitHub - "Primer"
• Digital Ocean - "Walrus"
• Khan Academy - "Wonder Blocks"
• Shopify - "Polaris"
• Adobe - "Spectrum"
• Ant - "Ant Design"
• Atlassian - Atlassian Design System
• SumUp - "Circuit UI"
• IBM - "Carbon Design System"
• Kiwi - "Orbit"
• Pinterest - "Gestalt"
• Twilio - "Paste"
• Segment - "Evergreen"

Guides

• Design Systems for Developers by Learn Storybook

Tools

• 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.

• React Styleguidist - is a component development environment with a hot reloaded dev server and an isolated React component development environment with a living style guide. It lists component props, and editable usage examples based on Markdown files.

• Ladle - develop and test your React stories faster

Visual Regression Testing ("VRT")

• Chromatic - chromatic automates gathering UI feedback, visual testing, and documentation, so developers can iterate faster with less manual work
• Percy - all-in-one visual review platform
• Loki - visual regression testing for Storybook
• Lost Pixel - holistic visual testing for your Frontend; first class integration with Storybook

Accessibility

• A11y - the A11Y Project is a community-driven effort to make digital accessibility easier.
• Web Content Accessibility Guidelines (WCAG)
• [Chrome Extension] WAVE Evaluation Tool
• MDN - Accessibility
• Accessible Palette - create color systems with consistent lightness and contrast

Contributing

PRs are welcome. I love finding new awesome resources that would shed light on the topic of Design Systems. Create a PR if you think something is worth sharing.

A few qualities that are appealing the most for me when adding resources:

1. Quality - should be well written
2. Be up to date

Thank you

I hope this list was helpful for you 🖤