为什么大多数设计系统都会内爆

原子设计由 Brad Frost 创作，它启发了前端开发者创建设计系统。它将我们的重点从逐页实现 UI 转移到创建可重用、原子化的组件。设计系统从“锦上添花”变成了“必不可少”。

但大多数设计系统最终都内爆了。根据2021 设计系统调查，只有 40% 的系统是成功的。为什么一些设计系统成功了，而大多数却失败了？我采访了 Brad来找出原因。

这篇文章分享了 Brad 在耐克、Techcrunch、时代杂志等公司教授原子设计的七年经验中遇到的设计系统陷阱。我们将深入探讨哪些方法有效，哪些无效。

• 🙅‍♂️ 并非所有工程师都适合做设计系统工作
• 🛠 设计系统开发者需要定制工具
• 🐌 设计系统很快就会过时
• 📕 Brad Frost 如何使用 Storybook

并非所有工程师都适合做设计系统

设计系统不是应用程序的前端。一个常见的陷阱是将设计系统视为应用程序，而实际上它们是基础设施。设计系统开发者需要关注特定的问题，如可访问性、可组合性、兼容性和互操作性，这些问题会影响多个应用程序。

并非所有工程师都适合做设计系统工作。前端开发的技艺比以往任何时候都更广泛、更复杂。随着时间的推移，Brad 见证了前端分化成不同的关注点

• 前端的前端专注于使用 HTML、CSS 和展示性 JavaScript 构建 UI。
• 前端的后端编写 JavaScript 代码来获取数据并管理应用程序状态和逻辑。

这种分化对于团队理解其实际需求至关重要。设计系统侧重于 UI 模式，这意味着团队应优先考虑前端的前端技能。Brad 分享了转向前端的前端如何帮助他的客户摆脱“我们只招聘全栈开发者”的文化，转向组建更均衡的团队。

设计系统需要定制工具

设计系统需要专门的工具来独立开发可重用的 UI 组件。大多数开发者在使用 UI 组件的应用程序中构建它们。这无意中将 UI 与应用程序环境耦合，并带有隐式功能，如数据获取、全局配置和机密信息。这使得组件难以重用。

Brad 推荐像 Storybook 这样的前端工作台来构建设计系统。前端工作台帮助您将 UI 组件从应用程序中隔离出来，并通过模拟 props、数据和上下文来渲染它们的变体。这样无需启动应用程序即可验证 UI 的外观和行为。

“对于前端的前端开发者来说，Storybook 成为了构建所有 UI 代码的工作台环境。”

Brad 并非唯一持有这种想法的人。Tom Preston-Werner（GitHub 联合创始人）描述了他在RedwoodJS团队为什么将 Storybook 整合进他们的框架：

“你可以立即看到[当一个组件]渲染错误时……你只需要去 Storybook 看看，你的迭代就在那里……”

设计系统很快就会过时

想象一下使用一个文档过时的库的沮丧感。Brad 指出，文档过时是设计系统团队的主要陷阱

“他们把[设计系统]当作一个边缘事务……维护起来很痛苦，所以团队最终停止更新参考文档。一旦文档不再反映产品的实际情况，这项工作就彻底失败了。”

如果可以从代码自动生成文档，那将确保生产环境中的 UI 和文档保持同步。

当你在 Storybook 中构建组件时，你会很自然地将它们的所有用例捕获为 stories。这些 stories 还可以用于自动生成交互式 API 文档。此外，你还可以通过编写 Markdown 或嵌入设计资源来添加更多上下文。

Brad Frost 如何使用 Storybook

Brad 在 Storybook 中从组件到页面构建 UI 的每个部分，以“连接点滴”，打通设计系统与其所服务的产品。这样，当设计系统中的一个组件更新时，你可以立即在 Storybook 中验证其对你的 UI 页面的影响。他的工作流程大致如下：

1. 开发组件的状态和变体，以一种称为 stories 的通用格式。
2. 评审它们，在开发过程中验证外观。
3. 测试 stories，在质量保证（QA）期间使用内置测试功能，测试可访问性、交互、视觉回归
4. 文档化组件，自动生成文档并在线发布。
5. 分享组件，在其他工作流程中使用，例如外部网站、Figma、Notion

Storybook 提供了许多对设计系统至关重要的插件，可以帮助你检查对齐、间距以及切换视口尺寸。将组件的 props 连接到图形化控件 (Controls)，帮助团队成员探索组件 API。你甚至可以将 stories 导入到其他测试工具中，例如 Jest、Puppeteer 或 Chromatic。

“对我们来说，测试一直都很困难，因为这就像是‘在脑海中想象一个模态框，并想象点击一个恰好能触发该模态框的按钮…’"

“[使用] Storybook，我们可以真正地演示这些内容，并以大多数用户体验的方式重现这些点击——真是个好概念！而且这行得通，因为这一切都是可视化的。”

结论

设计系统已经渗透到设计与开发之间的领域。Brad 的经验为团队理解生产高质量设计系统所需的技能和工作流程提供了很好的指导。观看下面的完整访谈：

你的团队需要扎实的前端的前端工程技能和合适的工具。前端工作台提供了一个理想的设计系统环境，让你能够一次专注于一个 UI 组件。从那里，自动从组件生成文档，这样你的团队文档就不会过时。

学习如何开发设计系统
查看我们的深度教程面向开发者的设计系统。这是一个免费资源，分享了 Shopify、Auth0、Squarespace 和《纽约时报》的团队如何在 Storybook 中构建世界一流的设计系统。