创建和使用变体

当你创建组件并建立起你的设计系统时，你会发现需要一些彼此相似的组件，而只有微小的差别。

例如：你可能有多个按钮的组件，有不同状态和尺寸的独立组件，以及明暗模式。

变体(variants)允许你将类似的组件分组并组织到一个单一的容器中。这简化了你的组件库，使每个人都能更容易地找到他们需要的东西。

自定义你的变体的属性和值，使你的设计系统不再需要猜测，使你的组件更接近于前端代码。

注意

我们不建议使用变体来分组不同的图标。如果你有同一图标的不同尺寸，那么你可以将这些图标合并为变体。

属性和值

属性和它们的值允许你定义你的变体的属性。

你可以根据需要添加尽可能多的属性和值，并定制它们以适应你的设计系统。你甚至可以把你的属性和值映射到你设计系统中的代码组件。

• 属性是我们组件的可变方面。例如：一个按钮组件的属性可以是type、size、state，或者是否有icon。
• 值是每个属性可用的不同选项。例如：状态属性可以有default，hover，pressed，和disabled。

组件集内的所有变体将使用相同的属性和值，但每个变体需要是它们的独特组合。你不需要为每个可能的属性和值的组合都准备一个组件。

实践中的属性和值

让我们来看一个例子! 我们有一个按钮组件，有 24 个独特的变体。下面的图片显示了这个组件的所有变体在一个单一的组件集中。

在我们的按钮组件集中有四个属性，每个属性都有自己的一组值。

• Type 属性，有 Primary 值和 Secondary 值。
• Size 属性，有 Large 值和 Small 值。
• State 属性，有 Default 值、Pressed 值和 Inactive 值。
• Icon 属性有 True 和 False 值。

Figma 使用这些属性和值来确定我们需要从组件集中的哪个变体。在下面的图片中，我们已经创建了一个组件集的实例，并配置了以下值。

• Type: Primary
• Size: Large
• State: Default
• Icon: False (or off)

图层名称和语法

层的命名是创建和管理变体的一个重要方面。与 Figma 中的其他层名不同，Figma 中的层名大多可以是任意的，而组件集中的变体名称有一个非常具体的语法。

这包括有关该变体的属性和值的信息。只有当您在图层面板中尝试重命名一个变体时，您才能看到这种语法。

变体名称遵循这个结构。Property1=value, Property2=value, Property3=value

将各部分组合为变体

注意

请注意。当您在文件中添加带有变体的实例时，Figma 将导入该组件集中的每个变体。导入大型组件集会影响 Figma 的速度和性能。

如果您在 Figma 中已经有了组件库，您可以将您的组件合并为变体。一般过程是这样的。

• 重新命名您的组件，使其使用斜线命名法
• 在画布上组织您的组件
• 将组件合并为变体
• 给你的属性起描述性的名字

注意

注意：Figma 在将组件合并为变体时只看图层名称，不看页面和框架名称。如果您使用页面或框架来组织组件，这些在转换时将成为多余的。

您仍然可以使用页面和顶层框架来创建额外的层次结构。这使得在资产面板和实例菜单中可以更好地组织组件。

重命名您的组件

Figma 使用斜线命名系统来组织资产面板和实例菜单中的组件。组件名称中的每一个"/"都会创建一个层次。

这使您更容易浏览您的库，或找到并交换相关的组件。了解如何命名和组织组件→

注意

你可以使用重命名图层模式来批量重命名图层。了解更多关于批量重命名图层的信息→。

你也可以使用这个命名系统将你现有的组件转换为变体。为了准确转换，组件名称需要遵循这个结构。

componentName/property1value/property2value/property3value

• 第一个 / 之前的文字将成为组件集的名称。
• Figma 将为组件名称中的每一个其他 / 创建一个新的属性，然后将属性作为一个值添加。
• 如果您在命名系统中使用了后缀，您需要将这些后缀添加到组件的名称中，用 / 分隔。

注意

为了确保你的值与相同的属性相匹配，你所组合的每个组件都需要有相同数量的斜线。

一个名称为 Button/Primary/Large/Default/False 的按钮组件将有以下属性和值。

组件集名称：Button Variant：Primary Property 2：Large Property 3: Default Property 4：False

在下面的图片中，我们可以看到组件名称（在左边）和变量值（在右边）的关系。

在画布上组织组件

注意

组件集只能包含组件，所以不能在组件集内添加文本或评论、嵌套框架或分组变体的子集。

在将组件合并为变体时，Figma 会将您现有的布局和间距应用于组件集内的变体。我们建议在转换组件之前组织好您的组件，这样您就不必在转换之后重新安排它们。

如果您对某一特定组件有很多变体，您可能想以行、列或网格的形式组织您的组件。

这将有助于向使用你的设计系统的人传达它们的多维性质。你也可以在你的组件集旁边添加文本层来评论相关的属性和值。

在我们下面的例子中，我们将我们的按钮变体安排在一个网格中。我们还在画布上添加了对应于属性值的文本层。

提示

