使用 Storybook 管理设计令牌

TL;DR：我构建了一个故事书插件，从您的样式表和资产文件中生成设计令牌文档。

在此处查看演示： https://storybook-design-token.netlify.com/

作为一名前端开发者，我构建了许多 UI 组件库，帮助产品团队根据底层设计系统构建软件。在此过程中，我面临的主要问题之一一直是保持设计和开发的同步。将设计语言（就我而言，通常是以各种 Sketch 文件的形式交付）转化为代码是一个持续的过程，设计变更贯穿于设计系统的整个生命周期。

为了缩小设计与开发之间的差距，我喜欢探索将尽可能多的设计系统文档移至浏览器，并为设计系统的关键部分创建单一真实数据点的方法。这意味着要超越 UI 组件，深入研究底层设计语言。虽然 Sketch 和 Figma 等工具非常适合绘制草图、制作原型以及传达软件的外观和风格，但它们会分散设计系统的知识，使查找和访问这些信息变得更加困难。将它们放在更接近实际产品（即代码）的位置，有助于维护一个动态文档，从而降低过时的风险。

设计代币

组件构成了我们产品的基石，而设计令牌则定义了一组属性，我们可以使用它们来塑造组件的外观。通常，它们定义诸如排版、颜色、间距或设计系统的图标之类的内容。您可以查看Salesforce 的设计令牌集合，获取一些不错的示例。Brad Frost 最近将设计令牌置于他的原子设计原则的背景下。

从开发者的角度来看，设计令牌的妙处是什么？在大多数情况下，它们可以被描述为变量（例如 css 自定义属性或 sass 变量）和图标文件之类的资产。

使用 Storybook 管理设计令牌

Storybook是一款出色的工具，可用于在独立环境中开发可复用组件库，同时还能为使用组件库的产品团队创建简洁的视觉和技术文档。如果您需要构建可复用组件库，我强烈建议您尝试一下。它兼容所有主流 JavaScript 框架，甚至支持纯 HTML 和 CSS。

将代币设计成故事

Storybook 使用故事来描述组件及其不同状态。这些故事由开发人员以小模板的形式编写，展示组件的示例用法。IBM的故事书提供了一个包含各种组件的优秀示例。

我第一次尝试将设计 token 导入 Storybook 时，是手动编写故事，以一些简单的 html 表格形式列出 token。但很快，事情就变得一团糟。我不再需要在组件样式和 Sketch 文件之间同步 token，而是需要在组件样式、Sketch 文件和故事之间同步。此外，我发现自己不得不不断地在设计 token 故事和组件故事之间切换，才能找到我想要在组件中使用的正确 token。（Storybook 每次只显示一个故事。）

介绍Storybook Design Token 插件

幸运的是，Storybook 提供了一个很棒的插件开发 API，你可以用它来扩充你的故事。有一些很棒的插件可以自动生成组件文档、提供 11y 测试、显示源代码等等。

由于手动维护设计令牌故事的难度较大，我决定编写一个插件，将所有设计令牌与组件故事一起显示，同时无需手动维护设计令牌列表。插件通过解析 CSS 或 SASS 样式表和资源文件（目前仅支持 SVG 文件）来生成设计令牌文档，并附带完整的渲染示例。此外，它还允许您使用样式表中的注释将设计令牌分组。这样，您还可以定义令牌示例的渲染方式（例如，颜色、边框半径、盒子阴影等）。下面是 CSS 样式表中带注释令牌的一个小示例。

/**
 * @tokens Colors
 * @presenter Color
 */

:root {
  --n0: #fff; /* Optional token description */
  --n100: #fbfbfb;
  --n200: #edeeef;
  --n300: #e4e5e7;
  --primary: var(--n300);  /* --primary will be listed as an alias of --n300 */
}

/**
 * @tokens Border Radius
 * @presenter BorderRadius
 */

:root {
  --border-radius-m: 4px;
  --border-radius-l: 8px;
}

查看演示以了解其功能，或查看repo以获取更完整的功能列表和使用指南。

我非常期待听到您的反馈。您觉得这个插件用得好吗？您如何在设计系统中处理设计令牌？ Storybook 在最新测试版中引入了更多工具，以便在浏览器中记录您的设计系统。您是否认为设计交付成果会从静态设计工具转向浏览器？