在Penpot中通过原生设计令牌整合设计与代码

Penpot团队持续推动其使命：构建不仅提供强大设计功能，还能与代码和现代开发实践深度整合的免费设计工具。在最新版本中，Penpot作为首个设计工具，引入了对原生设计令牌的支持。让我们深入了解这一概念及其在实际工作流程中的应用。

本文由Penpot友情支持，其使命是通过开源和开放标准平台将设计师与开发者的协作提升到新高度。

设计令牌概述

设计令牌是现代用户界面设计和工程的核心构建块。它们可理解为记录和组织设计决策的框架，充当设计师和工程师的单一事实来源，包含所有设计变量：颜色、排版、间距、填充、边框和阴影等。

设计令牌的普及与设计系统的兴起及对更广泛UI标准的需求增长同步。它们通过保持系统结构化、可扩展和可扩展性来管理日益复杂的系统。使用设计令牌不仅使设计决策更 intentional 和可维护，还能更轻松地保持与代码同步。

设计令牌在值、定义工具和实施软件之间创建语义层。

除了可维护性优势，使用设计令牌的常见原因是主题化。保持设计决策解耦意味着可以轻松跨多个集合交换值，从而实现从简单的明暗模式到多品牌处理或完全可定制UI等高级用例的整个界面外观更改。

实施挑战

直到最近，设计令牌还没有标准化格式——这仍然是一个 largely 理论概念，在不同团队和工具中实施方式各异。每个设计工具或前端框架都有自己的方法。与设计工具同步代码也是一个主要痛点，通常需要第三方插件和不可靠的同步解决方案。

然而，近年来，W3C（负责制定Web开放标准的国际组织）成立了专门的设计令牌社区组，旨在为产品和设计工具处理设计令牌创建开放标准。一旦该标准得到更广泛采用，将为行业带来更可预测和标准化的设计令牌处理方法。

为实现这一目标，需要在设计和开发两端进行工作。Penpot是首个按照W3C正在制定的标准实施设计令牌的设计工具。它还通过提供原生API，以官方标准化格式提供所有值，解决了第三方依赖问题。

设计令牌实践

为了更好地理解设计令牌及其实际应用，让我们一起来看一个示例。考虑以下登录屏幕的用户界面：

假设我们希望此设计在明暗模式下工作，并且能够使用几种强调色进行主题化。可能是我们在几个关联品牌或产品的网站上使用相同的认证系统。我们还可能希望允许用户根据需要自定义界面。

如果要构建一个支持三种强调色（每种有明暗主题）的设计，总共会有六种变体：

手动设计所有变体不仅繁琐且难以维护。每个更改都必须在六个地方重复。对于六种变体，虽然不理想但仍可行。但如果还想支持多种布局选项或更多品牌呢？很容易扩展到数百种组合，此时手动设计将变得不可控。

这时设计令牌就来救援了。它们允许您有效维护所有变体并测试所有可能组合（甚至数百种），同时仍构建单一设计而无需重复工作。

可以先在其中一个变体中创建设计，然后再开始考虑令牌。已有设计可能使规划令牌层次结构和结构更容易。

在这种情况下，我创建了三个组件：2种按钮和输入框，并将它们与文本层结合到几个Flex布局中以构建此屏幕。

创建设计令牌

设计准备就绪后，可以开始创建令牌。通过转到左侧边栏的令牌选项卡并单击某个令牌类别中的加号按钮来创建第一个令牌。让我们从创建颜色开始。

要有效使用设计令牌，关键是要很好地规划其命名和结构。您可能已经注意到，当我创建令牌时，Penpot自动为我创建了一个名为"Global"的新集合。所有设计令牌必须在集合内组织。

我将第一个集合称为"primitives"，以便存储字面值，如"blue"、“purple"或"grey”。为支持多种颜色阴影，我使用了数字，因此最终使用的令牌名称例如是"slate.1"或"slate.10"。

此时，我们可以开始考虑为各种主题处理多种颜色。要轻松在令牌之间切换，只需创建具有相同名称令牌的多个集合。为此，我将primitives分为两个集合：“light"和"dark”。可以通过在名称中添加斜杠来嵌套令牌集合。

在上面的视频中，您可以看到我有两个集合：light和dark，每个集合都有相同名称但值不同的令牌。此时，您已经可以引用原始令牌在明暗值之间切换。但是，将来可能会将相同的灰色阴影用于多种用途，如边框、背景或文本。保持这些定义独立将是更可维护的方法。

为实现这一点，需要引入第二个抽象层。在这种情况下，我创建了一个名为"globals"的新令牌集合，它引用primitives集合。“globals"中的所有值都引用其他现有令牌，如"primitives”。