默认情况下，组件集有一个紫色的虚线描边，没有填充。你可以调整组件集的填充和描边属性，以更好地适应你的品牌或设计系统。

合并为变体

1. 选择你想组合的组件。
2. 在右侧边栏中，单击 "Combine as Variants"按钮。
3. Figma 将把所有组件添加到一个单一的组件集。

给予属性描述性的名称

作为转换过程的一部分，Figma 将创建通用属性，并将您添加到组件名称中的任何属性作为值。

由于 Figma 不知道这些属性的名称，它将把第一个属性命名为 Variant，然后按顺序编号。Property 2，然后是Property 3，以此类推。

您需要将这些属性重命名为更有描述性的东西。

1. 选择组件集。
2. 在右侧边栏的 Variants 部分查看当前的属性。
3. 将鼠标悬停在属性上，使其周围出现一个灰色方框。
4. 点击编辑该属性，给它一个更具描述性的名字。
5. 在属性外单击以应用。
6. 对其余的属性重复上述步骤。

注意

Figma 处理组件集的方式与普通组件相同。您可以向它们添加描述和文档链接。您还可以将它们从资产面板拖入画布，并在它们的实例之间进行交换。

创建新的变体

注意

Figma 将变体放在一个叫做组件集的容器中。组件集只能包含组件。点击工具栏上的 "Create component"，或使用快捷键将您的选择变成一个组件。

• Mac： ⌥ ⌘ K
• Windows： Ctrl + Alt + K

了解如何创建组件→

1. 选择一个组件
2. 重新命名该组件，使其使用斜线命名法（推荐）。
3. 在右侧边栏中，点击变体部分下的加号，添加你的第一个变体。
4. Figma 会做几件事。
   • 制作一个具有相同属性的相同组件
   • 将这两个组件作为变体添加到一个组件集中
   • 如果您使用了斜线命名法，/前面的文字将成为组件集的名称，后面的属性将作为值使用。
5. 根据需要对变体做任何视觉上的改变。

提示

默认情况下，组件集有一个紫色的虚线描边，没有填充。你可以调整组件集的填充和描边属性以更好地适应你的品牌或风格指南。

添加属性和值

当你第一次创建你的变体时，或者随着你的设计系统的发展，你可以向变体添加属性和值。

为组件集添加属性。

1. 选择组件集。
2. 点击右侧边栏中的变体部分中的省略号按钮。
3. 选择添加新属性。

只有当你选择了一个变体时，你才能添加值。有几种方法可以做到这一点。

• 点击当前值的旁边的下拉箭头，从选项中选择 Add new 来添加。
• 在值域中点击并输入一个新的值。
• 双击图层面板中的变体，更新所需属性的值。

提示

如果您有一个只有两个可能选项的属性，Figma 认为这是一个二进制选择或布尔值，可以将该属性表示为一个切换开关。Figma 将true/false和 on/off都识别为布尔值。

修复值的冲突错误

组件集内的所有变体将使用相同的属性和值，但每个变体需要是它们的独特组合。

如果任何变体的值组合完全相同，Figma 会让您知道存在冲突。即使变体本身在视觉上不同，您也会看到这个错误。

要解决这个问题，您需要添加或更新受影响的变体的值，使它们有一个独特的值组合。

向一个组件集添加更多的变体

继续使用以下任何一种方法向你的组件集添加变体。

• 点击画布上的组件集内的加号。只有当你至少有两个变体时，你才会看到这个选项。
• 在右侧边栏的变体部分点击省略号，选择添加新变体（Add New Variant）。
• 使用键盘快捷键复制现有变体。
  • Mac： ⌘ D
  • Windows: Ctrl + D
• 将其他组件拖入组件集，将它们作为变体添加。

提示

拖入其他组件不会改变现有的变体的布局排列。你可以使用智能排列来调整你的变体的布局。

注意

当您在文件中添加带有变体的实例时，Figma 将导入该组件集中的每个变体。导入大型组件集会影响 Figma 的速度和性能。

管理变体

组织变体

当您向一个组件添加新的变体时，Figma 的默认行为是将变体添加到单列中，并在它们之间保持相等的间距。

如果您在转换组件之前将其放在另一种布局中，Figma 将为组件集保持相同的布局。

您可以覆盖 Figma 的默认行为，以您选择的任何方式排列变体。

• 选择一个变体，并将其移动到元件组中的新坐标。Figma 允许您将变体放在元件组的任何地方，包括放在其他变体的上面。
• 在右侧边栏中调整组件集的尺寸，或者像调整普通框架一样在画布中调整其大小。
• 选定所有变体后。在右侧栏调整变体之间的水平和垂直空间。

提示

Figma 将使用左上角的变体作为默认变体。此变体将代表资产面板中的整个组件集。

重命名属性和值

要重命名一个属性或值，您需要选择组件集，并在右侧边栏的变体部分更新该属性或值。

要重命名一个属性。

1. 点击属性并输入一个更具描述性的名称。
2. 按 Enter / Return 键来应用，或者在属性外点击来应用。
3. 对其余属性重复上述步骤。

