为什么大多数设计系统会崩溃

原子设计（Atomic Design），由 Brad Frost 提出，启发了前端开发者创建设计系统。它将我们的焦点从一次实现一个页面的 UI 转移到创建可重用的原子组件。设计系统从“锦上添花”变成了“必不可少”。

但大多数设计系统最终都崩溃了。根据2021 年设计系统调查，只有 40% 的系统是成功的。为什么有些设计系统会成功，而大多数却失败了？我采访了 Brad 以找出答案。

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

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

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

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

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

• 前端的前端（Front-of-frontend）专注于使用 HTML、CSS 和表现层 JavaScript 构建 UI。
• 后端的后端（Back-of-frontend）编写 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. 在 QA 期间使用内置测试对 stories 进行测试，包括可访问性、交互、视觉回归
4. 文档化组件并自动在线发布该文档
5. 在其他工作流程中共享组件，例如外部站点、Figma、Notion

Storybook 加载了设计系统必不可少的插件，这些插件可以帮助你检查对齐、间距和切换视口尺寸。将组件 props 连接到图形控件，以帮助团队成员探索组件 API。你甚至可以将 stories 导入到其他测试工具中，例如 Jest、Puppeteer 或 Chromatic。

“测试在历史上对我们来说一直非常粗糙，因为它就像“在你脑海中想象一个模态框，并想象点击一个按钮会触发该模态框……”

[使用] Storybook，我们可以实际地进行演示并重现这些点击，就像大多数用户体验它一样——多么棒的概念！而且它通过了检查，因为它都是可视化的。”

结论

设计系统已经渗透到设计和开发之间的空间。Brad 的经验是团队理解生产高质量设计系统所需的技能和工作流程的绝佳指南。观看下面的完整采访

你的团队需要强大的前端的前端工程技能和正确的工具。前端工作台为设计系统提供了理想的环境，允许你一次专注于一个 UI 组件。从那里，从组件自动生成文档，以便你团队的文档不会过时。

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