对于globals，我使用了语义命名，如"text.muted"或"background.primary"，以强调令牌名称与其字面值无关。换句话说，“text.muted"名称在明暗模式下都适用，就像"background.primary"作为令牌名称无论当前使用什么品牌颜色都适用。相比之下，如果我们希望它们动态并能够在不同模式和品牌颜色之间切换，“text.dark"或"background.blue"就没有意义。

在Penpot中，可以通过将其他令牌包装在花括号中来引用它们。因此，如果选择"slate.1"作为文本颜色，它将引用当前活动的任何其他集合中的"slate.1"值。使用light集合活动时，文本将为黑色；使用dark集合活动时，文本将为白色。

可以将全局令牌应用于任何想要的图层。为此，选择一个图层，然后右键单击所选令牌。在上下文菜单中，可以在与令牌兼容的值中选择。对于颜色，将是填充或描边。

现在，如果打开和关闭集合，可以看到设计响应变化。使用light集合活动时，文本显示为黑色；使用dark集合活动时，文本显示为白色。

您可能已经注意到，多个集合可以同时活动，即使它们包含相同名称的值，如light和dark集合。在这种情况下，列表中最下面的集合将覆盖已定义的值。可以将其视为在任何编程语言中定义变量或在CSS中定义属性。同等特异性的最后一个值才是有效的。

但是，不需要手动打开和关闭集合来测试设计外观。为使其更容易，Penpot还提供了另一个称为主题的概念。主题是管理集合并将它们组合成功能设计选择的最佳方式。

对于明暗模式，我创建了两个主题：“light"和"dark”，在一个名为"Mode"的组下。这使得集合的使用方式更加清晰，并更容易在预定义选项之间切换。

对于每个主题，我选择了两个集合：一个定义值（“light"或"dark”），另一个实际用于设计样式（“globals”）。现在，可以使用主题下拉菜单快速切换主题。

此时，我们有两个抽象层：primitives（如基本颜色阴影）和语义层（背景、文本等）。有时可能需要更多。通过此设置，可以轻松在明暗模式之间切换，但如果还想在我之前展示的几种品牌颜色之间切换，同时仍能更改模式呢？为此，我们需要另一个主题（称为"Brand”）和父集合下的另外几个集合，该父集合也将称为"Brand”。对于后者，我做了三个选项：“Slate”、“Indigo"和"Purple”。在真实场景中，这些可能是品牌、产品等的名称。

为将所有内容整合在一起，品牌集合需要引用primitives，而"globals"集合需要引用"brand"集合。这样，我们创建了三个不同的品牌，每个品牌都有自己独立的明暗模式值。

这使我们能够在品牌和模式之间切换并测试所有可能组合。

下一步是什么？

希望您喜欢跟随这个示例。如果想在创建自己的文件之前查看上面展示的文件，可以在此处复制它。

颜色只是Penpot中可用的多种令牌类型之一。还可以使用设计令牌来维护间距、尺寸、布局等值。Penpot团队正在努力逐步扩展可用的令牌选择。所有都符合即将推出的设计令牌标准。

Penpot实施的原生设计令牌方法的好处超出了易用性和标准化。它还使令牌更强大。例如，它们已经支持使用您可能从CSS中认识的calc()函数进行数学运算。这意味着可以使用数学来加、乘、减等令牌值。

一旦在Penpot中准备好设计令牌，下一步就是将其引入代码。目前，您已经可以以JSON格式导出令牌，很快将提供一个API，连接并将令牌直接导入代码库。可以在LinkedIn、BlueSky和其他社交媒体上关注Penpot，以第一时间了解最新更新。Penpot背后的团队还计划在不久的将来通过支持渐变、复合令牌（存储多个值的令牌）等使其设计令牌实施更加强大。

要了解更多关于设计令牌及其使用方法，请查看以下链接：

• Design Token Overview, Penpot website
• What are design tokens? A complete guide, Penpot Blog
• Design Tokens, Penpot Docs
• Design tokens format module, W3C Community Group Draft Report

结论

通过添加对原生设计令牌的支持，Penpot在以有意义的方式连接设计和代码方面取得了实际进展。拥有所有设计变量良好文档化和组织是一回事。以基于开放标准、易于与代码连接的可扩展和可维护方式实现这一点——这是另一个层次。

实际好处是巨大的：更好的可维护性、更少的摩擦以及整个团队之间更轻松的沟通。如果您希望在保持设计师和工程师同步的同时为设计系统带来更多结构，Penpot的设计令牌实施绝对值得探索。

已经尝试过了吗？分享您的想法！Penpot团队在社交媒体上很活跃，或者只需在下面的评论部分分享您的反馈。