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

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

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

设计令牌简介

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

设计令牌的概念随着设计系统的兴起及对更广泛标准和指南的需求增加而流行。它们作为管理日益复杂系统的解决方案，保持其结构化、可扩展和可扩展。

使用设计令牌的目标不仅是使设计决策更 intentional 和可维护，还能更容易地与代码保持同步。在大型系统中，这通常是一对多的关系。设计令牌使值与其应用无关，并能在各种产品和环境中扩展。

设计令牌在值、定义它们的工具及实现它们的软件之间创建了一个语义层。

实施挑战

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

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

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

设计令牌实践

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

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

如果我们想构建一个支持三种强调色，每种都有亮色和暗色主题的设计，那么总共有六种变体：

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

这就是设计令牌的用武之地。它们允许您有效地维护所有变体并测试所有可能的组合，即使是数百种，同时仍然构建单一设计而无需重复工作。

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

在这种情况下，我创建了三个组件：两种类型的按钮和输入，并将它们与文本层组合成几个Flex布局来构建这个屏幕。如果您想首先了解更多关于在Penpot中构建组件和布局的信息，我建议您重温我的一些 previous articles：

• 用Penpot组件构建设计系统
• Penpot的CSS网格布局：用超能力设计
• Penpot的Flex布局：在设计工具中构建CSS布局

现在我们有了设计，可以开始创建令牌了。您可以通过转到左侧边栏的令牌选项卡并单击其中一个令牌类别中的加号按钮来创建您的第一个令牌。让我们从创建颜色开始。

有效使用设计令牌

要有效使用设计令牌，关键是要很好地规划它们的命名和结构。您可能已经注意到，当我创建令牌时，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中准备好了设计令牌，下一步就是将它们带到您的代码中。 already today，您可以以JSON格式导出令牌，并且很快将提供一个API，连接并将令牌直接导入到您的代码库中。您可以在LinkedIn、BlueSky和其他社交媒体上关注Penpot，以第一时间听到下一次更新。Penpot背后的团队还计划在不久的将来使其设计令牌实施更强大，支持渐变、复合令牌（存储多个值的令牌）等。

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

• 设计令牌概述，Penpot网站
• 什么是设计令牌？完整指南，Penpot博客
• 设计令牌，Penpot文档
• 设计令牌格式模块，W3C社区组草案报告

结论

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

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

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