自动化设计系统：入门技巧与资源指南

设计系统不仅仅是样式指南：它们由工作流、令牌、组件和文档组成——团队依赖这些内容来构建一致的产品。随着项目增长，保持所有内容同步迅速变得棘手。本文将探讨智能工具结合自动化如何加速流程、减少错误，并帮助团队专注于设计而非维护。

设计系统不仅仅是一组颜色和按钮。它是一种共享语言，帮助设计师和开发者共同构建优秀产品。其核心包括令牌（如颜色、间距、字体）、组件（如按钮、表单、导航），以及跨项目绑定所有内容的规则和文档。

如果您曾使用过Google Material Design或Shopify Polaris等系统，就会看到设计系统如何为结构和行为设定清晰期望，使团队协作更顺畅、更快速。但尽管设计系统促进一致性，保持所有内容同步却是困难的部分。在Figma中更新令牌（如颜色或间距值）时，该更改必须出现在代码、文档和其他所有使用的地方。

组件也是如此：当按钮的行为发生变化时，它需要在整个系统中更新。这正是正确工具和一点自动化可以发挥作用的地方。它们有助于减少重复性工作，并在系统增长时保持其易于管理。

本文将涵盖各种工具和技术，用于同步令牌、更新组件和保持文档最新，展示自动化如何使所有这些变得更容易。

自动化的构建模块

让我们从基础开始。颜色、排版、间距、半径、阴影以及构成您视觉语言的所有微小值被称为设计令牌，它们旨在成为UI的单一事实来源。您会在Figma等设计软件、代码、样式指南和文档中看到它们。Smashing Magazine之前曾详细报道过它们。

问题是它们经常不同步，例如当颜色或组件在设计中被更改但未在代码中更新时。团队增长或变化越多，这些不匹配就越明显；不是因为人们不注意，而是因为手动同步无法扩展。这就是为什么自动化令牌通常是团队开始构建设计系统时应该考虑的第一件事。这样，您可以从共享令牌源中提取，而不是在Figma和配置文件中重复编写相同的颜色值，并让该源驱动设计和开发。

有一些工具旨在使这更容易。

Token Studio

Token Studio是一个Figma插件，让您直接在文件中管理设计令牌，将其导出为不同格式，并同步到代码。

（大预览）

Specify

Specify让您从Figma收集令牌并将其推送到不同目标，包括GitHub仓库、持续集成流水线、文档等。

Design-tokens.dev

如果您需要有关如何构建令牌、格式化它们（例如JSON、YAML等）和思考令牌类型的提示，Design-tokens.dev是一个有用的参考。

（大预览）

NameDesignTokens.guide

NameDesignTokens.guide帮助处理命名约定，这确实是一个常见的痛点，尤其是在处理大量令牌时。

（大预览）

一旦您的令牌设置并连接好，您将花费更少的时间修复不一致性。它还为您提供了一个坚实的基础来扩展，无论是添加主题、切换品牌，甚至为多个产品构建系统。

那时命名真正开始重要。如果您的令牌或组件没有清晰命名，事情很快就会变得混乱。

注意：如果您在处理大型系统，Vitaly Friedman的“如何命名事物”值得一读。

从那里开始，一切都是关于组件的。令牌定义值，但组件是人们实际使用的东西，例如按钮、输入、卡片、下拉菜单——您能想到的。在完美的设置中，您构建一次组件并在各处重用。但没有结构，事情很容易“漂移”出范围。例如，最终可能会出现同一按钮的五个版本，并且代码中的内容与Figma中的不匹配。

自动化不取代设计，而是将所有内容连接到一个源。

Figma组件与生产中的组件匹配，文档在组件更改时更新，整个团队从同一库中提取，而不是重建自己的版本。这是真正协作发生的地方。

以下是一些帮助实现这一目标的工具：

一切如何连接？

许多工作直接从您的设计应用程序内部开始。一旦您的令牌和组件就位，像Supernova这样的工具通过提取设计数据、跨平台同步并生成生产就绪代码来帮助您进一步推进。您不需要编写自定义脚本或使用Figma API来从自动化中获得价值；这些工具为您处理大部分工作。

但对于想要完全控制的团队，Figma确实提供了一个API。它让您做以下事情：

• 直接从Figma文件中提取令牌值（如颜色、间距、排版），
• 跟踪组件和变体的更改，
• 读取元数据（如样式名称、结构或使用模式），以及
• 映射设计中哪些组件在哪里使用。

Figma API基于REST，因此与自定义脚本和自动化配合良好。您不需要庞大的设置，只需要正确的部分。在开发方面，团队通常使用Node.js或Python来处理自动化。例如：

• 从Figma获取样式。
• 将其转换为JSON。
• 将值推送到设计令牌仓库或直接推送到代码库。

对于大多数用例，您不需要那种级别的设置，但如果您的团队超出了无代码工具的范围，知道它的存在是有帮助的。

您的令牌和组件来自哪里？ 更新如何发生？ 什么工具保持一切连接？

一旦清楚了这些，工作流就变得更容易管理，您花费更少的时间尝试修复更改或不匹配。当令牌、组件和文档保持同步时，您的团队移动更快，花费更少的时间修复相同的问题。

提取设计数据

Figma是一个协作设计工具，用于创建UI：按钮、布局、样式、组件，以及构成产品视觉语言的所有内容。它也是您所有设计数据所在的地方，包括我们之前讨论的令牌。这些数据是我们将提取并最终连接到您的代码库的内容。但首先，您需要一个设置。

要跟随操作：

1. 前往figma.com并创建一个免费账户。
2. 如果您更喜欢本地工作，请下载Figma桌面应用程序，但如果您的设备较旧，请注意系统要求。

一旦进入，您将看到一个类似以下的主屏幕：

（大预览）

从这里开始，是时候设置您的设计令牌了。您可以从头开始创建所有内容，或使用Figma社区的模板来节省时间。如果您不想自己构建所有内容，模板是一个很好的选择。但如果您更喜欢完全控制，创建自己的设置也完全有效。

还有其他获取令牌的方法。例如，像namedesigntokens.guide这样的网站让您以JSON等格式生成和下载令牌。唯一的缺点是Figma不允许您直接导入JSON，因此如果您走那条路，您需要引入一个中间工具，如Specify，来弥合差距。它有助于在Figma、GitHub和其他地方之间同步令牌。

但对于本文，我们将保持简单并坚持使用Figma。从Figma社区选择任何设计系统模板开始；有很多可供选择。

（大预览）

根据您选择的模板，您将获得一个预定义的令牌集，包括颜色、排版、间距、组件等。这些模板有各种类型：网站、电子商务、作品集、应用程序UI工具包，您能想到的都有。对于本文，我们将使用/Design-System-Template–Community，因为它包括大多数您开箱即需要的令牌。但如果您想尝试其他内容，请随意选择不同的模板。

一旦您选择了模板，就是时候下载令牌了。我们将使用Supernova，一个直接连接到您的Figma文件并提取设计令牌、样式和组件的工具。它使设计到代码的过程更加顺畅。

步骤1：在Supernova上注册

前往supernova.io并创建一个账户。一旦进入，您将登陆一个类似这样的仪表板：

（大预览）

步骤2：连接您的Figma文件

要拉入令牌，前往Supernova中的数据源部分，并从可用源列表中选择Figma。（您还会看到其他选项，如Storybook或Figma变量，但我们专注于Figma。）接下来，点击连接新文件，粘贴您的Figma模板链接，并点击导入。

（大预览）

Supernova将从您的模板加载完整的设计系统。从您的仪表板，您现在将能够看到所有令牌。

（大预览）

将令牌转换为代码

设计令牌在Figma内部很棒，但当您将它们转换为代码时，真正的价值显现出来。这是您团队中的开发人员实际使用它们的方式。

问题是：许多团队默认手动复制颜色、间距和排版等值。但当您在Figma中对它们进行更改时，代码立即不同步。这就是为什么自动化这个过程是一个巨大的胜利。

而不是为每个项目重写相同的主题设置，您生成它，不断将设计转换为开发就绪的资产，并从单一事实来源保持一切同步。

现在我们已经将所有令牌放在Supernova中，让我们将它们转换为代码。首先，前往代码自动化选项卡，然后点击新建流水线。您将看到不同的选项，取决于您想要生成的内容：React Native、CSS-in-JS、Flutter、Godot等。

为了演示，让我们选择CSS-in-JS选项：

（大预览）

之后，您将登陆一个设置屏幕，包含三个部分：数据、配置和交付。

数据

在这里，您可以选择一个主题。起初，它可能只给您“黑色”作为选项；您可以选择那个或留空。目前真的不重要。

（大预览）

配置

这是您控制代码结构的地方。我选择了PascalCase作为令牌名称的格式。您还可以更新间距、颜色或字体样式等事物的分组和保存方式。

（大预览）

交付

这是您选择输出交付方式的地方。我选择了“仅构建”，它构建代码供您下载。

（大预览）

一旦完成，点击保存。流水线被创建，您将在仪表板中看到它列出。从这里，您可以下载您的令牌代码，它已经生成。

自动化文档

那么，设计系统中的文档点是什么？

您可以将其视为团队的说明书。它解释了每个令牌或组件是什么，为什么存在，以及如何使用它。设计师、开发者和您团队中的任何其他人都可以保持在同一页面上——没有猜测，没有来回。只是清晰的上下文。

让我们从我们停止的地方继续。Supernova能够处理您的文档。前往文档选项卡。这是您可以从同一地方开始编辑关于您设计系统文档的所有内容的地方。

您可以：

• 为您的令牌添加描述，
• 定义每个基础令牌的用途（以及不用于什么），
• 按颜色、排版、间距或组件组织部分，以及
• 放入图像、代码片段或示例。

您正在同一工具中构建文档，您的令牌也住在那里。换句话说，没有在工具之间跳跃，没有额外的设置。这就是自动化发挥作用的地方。您编辑一次，您的文档保持与设计源同步。所有内容都保持在一个环境中。

（大预览）

