How design systems use Storybook

A roundup of the best Storybook techniques from leading design systems

Dominic Nguyen
Feb 11 · 6 min read

Design systems are essential infrastructure for tech companies like Shopify, Workday, and Salesforce. The benefits of design systems are championed by frontend luminaries like Brad Frost, Taurie Davis, and Nathan Curtis.

Frontend teams everywhere can ship faster with less work by adopting design systems for code reuse. Storybook’s open source tooling enables everyone, from solo developers to massive teams, to launch their own design systems with less work.

This article shares how real design systems use Storybook. You’ll get a glimpse of the addons and battle-tested workflows that can inspire your own design system.


What is a design system?

Companies are interested in design systems because reuse saves developers time –up to 40–81% compared to building from scratch– and ensure reliable UX across products.

OK, so why Storybook?

As a free open source project, Storybook is an attractive choice for pragmatic teams. It provides a hot-reloading dev environment, complete with addons for testing, deploy previews, responsive UI, and a whole lot more. In addition, Storybook is maintained by a thriving community which means constant upgrades.

Frontend developers use Storybook for two jobs:

  • 🏗 Workshop to build UI components in isolation
  • 📑 Styleguide to document UI component usage and props

Storybook is a workshop for building components

Using Storybook as a component workshop

BBC is one of the largest broadcasting services in the world. Their website must support millions of readers across countless devices and browsers. In addition, the UI is localized to dozens of countries from Nepal to Nigeria.

BBC Psammead uses Storybook to build and manage thousands of UI permutations. Recording the UI states with Storybook helps teams understand how components are supposed to behave. They rely on Knobs addon to interactively demo their components. To prevent bugs and increase test coverage, BBC also uses the Chromatic addon to automatically visual test every permutation across multiple browsers.

IBM Carbon provides comprehensive visual, UX, and code guidelines for all of IBM which spans 350,000 employees. It services IBM.com, Watson, Security, and cloud services that, in turn, are integral to thousands of enterprises around the world.

Storybook helps IBM create durable components from Buttons to DatePickers for multiple frameworks like React and Vue. Developers can interactively demo component behavior using Knobs, an addon for dynamically editing props. In addition, they’ve created custom addons for IBM-specific theming and typography.

Workday builds finance and HR apps for thousands of enterprises. The Workday platform is architected so that partners from other companies can build custom functionality atop their UI.

Workday Canvas ships with readymade UI components that in-house product teams and partners can integrate into their apps. Devs reuse components that match Workday’s look and feel to ship features faster. End users get a seamless user experience on the platform thanks to Canvas design system.

The design system uses Storysource, an addon that displays the source code for the story, to allow devs to copy and paste components into their app. Readme addon showcases installation instructions in a tab alongside the component implementation.

Shopify powers e-commerce operations for over 1 million businesses. Polaris is their open source design system for in-house apps and third-party party plugins.

Shopify Polaris uses the viewports addon to help developers adapt components to different browser sizes. Realtime accessibility auditing is supplied by the accessibility addon. They track component history and gather UI feedback on PRs with Chromatic. Like most teams presented here, they’ve also use the powerful Contexts addon to toggle between Shopify-specific themes.


Storybook is a styleguide generator

Using Storybook as a styleguide

Storybook Docs generates best practice UI docs automatically. You can further customize the docs with your own theme, MDX, or custom components. This allows teams to focus on writing docs instead of maintaining docs infrastructure. Checkout the stunning examples from the community.

ShareGate by GSoft builds a suite of enterprise tools that helps businesses manage and migrate to Office 365, Azure, and Microsoft Teams.

ShareGate Orbit design system uses Storybook Docs to generate their design system documentation. They use MDX to render JSX components inline with Markdown. Checkout their expandable component that reveals package installation instructions.

Reaviz, is a modular charting system for React. It uses a custom Storybook dark theme to showcase each data visualization.

Storybook’s tools are integral here for building components and writing usage instructions. Developers can quickly toggle between Storybook’s workshop (Canvas) and UI documentation (Docs) to fully understand how to integrate a Reaviz chart.

Monospaced design system takes advantage of Storybook Docs to auto-generate UI documentation from components. Docs never go out to date because they’re created from the bonafide production UI component. Whenever you update a story or prop the docs are regenerated.


Onwards

Learn how to build a design system

  • 🎨 Official Storybook Design System: Storybook’s own design system is consumed by three production apps and serves a community of 900+ open source contributors. Browse the repository to get a reference implementation that demos the latest Storybook features.

Get involved

Storybook

The UI development environment you'll ♥️ to use.

Thanks to Michael Shilman

Dominic Nguyen

Written by

Design at Chroma & Storybook — prev Apollo GraphQL, Meteor

Storybook

Storybook

The UI development environment you'll ♥️ to use.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade