一个 Figma 组件—— 3,360个变体

一个组件统治它们。

在 REI 担任 UX 主管期间，我经常为我们的设计系统 Cedar 做出贡献。最近，我一直致力于改善表单（Form）元素的可访问性（Accessibility）。事实证明，这些 UI 组件为开始探索 Figma 的 变体（Variants） 特性提供了绝佳的机会，因为每个文本输入（Text Input）、单选按钮（Radio Button）和复选框（Checkbox）都有很多很好的变体。

在余下的文章中，我将把 Variants（大写V）作为 Figma 特性。variants（小写v）则作为单个 UI 元素的实际变体，不要混淆。

（译者注：原文的 Variants 指代为 Figma 的变体特性，而 variants 则指的是 UI 元素里的实际变体，中文翻译都已校对过，此段翻译可忽视）

在引入变体特性之前，要浏览 Figma 资产库来查找具有多个状态或特征的组件很麻烦。更加痛苦的是创建既简洁又有意义的命名约定的挑战。变体特性允许你将多个组件组合为一个组件，从而完全消除了这种复杂性。你还可以通过自定义“属性”和“值”来管理那些状态和特征。这使得使用和维护特定的组件成倍地容易。

让我们看一下 Cedar 中的一个示例：复选框（Checkbox）

图1-复选框的18个组件在 Cedar 资产库

当我开始时，复选框组件在资产库中具有三个嵌套文件夹，每个文件夹用于元素的不同大小（小，中和大）。在这些文件夹中，有六个单独的组件，分别表示处于两个交互状态（静止（Rest）和禁用（Disabled））的复选框的三种状态（未选中（Unchecked）、选中（Checked）和不确定（Indeterminate））。总的来说，仅一个表单元素就包含18个单独的组件（图1）。

但是，等等，还有更多。

当我在努力改善复选框的设计和可访问性时，我意识到资产库中还没有考虑其他特征。这些包括悬停（Hover），焦点（Focus）和按下（Pressed）的交互状态，表单组布局的间距以及复选框放置位置的背景颜色（类似于明亮/黑暗模式）。这使得复选框的数量从18种增加到192种。

将它们添加到 Cedar 中会引入新的复杂性，并增加更多属性以进行跟踪；然而，将它们包含在内是很重要，这样使用该设计系统的任何人都可以创建可访问的表单元素而无需进行猜测。而且，借助变体特性，所有192个变体都可以轻松地在单个组件（简称为“复选框（Checkbox）”）中表示（图2）。不再需要这样的废话：Checkbox/ Checkbox_Compact/ 1 — Rest

图2-包含192个变体的单个复选框组件

我能够对单选按钮（Radio Button）应用相同的方法，从而产生具有120个变体的单个组件（图3）。我清单上的下一个是文本输入（Text Input），事实证明这是一项耗费巨大的举动。

图3-具有120个变体的单选按钮组件

相比之下，复选框和单选按钮如此简单，已经包含了近200个变体，而另一方面，文本输入具有无数的状态、用例和特征。 但是，文本输入具有多少个属性？ 我可以处理多少种变体？

提前剧透：很多。

解构文本输入

文本输入是最普遍的UI元素之一。在某个时候，我们所有人都使用它来输入我们的登录详细信息、信用卡号、送货和帐单地址等。它们的目的是引导用户顺利通过完成表格流程。那么，所有复杂性从何而来？

在 Cedar 中，我们的文本输入具有以下特征，这些特征基于使用上下文环境（图4）以各种方式组合：

• 文本输入有2种尺寸可供选择：默认尺寸和大尺寸

• 文本输入可以是必填或选填

• 文本输入中的文本显示占位符文本或用户输入值

• 文本输入中的图标：3个插槽，左边一个和右边两个

• 上方和下方的帮助文本

• 帮助链接和图标

• 4种交互状态：静止（Rest）、活动（Active）、禁用（Disabled）、错误（Error）

• 2种背景色：主色和次要色

  
  

  
  

  图4-演示文本输入的所有单一变量样式和属性

  （译者注：如上图，尺寸、需要吗（必填或选填）、字段文本、图标、帮助、状态、背景色）

  此时，需要设置一些约束和指导以限制不必要的组合——例如，不允许同时使用帮助链接和图标（图5），上方和下方的帮助文本（图6） ，或在字段中同时包含所有3个图标（图7）。

  

从左到右：图5—不要同时使用帮助操作和帮助图标。图6—不要同时占用两个帮助插槽。图7—不要同时使用所有三个图标槽。

是否可以将所有这些记录在一个组件中？我至少要去尝试……

于是我开始陷入疯狂。

设置复杂的变体

在此过程中，有两件事我必须要做的是：使用主组件和属性矩阵。虽然主组件是每个变体的共同起点，但属性矩阵帮助我建立了一个环境来跟踪和验证组件的每个可能排列。

构建一个主组件

主组件提供了复杂 UI 元素的蓝图，并通过嵌套帮助管理复杂性。（有关嵌套组件的其他信息，我推荐参考 Anthony DiSpezio 和 Thomas Lowry 的作品。）这是如何运作的？假设在特定的组件中我们要跟踪5个不同的属性，并且这些属性中的每一个都可以是“ 关（off）”或“ 开（on）”。主组件在“开”状态下显示所有可能的属性。换句话说，它以最复杂的形式表示组件，而不管这种情况是否会在现实中发生。

对于文本输入，主组件由三个嵌套组件组成，并对其应用了垂直自动布局（图8）。

• 顶部组件包括字段标签，可选项和必填星号，显示在字段上方的帮助文本以及帮助链接。自动布局将应用于嵌套组件的多个级别，以便它们可以在显示/隐藏时适应其内容和主框架（master frame）。

