设计系统如何使用Storybook

来自领先设计系统的最佳故事书技术综述

加载
多米尼克阮
@domyen

Design systems are essential infrastructure for tech companies like Shopify, 工作日, Salesforce. 设计系统的好处被前端的杰出人物所拥护,比如 布拉德·弗罗斯特, Taurie戴维斯, 内森·柯蒂斯.

Frontend teams everywhere can ship faster with less work by adopting design systems for code reuse. Storybook的开源工具支持每个人, 从独立开发者到大型团队, 以更少的工作量推出自己的设计系统.

本文将分享真正的设计系统是如何使用Storybook的. You’ll get a glimpse of the addons and battle-tested workflows that can inspire your own design system.


什么是设计系统?

在十博体育备用网址开始之前,让十博体育备用网址回顾一下设计系统存在的原因. Modern user interfaces are constructed from hundreds of UI components that are endlessly reused to deliver different user flows. Design systems catalog all the reusable UI components to help teams assemble complex, 但持久的ui更快.

Companies are interested in design systems because reuse saves developers time –up to 40–81% 与从零开始构建相比——并确保跨产品的可靠UX.

那么为什么是Storybook呢?

在过去,大多数人维护他们自己的组件工具堆栈. It was expensive because creating internal tools requires ongoing development effort that would otherwise be used for feature development.

As a free open source project, Storybook is an attractive choice for pragmatic teams. 它提供了一个热重载开发环境, 完成与测试插件, 部署预览, 响应用户界面, 还有更多. In addition, Storybook is maintained by a thriving community which means constant upgrades.

前端开发人员使用Storybook进行两种工作:

  • 🏗车间 单独构建UI组件
  • 📑格式指南 记录UI组件的使用和道具

Storybook是构建组件的车间

使用Storybook作为一个组件研讨会

Design systems distribute reusable UI components to many projects but aren’t tied to one app. Developers use Storybook to build and test UI components in isolation from other apps.

英国广播公司 是世界上最大的广播公司之一吗. 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.

英国广播公司 Psammead 使用Storybook构建和管理数千种UI排列. Recording the UI states with Storybook helps teams understand how components are supposed to behave. 他们依靠 旋钮 插件交互式演示他们的组件. 为了防止漏洞和增加测试覆盖率,英国广播公司还使用了 彩色 addon to automatically visual test every permutation across multiple browsers.

IBM碳 provides comprehensive visual, UX, code guidelines for all of IBM which spans 350,000 employees. 信息技术服务 IBM.com, 沃森, 安全, 云服务 反过来,这对世界上成千上万的企业来说是不可或缺的.

Storybook helps IBM create durable components from Buttons to DatePickers for multiple frameworks like React and Vue. 开发人员可以使用交互式演示组件行为 旋钮,一个动态编辑道具的插件. In addition, they’ve created custom addons for IBM-specific theming and typography.

工作日 为数千家企业构建财务和人力资源应用. The 工作日 platform is architected so that partners from other companies can build custom functionality atop their UI.

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

设计系统使用 Storysource, 一个显示故事源代码的插件, 允许开发者复制和粘贴组件到他们的应用程序. 自述 addon showcases installation instructions in a tab alongside the component implementation.

Shopify 为超过100万家企业的电子商务运营提供动力. Polaris is their open source design system for in-house apps and third-party party plugins.

Shopify北极星 uses the viewports addon to help developers adapt components to different browser sizes. 的提供实时可访问性审计 可访问性插件. 他们 跟踪组件历史 收集用户界面反馈 彩色. 和这里的大多数球队一样,他们也使用了强大的力量 上下文 在特定的shopify主题之间切换.


Storybook是一个样式指南生成器

使用Storybook作为风格指南

In 2019, Storybook introduced the ability to generate UI documentation from existing stories. Pragmatic developers could build UIs in Storybook like normal and get a styleguide for free.

故事书文档 自动生成最佳实践UI文档. 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. 看看社区中令人惊叹的例子.

ShareGate by GSoft builds a suite of enterprise tools that helps businesses manage and migrate to Office 365, Azure, 和微软的团队.

ShareGate轨道 design system uses 故事书文档 to generate their design system documentation. 他们使用MDX与Markdown内联呈现JSX组件. Checkout their expandable component that reveals package installation instructions.

Reaviz,是React的模块化图表系统. 它使用一个定制的Storybook暗主题来展示每个数据可视化.

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.

等宽 design system takes advantage of 故事书文档 to auto-generate UI documentation from components. Docs never go out to date because they’re created from the bonafide production UI component. 每当您更新一个故事或道具时,都会重新生成文档.


Design systems are exploding in popularity because companies see the work savings of reusable components. This article highlights diverse ways Storybook is used to create reusable UI components and document design systems. 我希望它能激励你建立自己的网站.

学习如何建立一个设计系统

  • 📕 为开发人员设计系统: 由Storybook维护者(我)提供的免费9章指南!) that teaches professional developers how to transform component libraries into design systems. 建立前端团队使用的生产基础设施. Peer reviewed by developers at Auth0, New York Times, Shopify, Squarespace.
  • 🎨 官方故事书设计系统: 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.

参与

Storybook is maintained by 900+ open source contributors and guided by a steering committee of top maintainers. 如果你有兴趣投稿,请查看Storybook GitHub,创建一个问题,或提交一个pull请求. 加入十博体育备用网址吧 不和 闲谈,聊天. 上的捐赠 开放的集体.

这篇文章对你有帮助吗?

获得免费的UI开发指南和教程,就像这个电子邮件给你.

4402个开发者,还在增加

十博体育备用网址正在招聘!

加入故事书和彩色的团队. Build tools that are used in production by 100s of thousands of developers. Remote-first.

视图的工作

受欢迎的文章

彩色2.0β

在线发布Storybook以更快地收集反馈
加载
多米尼克阮
通过彩色
In-depth guides and tutorials for professional UI developers, from the Storybook team
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
Join the 墨水 newsletter to get free tutorials, guides, resources emailed to you.
友情链接: 1 2 3 4 5 6 7 8 9 10