结论
基于研究的调查表明，重用代码可以节省 42–81% 的时间，并将生产力提高 40%。因此，设计系统（促进用户界面代码共享）在开发者中越来越受欢迎也就不足为奇了。
在过去的几年里，我和 Tom 见证了无数资深团队将 Storybook 作为其设计系统工具的基础。他们专注于减少沟通开销、构建持久的架构以及自动化重复性手动任务。我们希望提炼出的这些常识性策略能够帮助您的设计系统蓬勃发展。
感谢您与我们一同学习。订阅 Storybook 邮件列表，以便在新文章和指南发布时收到通知。
本教程的示例代码
如果您正在与我们一起编写代码，您的代码仓库应该如下所示
示例代码基于 Storybook 自己的设计系统 (SDS)，该系统为成千上万的开发者提供用户体验。SDS 仍在开发中——我们欢迎社区贡献。作为贡献者，您将获得设计系统最佳实践和新兴技术的实践经验。SDS 也是 Storybook 团队演示前沿功能的地方。
关于我们
《面向开发者的设计系统》由 Dominic Nguyen 和 Tom Coleman 创建。Dominic 设计了 Storybook 的用户界面、品牌和设计系统。Tom 是 Storybook 前端架构指导委员会的成员。他参与了 Component Story Format、addon API、parameter API 的开发。
Storybook 设计系统的技术主管 Kyle Suss 和 Storybook Docs 的创建者 Michael Shilman 提供了专家指导。
内容、代码和制作由 Chromatic 提供。《InVision 设计前瞻基金》Design Forward Fund 慷慨解囊，通过拨款帮助启动了制作。我们正在寻求赞助商，以使持续维护和像这样的新指南成为可能。如有更多详情，请发送电子邮件至 Dominic。
拓展您的视野
值得扩展您的关注范围，以获得对设计系统的整体视角。
- Brad Frost 的《原子设计》 (书籍)
- Nathan Curtis 的 Eightshapes (博客)
- Sarrah Vesselov 和 Taurie Davis 合著的《构建设计系统》 (书籍)
来自作者的更多内容
- Storybook 入门指南 (指南)
- Tom Coleman 的《组件驱动开发》 (文章)
- Dominic Nguyen 的《为什么设计系统是单点故障》 (文章)
- Varun Vachhar 的《UI 测试实践指南》 (文章)
- Varun Vachhar 的《可视化测试》 (文章)
常见问题解答
设计系统难道就只有这些吗？
设计系统包括（但不限于）设计文件、组件库、令牌、文档、原则和贡献流程。本指南的范围限定为开发者对设计系统的视角，因此我们涵盖了部分主题。具体而言，是关于生产设计系统的工程细节、API 和基础设施。
设计系统的治理方面呢？
治理是一个细致入微的话题，它比我们能容纳在九个章节中的内容更广泛，且更具组织特性。
Storybook 是否与设计工具集成？
是的！Storybook 社区创建了许多插件，使设计工具集成变得容易。例如，InVision 的 Design System Manager 与 Storybook 集成，以在 InVision 应用中展示故事。还有社区为 design tokens、Sketch 和 Figma 创建的插件。
单个应用是否需要设计系统？
不需要。创建和维护设计系统存在机会成本。在小规模下，设计系统所需的精力大于节省的时间。
消费者应用如何保护自己免受意外的设计系统更改的影响？
没有人是完美的。您的设计系统不可避免地会发布一个影响消费者应用的错误。为了减轻这种干扰，请像我们对设计系统所做的那样，为您的客户端应用的 Storybook 配备自动化测试（可视化、单元等）。这样，当您在分支上更新依赖项时（手动或使用 Dependabot 等自动化服务），您的客户端应用的测试套件将捕获来自设计系统的传入回归。
如何提出对设计系统的调整建议？
设计系统团队是一个服务团队。它不是直接面向最终用户，而是为了提高内部应用团队的生产力而存在。设计系统的管理者负责管理请求并与其他团队沟通状态。许多团队使用 Jira、Asana 或 Trello 等任务管理器来跟踪提案。
特别鸣谢
感谢了不起的 Storybook 社区提供的宝贵反馈。
Gert Hengeveld 和 Norbert de Langen (Chroma), Alex Wilson (T. Rowe Price), Jimmy Somsanith (Talend), Dan Green-Leipciger (Wave), Kyle Holmberg (Air), Andrew Frankel (Salesforce), Fernando Carrettoni (Auth0), Pauline Masigla and Kathleen McMahon (O’Reilly Media), Shawn Wang (Netlify), Mark Dalgleish (SEEK), Stephan Boak (Datadog), Andrew Lisowski (Intuit), Kaelig Deloumeau-Prigent and Ben Scott (Shopify), Joshua Ogle (Hashicorp), Atanas Stoyanov, Daniel Miller (Agile Six), Matthew Bambach (2u), Beau Calvez (AppDirect), Jesse Clark (American Family Insurance), Trevor Eyre (Healthwise), Justin Anastos (Apollo GraphQL), Donnie D’Amato (Compass), Michele Legait (PROS), Guilherme Morais (doDoc), John Crisp (Acivilate), Marc Jamais (SBS Australia), Patrick Camacho (Framer), Brittany Wetzel (United Airlines), Luke Whitmore, Josh Thomas (Ionic), Ryan Williamson-Cardneau (Cisco), Matt Stow (Hireup), Mike Pitt (Zeplin), Jordan Pailthorpe (NextRequest), Jessie Wu (New York Times), Lee Robinson (Hy-Vee)