Design Systems for Developers

A guide that teaches professional developers how to transform component libraries into design systems and set up the production infrastructure used by leading frontend teams.
Languages: English
+38
Contributors
9
Chapters
Design Systems for Developers

What you'll build

React
styled-components
Prettier
CircleCI
ESLint
Chromatic
Jest
npm
Auto

Design System example

Follow along as we code a design system that's inspired by Storybook's own. We'll learn the developer perspective on design systems by examining three technical pieces of a design system.

  • 🏗 Common reusable UI components
  • 🎨 Design tokens: Styling-specific variables such as brand colors and spacing
  • 📕 Documentation site: Usage instructions, narrative, do’s and don'ts

After that, we'll set up the industrial-grade infrastructure for review, testing, documentation, and distribution.

Authors
loading
Dominic Nguyen
Storybook design
loading
Tom Coleman
Storybook core
Reviewed by
loading
Fernando Carrettoni
Design Systems at Auth0
loading
Jessie Wu
Engineer at New York Times
loading
John Crisp
Engineer at Acivilate
loading
Daniel Duan
Engineer at Squarespace
loading
Kaelig Deloumeau-Prigent
UX Development at Shopify