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

Overview

Design systems power the frontend teams of Shopify, IBM, Salesforce, Airbnb, Twitter, and many more. This guide for professional developers examines how the smartest teams engineer design systems at scale and why they use the tools they use. We'll walk through setting up core services, libraries, and workflows to develop a design system from scratch.

Table of Contents
  1. 1
    Introduction
    A guide to the latest production-ready tools for design systems
  2. 2
    Architecture
    How to extract a design system from component libraries
  3. 3
    Build
    Setup Storybook to build and catalog design system components
  4. 4
    Review
    Collaborate with continuous integration and visual review
  5. 5
    Test
    How to test design system appearance, functionality, and accessibility
  6. 6
    Document
    Drive design system adoption with documentation
  7. 7
    Distribute
    Learn to package and import your design system into other apps
  8. 8
    Workflow
    An overview of the design system workflow for frontend developers
  9. 9
    Conclusion
    Thriving design systems save time and increase productivity

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