How design systems use Storybook

A roundup of the best Storybook techniques from leading design systems

loading
Dominic Nguyen
@domyen

设计系统是Shopify、Workday和Salesforce等科技公司必不可少的基础设施. The benefits of design systems are championed by frontend luminaries like Brad Frost, Taurie Davis, and Nathan Curtis.

通过采用代码重用的设计系统,各地的前端团队可以以更少的工作量更快地交付. 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. 您将看到插件和经过战斗测试的工作流,它们可以激发您自己的设计系统.


What is a design system?

Before we begin, let’s recap why design systems exist. 现代用户界面是由数百个UI组件构造而成的,这些组件被无休止地重用以交付不同的用户流. 设计系统对所有可重用的UI组件进行分类,以帮助团队组装复杂的组件, yet durable UIs faster.

公司对设计系统很感兴趣,因为重用可以节省开发人员的时间 40–81% compared to building from scratch– and ensure reliable UX across products.

OK, so why Storybook?

In the past, most folks maintained their own stack for component tooling. 这是因为创建内部工具需要持续的开发工作,否则这些工作将用于特性开发.

作为一个免费的开源项目,Storybook对于务实的团队来说是一个有吸引力的选择. It provides a hot-reloading dev environment, complete with addons for testing, deploy previews, responsive UI, and a whole lot more. 此外,Storybook由一个蓬勃发展的社区维护,这意味着不断升级.

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

设计系统将可重用的UI组件分发给许多项目,但不绑定到一个应用程序. 开发人员使用Storybook独立于其他应用程序构建和测试UI组件.

BBC is one of the largest broadcasting services in the world. 他们的网站必须支持无数设备和浏览器上的数百万读者. 此外,UI被本地化到从尼泊尔到尼日利亚的几十个国家.

BBC Psammead uses Storybook to build and manage thousands of UI permutations. 用Storybook记录UI状态可以帮助团队理解组件应该如何运行. They rely on Knobs addon to interactively demo their components. To prevent bugs and increase test coverage, BBC also uses the Chromatic 插件,以自动可视化测试每个排列跨多个浏览器.

IBM Carbon 为IBM的35万名员工提供全面的可视化、UX和代码指南. It services IBM.com, Watson, Security, and cloud services that, in turn, are integral to thousands of enterprises around the world.

Storybook帮助IBM为多个框架(如React和Vue)创建从Buttons到DatePickers的持久组件. Developers can interactively demo component behavior using Knobs, an addon for dynamically editing props. 此外,他们还为特定于ibm的主题和排版创建了自定义插件.

Workday builds finance and HR apps for thousands of enterprises. Workday平台的架构使来自其他公司的合作伙伴可以在其用户界面上构建自定义功能.

Workday Canvas 提供了现成的UI组件,内部产品团队和合作伙伴可以将这些组件集成到他们的应用中. 开发人员可以重用与Workday外观相匹配的组件,从而更快地发布特性. 由于Canvas设计系统,最终用户在平台上获得了无缝的用户体验.

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 插件在组件实现旁边的TAB中显示安装说明.

Shopify powers e-commerce operations for over 1 million businesses. 北极星是他们针对内部应用和第三方插件的开源设计系统.

Shopify Polaris 使用viewports插件帮助开发人员调整组件以适应不同的浏览器大小. 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

2019年,Storybook引入了从现有故事生成UI文档的功能. 务实的开发者可以像普通开发者一样在Storybook中构建ui,并免费获得样式指南.

Storybook Docs generates best practice UI docs automatically. 您可以使用自己的主题、MDX或定制组件进一步定制文档. 这使得团队可以专注于编写文档,而不是维护文档基础设施. Checkout the stunning examples from the community.

GSoft的ShareGate构建了一套企业工具,帮助企业管理和迁移到Office 365, Azure, and Microsoft Teams.

ShareGate Orbit 设计系统使用Storybook Docs生成他们的设计系统文档. They use MDX to render JSX components inline with Markdown. 检出显示包安装说明的可扩展组件.

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

在这里,Storybook的工具对于构建组件和编写使用说明是不可或缺的. 开发人员可以在Storybook的工作室(Canvas)和UI文档(Docs)之间快速切换,以充分理解如何集成Reaviz图表.

Monospaced 设计系统利用Storybook Docs从组件自动生成UI文档. 文档从来不会过时,因为它们是由真正的产品UI组件创建的. Whenever you update a story or prop the docs are regenerated.


Onwards

设计系统正迅速流行起来,因为公司看到了可重用组件节省的工作量. 本文重点介绍了使用Storybook创建可重用UI组件和文档设计系统的各种方法. I hope it serves as inspiration as you build your own.

Learn how to build a design system

  • 📕 Design Systems for Developers: A free 9-chapter guide from Storybook maintainers (me!),教授专业开发人员如何将组件库转换为设计系统. Setup the production infrastructure used by leading frontend teams. 由Auth0、纽约时报、Shopify和Squarespace的开发者评审.
  • 🎨 Official Storybook Design System: Storybook自己的设计系统被三个产品应用所使用,并服务于一个由900多个开源贡献者组成的社区. 浏览存储库以获得一个演示最新Storybook特性的参考实现.

Get involved

Storybook由900多个开源贡献者维护,并由顶级维护者指导委员会指导. If you are interested in contributing, check out Storybook on GitHub, create an issue, or submit a pull request. Join us also in the Discord chat. Donate on Open Collective.

Did this article help you?

Get free UI development guides and tutorials like this emailed to you.

4,435 developers and counting

We’re hiring!

Join the team behind Storybook and Chromatic. 构建被成千上万的开发人员用于生产的工具. Remote-first.

View jobs

Popular posts

Chromatic 2.0 beta

Publish Storybook online to gather feedback faster
loading
Dominic Nguyen
by Chromatic
面向专业UI开发人员的深度指南和教程,来自Storybook团队
Guides
Intro to StorybookDesign Systems for DevelopersVisual Testing Handbook
Subscribe
加入Ink通讯,可以获得免费的教程、指南和通过电子邮件发给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10