如何利用Penpot中的组件变体

通过组件变体，设计系统变得更加灵活，让您能够轻松复用同一组件，同时调整其外观或状态。在本文中，Daniel Schwarz演示了如何利用设计令牌，使用Penpot这一为可扩展、一致性设计而构建的开源工具来管理组件及其变体。

本文由Penpot的好朋友们友情支持，他们的使命是提供一个开源和开放标准的平台，将设计师和开发人员之间的协作提升到新的水平。谢谢！

自从Brad Frost在2013年普及数字设计中的设计系统使用以来，它们已成为组织甚至个人宝贵的资源，帮助他们构建外观和感觉一致的可复用设计模式。

但Brad不仅普及了设计系统；他还为我们提供了一个构建它们的框架，虽然我们不必完全遵循该框架（大多数人会根据自身需求进行调整），但大多数设计系统中一个特别重要的部分是变体，即组件的变体。组件变体允许设计与其他组件相同但又有所不同的组件，以便用户能够立即理解它们，同时为特定上下文提供清晰度。

这使得组件变体与组件本身同样重要。它们确保我们不会创建太多需要单独管理的组件，即使这些组件与其他组件只有轻微差异，并且由于组件变体被分组在一起，它们还确保了组织性和视觉一致性。

现在，我们可以在Penpot中使用它们，这是一个基于网络的开源设计工具，设计在此以代码形式表达。在本文中，您将了解变体、它们在设计系统中的地位，以及如何在Penpot中有效使用它们。

步骤1：整理设计令牌

在大多数情况下，区分一个变体与另一个变体的是它所使用的设计令牌。但设计令牌到底是什么？

想象一个品牌颜色，比如在CSS中等于hsl(270 100 42)的颜色值。我们将其保存为名为color.brand.default的“设计令牌”，以便更轻松地复用，而无需记住更繁琐的hsl(270 100 42)。

在此基础上，我们可能还会创建第二个设计令牌background.button.primary.default，并将其设置为color.brand.default，从而使它们等于相同的颜色，但使用不同的名称以建立两者之间的语义分离。这种引用另一个令牌值的方式通常称为“别名”。

这种设置使我们能够灵活地在整个文档范围内更改颜色值，更改组件中使用的颜色（可能通过切换到不同的令牌别名），或创建使用不同颜色的组件变体。最终，目标是能够一次性在许多地方进行更改，而不是逐个更改，主要通过编辑设计令牌值而不是设计本身，在特定范围内进行更改，而不是局限于全有或全无的更改。这也使我们能够无限制地扩展设计系统。

考虑到这一点，以下是一个主要按钮及其悬停和禁用状态的几个颜色相关设计令牌的粗略想法：

要在Penpot中创建颜色令牌，请切换到左侧面板中的“Tokens”选项卡，单击“Color”旁边的加号(+)图标，然后指定名称、值和可选描述。

例如：

• 名称：color.brand.default
• 值：hsl(270 100 42)（如果需要，可以使用颜色选择器）

创建设计令牌别名的过程基本相同。只需重复上述步骤，但对于值，请注意我如何引用另一个颜色令牌（确保包含花括号）：

• 名称：background.button.primary.default
• 值：{color.brand.default}

现在，如果颜色的值发生变化，按钮的背景也会变化。而且，如果我们想将颜色与按钮解耦，只需引用不同的颜色令牌或值即可。Mikołaj Dobrucki在另一篇Smashing文章中进行了更详细的介绍，但值得注意的是，Penpot设计令牌是平台无关的。它们遵循标准化的W3C DTCG格式，这意味着它们与其他工具兼容，并且可以轻松导出到所有平台，包括Web、iOS和Android。

在接下来的几个步骤中，我们将创建一个按钮组件及其变体，同时将不同的设计令牌插入不同的变体中。您将看到这样做的好处，以及使用设计令牌在变体中如何整体上有利于设计系统。

步骤2：创建组件

您需要创建一个所谓的“主”组件，这是您将来需要时更新的组件。其他组件——您实际插入设计中的组件——将是主组件的副本（或“实例”），这正是重点，对吧？一次更新，更改将反映在所有地方。

以下是我之前制作的一个，去掉了颜色：

要应用设计令牌，请确保您位于“Tokens”选项卡并选择了相关图层，然后选择要应用于它的设计令牌：