要重命名一个值。

1. 双击该值并输入一个新的名称。
2. 按 Enter / Return 键来应用。

提示

如果你已经把你现有的组件转换为变体，你将需要重新命名你的属性，使它们更具有描述性。

修复损坏的变体错误

如果你的任何变体不遵循这个语法，你会得到一个损坏的变体错误。如果你打错了一个属性或值，或者在转换现有组件时使用了无效的命名结构，就会发生这种情况。

为了解决这个问题，你需要重新命名变体的属性和值。虽然可以在图层名称中使用这种语法来重命名它们，但我们建议改在右侧边栏中重命名属性和值。

重新排列属性和值

您可以改变属性和值在右侧边栏的显示顺序。如果您重新排列属性，Figma 将调整您的变体的名称和语法，使之相匹配。

要重新排列属性。

1. 选择组件集。
2. 在**变体(Variants)**部分，将鼠标悬停在属性字段的左侧边缘，直到出现拖动图标。
3. 点击并向上或向下拖动该属性以改变其顺序。

要重新排列数值。

1. 点击并按住该值。
2. 拖动到值，使其处于新的顺序。
3. 松开以应用。

删除属性

要删除一个属性。

1. 选择组件集。
2. 悬停在侧边栏的变体部分的属性上。
3. 单击以删除。

提示

Figma 只保留当前应用于变体的值。您可以通过确保没有变体使用它来删除一个值。

将组件集发布到一个库中

如果您是专业或教育团队或 Figma 组织的成员，您可以与其他人分享您的变体。

将组件集与您的样式和常规组件一起发布，以使您的团队或组织成员能够使用它们。

组件集与您的其他组件一起出现在资产面板上。Figma 将使用组件集左上角的变体作为默认变体。

然后，其他人可以将组件集拖入他们的文件中，创建一个实例。然后他们可以通过配置右侧边栏中的属性值来访问组件集中的所有其他变体。

了解如何发布库→

提示

您是 Figma 组织的成员吗？设计系统分析允许您查看您组织的成员如何使用组件和变体。

使用变体

组件集与任何常规组件一起出现在资产面板中。因此，你不需要在资产面板上寻找一个特定的变体，而只需要选择组件集。

一旦你在画布上有一个该组件集的实例，你可以配置该实例的属性值来选择一个变体。

选择组件集

1. 点击左侧边栏的 Assets 标签，或者使用快捷键:
   • Mac：⌥ 2
   • Windows： Alt + 2
2. 点击一个组件集并将其拖到画布上。Figma 将创建一个该组件集的默认变体的实例。
3. 在右侧边栏中查看组件集的名称和属性。
4. 使用属性旁边的下拉选择你喜欢的数值组合。
5. 使用切换开关来关闭和打开特定的属性。

配置变体

通过配置右侧边栏中的属性和值，选择一个组件集中的其他变体。

1. 选择实例。
2. 在右边的侧边栏中查看组件的名称。如果该组件有变体，你会在组件名称下面看到配置该组件集的属性和值的字段。
   • 使用属性旁边的选择你喜欢的值的组合。
   • 使用和切换开关来关闭和打开特定的属性

实例之间的互换

在使用变体时，你仍然可以在实例之间进行交换，就像你对普通组件那样。

最有效的方法是使用实例菜单。实例菜单允许你从当前文件或任何你启用的团队库中找到组件的替换。

当你选择了一个组件时，从右边的属性面板上访问实例菜单。

1. 选择你想改变的实例。
2. 点击右侧边栏中的组件名称。
3. 使用实例菜单来搜索和选择另一个组件。

属性的覆盖

组件库定义并概述了我们设计系统的理想实现。

这些组件通常包含你需要改变的通用信息，比如按钮标签。在某些情况下，你可能需要改变该特定实例的其他方面。

覆盖允许您对实例进行表面上的改变。Figma 支持对文本、填充、描边和效果属性进行覆盖。

保留覆盖

当您选择不同的变体，或在实例菜单中的实例之间交换时，Figma 会尝试保留您的覆盖项。

Figma 使用以下标准来决定是否保留覆盖。

• 图层名称需要在当前实例和您选择的变体或实例之间匹配。这在交换实例和选择变体时都适用。
• 在选择变体时，Figma 也会检查您所覆盖的图层属性在变体之间是否最初匹配。如果是这样，Figma 将保留您的覆盖。

在我们下面的例子中，Figma 在步骤 3 中保留了填充覆盖，但在步骤 4 中没有保留。这是因为 default primary 按钮和 hover primary 按钮都是以相同的 #1BC47D 填充开始的。我们的覆盖是将十六进制代码从#1BC47D改为#F531B3。

Figma在第 4 步中没有保留我们的覆盖，因为 hover secondary 变体的填充是 #ffffff，这与我们最初覆盖的填充不同（#1BC47D）。

提示

如果你不确定某个组件集有哪些变体，或者它们的原始样式，你可以在原始文件中查看组件集。