• 中间组件由一个带有水平自动布局的嵌套图层的组件组成。该字段由三个固定宽度的图标插槽，右边两个和左边一个以及一个用于填充容器的文本组件组成。 帮助图标会在该字段的右边。

• 底部组件包括帮助文本组件和验证信息组件。

在此，主组件（在图8的最右端可见）展示所有已填充的图标插槽，包括必填和可选的符号，字段上方和下方的帮助文本，帮助链接和帮助图标以及错误消息。这是最复杂的状态，但是，你永远不会在制作中看到这种状态。这只是展示空间分配的蓝图。

所有嵌套组件（包括主组件）都以.base/开头。用一个.或者 _作为组件名称前缀，以防止它们作为资产库的一部分发布和分发。

图8-文本输入主组件的结构分解。嵌套的组件从左到右构建，从而导致最右边的主组件。

等等——这是嵌套变体特性吗？！

注意在图8的中间组件实际上是其自身的一个变体特性。在这种情况下，嵌套一个变体可增加此组件的可伸缩性和适应将来的需求。如果要更改品牌颜色或围绕交互样式做出的决策，则只需在主组件内的变体特性中的这一点上进行调整。嵌套变体特性也可以用于扩展主组件的各个部分，只要它们占据相似的插槽并在最终演示中起作用即可。

图9-将错误消息组件转换为变体，包含警告和成功样式以用于表单反馈。

在我进行此工作时，仍需在系统中的其它地方对肯定和警告验证样式、颜色和图标做决定。一旦使用嵌套的变体方法完成了这些决定，我计划将错误组件（error component）转换为变体，以包含肯定和警告反馈（图9）。这些样式将对主组件适用。

现在，我有了一个主要的组件可以工作，是时候重新访问Text Input的7个属性和关联的值了（图10）。有了这些，我建立了一个工作区来开始构建该组件可能需要的许多排列。

图10-正在规划文本输入变体的属性和值

设置属性矩阵

属性矩阵需要一点数学运算，但本质上是一个网格系统，通过它可以表示属性和值的所有可能组合。首先，创建一个表格，其中每个单元格代表一个属性的值。接下来，在相反的轴上为下一个属性的每个值复制该表格。重复和交替轴的过程一直持续到表中显示所有属性为止。这样做将确保为所有属性的值的每种可能组合定义一个空间。

在准备进行此操作时，我建议你对你的属性进行策略性排序（图11），以便你可以随着进度进行越来越大的批量处理——属性可以按从最大值到最小值开始，或者按状态、主题等进行组织。当组合为变体时，可以在构建面板中重新排列这些属性和值，因此无需感到太大压力。

图11-演示使用文本输入的属性和值创建属性矩阵的过程

对于文本输入，我从一个单行5列的表格开始，其中“图标”属性中的每个值对应一个。然后，我为“文本”属性中的3个值分别复制该行。然后，我复制了“需要”属性中所有值的设置，然后再次复制了“帮助”，“大小”，“状态”，最后是“背景色”。

图12 —摆在我面前的空属性网格。巨量的。绝对的巨量。

我知道我说过建立网格会使事情变得更容易——但一开始它也可能会令人生畏（图12）。Figma 肯定遇到了一些性能问题。缩小以查看整个网格将需要几秒钟的时间，屏幕才能刷新、赶上并实际渲染网格本身。在这一点上，我还没有花时间来计算需要创建的变体特性的数量——坦率地说，我有点担心这样做会令我沮丧。但我还是放大并按下。

从左上角开始，然后水平运作，我放置了主组件的一个实例，并调整了图层和样式的可见性，以匹配矩阵定义的相应值。继续进行操作时，我能够系统地复制、重命名和调整整个行的相应属性值的通用设置。

我选择使用当时最熟悉的工作流程来解决这项繁琐的任务——创建单独的组件并使用以/分隔的每个属性值的命名约定来命名每一层。 我想我更喜欢这种方法，因为选择多个图层并使用“重命名”功能可以更轻松地匹配和替换图层名称的各个部分。

我的旅程持续了几个小时又几天。完成每个更大的水平属性组后，我能够复制越来越大的批处理，专注于重命名和调整属性组中相应值的单个设置。例如，当我在静止（Rest）状态下完成所有文本输入的变体时，我能够复制所有实例并对其进行调整以适应活动（Active）状态，然后再次进行禁用（Disabled）和错误（Error）的操作。

图13 —缩小以查看文本输入的所有3,360个变体。

因此，我低吟着，一个又一个，一个小时接一个小时，听着 Spotify 播放列表。当我到达最后一行时，我脖子上的头发开始竖起。最终我用值的每种组合的唯一表示形式填充了每个单独的空间（图13）。我选择了所有实例，将它们全部转换为组件，最后单击“组合为变体（Combine as Variants）”按钮。

我做到了。我创建了具有3,360个变体的、内容可适应的、完全可自定义的、易于维护的组件，该组件将为文本输入的允许设置的每个可能组合提供服务。从夏尔（Shire）到魔多（Mt.Doom）的距离几乎两倍的数量的变体啊 （1779英里，根据卡伦·永利·冯斯塔德（Karen Wynn Fonstad）撰写的《中土地图集》）。

七种帮助内容集合， 

五种图标显示组合， 

四种交互状态可变换，

 字段文本以三种方式展示。 

无论信息必填与否， 在明亮背景和黑暗背景之上—— 

 有一个组件可以统治它们，有一个组件可以将它们排列， 

有一个组件可以包含它们，并使用变体将它们绑定在一起。 

在设计系统蓬勃发展的 Figma 土地上。