一旦完成，点击发布，您将呈现一个新窗口，要求您登录。之后，您能够访问您的实时文档站点。

自动化的实用技巧

自动化很棒。它节省了数小时的手动工作，并保持您的设计系统在设计和代码之间紧密。诀窍是知道何时自动化以及如何确保它随着时间的推移继续工作。您不需要立即自动化所有内容。但如果您一次又一次地做同样的事情，那是一种红旗。

一些考虑使用自动化的迹象：

• 您在多个平台（如Web和移动）上使用相同的样式。
• 您有一个由多个团队使用的共享设计系统。
• 设计令牌经常更改，您希望更新自动流入代码。
• 您厌倦了每次品牌团队调整颜色时的手动更新。

有三个步骤您需要考虑。让我们看看每一个。

步骤1：关注工具和API更新

如果您的流水线依赖于设计工具，如Figma，或平台，如Supernova，您将想知道何时进行更改，并评估它们如何影响您的工作，因为即使是小更新也可以悄悄影响您的导出。

不时检查Figma的API变更日志是一个好主意，特别是如果您的令牌同步感觉有问题。他们经常更新变量和组件的结构方式，这可能会影响您的流水线。还有一个产品更新的RSS源。

Supernova的产品更新也是如此。他们定期推出改进，可能会调整您的令牌处理或导出方式。如果您使用像Style Dictionary这样的开源工具，关注GitHub仓库（特别是问题选项卡）可以节省您以后调试奇怪令牌名称更改的时间。

所有这些都不是关于粘在发布说明上，而是有一个系统来检查是否突然停止工作。这样，您将在事情到达生产之前捕获它们。

步骤2：将您的流水线分解为更小的步骤

团队常陷入的陷阱是尝试在一个大运行中自动化所有内容：颜色、间距、主题、组件和文档，所有内容在一个点击中处理。这听起来方便，但难以维护，甚至更难调试。

将您的自动化分成块更易于管理。例如，有一个处理核心设计令牌（如颜色、间距和字体大小）的单一工作流，另一个用于主题变体（如亮和暗主题），还有一个用于组件映射（如按钮、输入和卡片）。这样，如果您的团队更改Figma中间距令牌的命名方式，您只需要更新工作流的一部分，而不是整个系统。测试和重用较小的步骤也更容易。

步骤3：每次测试输出

即使一切运行良好，总是花点时间检查导出的输出。它不需要复杂。一些关键事情：

• 令牌名称是否干净和可读？ 如果您看到像PrimaryColorColorText这样的东西，那是一个红旗。
• 是否有任何东西意外消失或重命名？ 这比您想象的更常见，特别是在设计更改后的排版或间距令牌中。
• UI是否仍然工作？ 如果您使用像Tailwind、CSS变量或自定义主题这样的东西，双重检查新令牌值没有破坏设计或构建过程中的任何东西。

为了早期捕获问题，在流水线完成后立即运行像ESLint或Stylelint这样的工具有帮助。它们将在事情发货之前标记奇怪的语法或命名问题。

AI如何帮助

一旦您的自动化稳定，有一个下一层可以提升您的工作流：AI。它不仅仅用于编写代码或生成模型，而是用于帮助处理设计系统中消耗时间的小而重复的事情。当正确使用时，AI可以在不取代您对系统控制的情况下提供帮助。

以下是它可能适合您工作流的地方：

命名建议

当您处理数百个令牌时，清晰且一致地命名它们是一个真正的挑战。一些AI工具可以通过基于您设计中的模式为您的令牌或组件建议干净、可读的名称来帮助。它不完美，但它是启动命名的一个好方法，特别是对于大型团队。

模式识别

AI还可以在您的设计文件中发现重复的样式或使用模式。如果多个按钮或卡片共享相似的间距、阴影或排版，由AI驱动的工具可以在人类注意到之前分组或建议组件进行系统化。

自动化文档

而不是从零开始编写所有内容，AI可以基于您的令牌、样式和使用生成文档的第一稿。您仍然需要审查和细化，但它消除了空白页问题并节省了数小时。

以下是一些已经以实用方式将AI带入设计和开发空间的工具：

• Uizard：Uizard使用AI自动将线框转换为设计。您可以手绘一些东西，它将其转换为可用的模型。
• Anima：Anima可以将Figma设计转换为响应式React代码。它还帮助填充真实内容或布局结构，使其成为设计和开发之间的强大桥梁，带有一些AI辅助。
• Builder.io：Builder使用AI帮助视觉生成和编辑组件。它对于需要快速构建页面的营销人员或非开发人员特别有用。AI帮助简化布局、内容块和设计规则。

结论

本文不是关于在技术意义上实现完全自动化，而是更多关于使用智能工具来简化处理设计系统的琐碎和手动方面。导出令牌、生成文档和同步设计与代码可以自动化，使您的过程更快、更可靠，具有正确的设置。

而不是每次从零开始重建所有内容，您现在有一种方法来保持一致性、保持组织并节省时间。

进一步阅读

• Romina Kavcic的“设计系统指南”
• Vitaly Friedman的“90天设计系统”

（gg，yk）