首先将其转换为默认变体。无论如何，要将此按钮转换为主组件，请通过画布（或“Layers”选项卡）选择按钮对象，右键单击它，然后从上下文菜单中选择“Create component”选项（或在选择后按Ctrl / ⌘ + K）。

记得也要命名组件。您可以通过双击名称（通过画布或“Layers”选项卡）来完成。

步骤3：创建组件变体

要创建变体，请选择主组件，然后按Ctrl / ⌘ + K键盘快捷键，或单击显示“Create variant”工具提示的图标（位于右侧面板的“Design”选项卡中）。

接下来，在变体仍被选中时，通过“Design”选项卡进行必要的设计更改。或者，如果您想将设计令牌换为其他设计令牌，可以按照最初应用它们的相同方式，通过“Tokens”选项卡进行操作。重复此过程，直到您在画布上设计出所有变体：

之后，您可能已经猜到，您需要命名变体。但避免通过“Layers”面板执行此操作。相反，选择一个变体，并将“Property 1”替换为描述每个变体区分属性的标签。由于本示例中我的按钮变体代表同一按钮的不同状态，我已将此属性命名为“State”。这适用于所有变体，因此您只需执行一次。

在属性名称旁边，您将看到“Value 1”或类似内容。为每个变体编辑该值，例如状态的名称。在我的例子中，我已将它们命名为“Default”、“Hover”和“Disabled”。

是的，您可以为组件添加更多属性。为此，请单击附近的加号(+)图标。不过，我稍后会讨论规模化下的组件变体。

要查看组件的实际效果，请切换到“Assets”选项卡（位于左侧面板），并将组件拖到画布上以初始化它的一个实例。再次记住从“Design”选项卡中选择正确的属性值：

如果您已经拥有Penpot设计系统，将多个组件组合成一个具有变体的组件不仅简单且防错，而且如果您使用使用正斜杠(/)的健壮属性命名系统，您可能已经准备好了。Penpot编制了一个非常直接的指南，但下图很好地总结了这一点：

组件变体在规模化下的工作方式

设计令牌、组件和组件变体——设计系统的三要素——共同工作，不仅创建强大而灵活的设计系统，而且创建可持续、可扩展的设计系统。这在提前思考时更容易实现，从使用令牌别名分离“什么”和“用于什么”的设计令牌开始，尽管起初这可能显得冗长。

例如，我对每个变体的文本颜色使用了color.brand.lightest，但不是直接插入该颜色令牌，而是创建了别名，如text.button.primary.default。这意味着我以后可以更改任何变体的文本颜色，而无需深入画布上的实际变体，或强制更改可能影响许多其他组件的color.brand.lightest。

因为请记住，虽然组件及其变体为我们提供了按钮的可复用性，但颜色令牌为我们提供了颜色的可复用性，这些颜色可能用于数十甚至数百个其他组件。设计系统就像一个活生生的生态系统，其中一些部分相互连接，一些部分没有连接，而一些部分现在或将来可能需要连接，我们需要为此做好准备。

好消息是，Penpot使所有这些都相当易于管理，只要您事先做一些规划。

考虑以下因素：

• 您将复用的设计令牌（例如，颜色、字体大小等）
• 设计令牌别名将被复用的地方（例如，按钮、标题等）
• 将设计令牌组织成集合
• 将集合组织成主题
• 将主题组织成组
• 您将需要的不同组件
• 每个组件您将需要的不同变体和变体属性

即使是我今天在这里设计的按钮，也可以远远超出我已经模拟的范围。想想所有可能出现的变体，例如次要按钮颜色、第三颜色、确认颜色、警告颜色、取消颜色、浅色和深色模式的不同颜色，更不用说更多状态的更多属性，例如激活和焦点状态。如果我们想要一整套变体矩阵，比如禁用状态的按钮可以被悬停，所有按钮都可以被聚焦？或者有些按钮有图标而不是文本标签，或两者兼有？

设计可能变得非常复杂，但一旦您将它们组织成Penpot中的设计令牌、组件和组件变体，它们实际上会感觉相当简单，特别是当您能够在画布上看到它们时，更不用说在几秒钟内进行重大更改而不会破坏任何东西了。

结论

这就是我们使组件变体在规模化下工作的方式。我们获得了可复用性的好处，同时保持了分叉设计系统任何方面（无论大小）的灵活性，而不会破坏它。而像Penpot这样的设计工具使得不仅建立设计系统成为可能，而且将其设计令牌和样式表达为代码。