How to build production design systems with Storybook
2020 edition of our popular design system guide
Reusing code can see time savings of 42–81%. Design systems allow you to reuse UI code.
Last year, our maintenance team summarized how leading design systems are developed into an in-depth guide: Design Systems for Developers. It was inspired by Storybook’s own production system and peer reviewed by experts from Auth0, New York Times, Acivilate, Squarespace and Shopify.
I’m thrilled to share the 2020 edition of Design Systems for Developers that’s updated for Storybook 6.0.
What are design systems anyways?!
A design system is a tool that shares UI patterns in one place. Delivering guidelines, principles, tools, workflows and coded components. Benefits:
- Stop reinventing the wheel. Build a component once and reuse it across the app.
- A consistent experience for your customers.
- Develop good-looking UIs with less work.
- Spend less time fixing styling issues
Who uses design systems?
- According to UX Pin, 69% of Enterprise UX teams
- 86% of participants in the InVision Design Genome project
- The 2019 Design Systems Survey puts the number at 92% of the in-house team respondents
So, what’s in a design system?
There are six key elements of a design system:
- Design Tokens: styling-specific variables such as typography, colours, and spacing.
- Design Kit: reusable design assets for prototyping, built in tools like Figma or Sketch.
- Component Library: a set of JavaScript components
- Component Explorer: a tool for developing components in isolation
- Documentation: usage instructions, narrative, do’s and don’ts
- Contribution Model: the workflow for teams using and contributing to the design system.
How to get started with design systems in Storybook 6.0
Our goal is to help you get started with a design system. You’ll learn how to develop a workflow that promotes adoption, simplifies maintenance and, wherever possible, automates manual tasks.
Some highlights:
- Args auto-generate controls and actions for event logging. Reduce size and complexity of stories.
- Controls allow you to live edit a component’s inputs without touching code. Design systems creators can easily stress test components.
- With CSF you can recycle stories for visual, unit tests or even end-to-end tests.
- Storybook Docs addon generates rich documentation from existing stories. Reducing maintenance overhead.
- Make life easier for the users of your design system. Composition combines both the design system and the application Storybooks into one workspace. No more tab-switching 🙌
Check out Design Systems for Developers »
Cheers,
Varun, Storybook DX
