UI设计中同一个控件、组件会有多种状态和样式，Fimga提供了变体功能 Variant让一个组件可以实现多种样式的切换，提高项目组件的管理和使用效率。

变体的基本认识

学习变体就要了解变体功能的应用逻辑，变体的创建是在一个原始组件下添加多个组件样式，并对每个样式设置对应的属性Property和值 Value，之后在子组件的使用中通过选择不同属性的值来实现样式的切换。

其中，变体 Variant是属性 Property中的其中一种属性，用于管理组件的变体样式。当创建组件变体时，会创建最少一个变体属性，并需要为每个变体样式添加不同的属性值，才能在后续的子组件中正常切换。

变体属性可以创建多个，比如一个按钮的变体属性可以包含交互状态，也可以包含尺寸、模式等不同纬度。而每个属性下都要设置不同的值，比如：

• 状态：默认、悬浮、点击、禁用
• 尺寸：大、中、小
• 模式：浅色、深色

而之后创建得每个变体样式，要分配一个对应的属性和值，比如：

• 按钮1：默认状态、大尺寸、浅色模式
• 按钮2：点击状态、中尺寸、深色模式
• 按钮3：悬浮状态、小尺寸、浅色模式

在多个属性和值的应用中，就意味着它们会有不同的组合情况，需要穷尽所有选项结果，并给它们指定对应的样式才能正常使用。上面3个属性包含的结果有 432 = 24个，用文字表示的话如下所示：

对应的样式效果：

变体的应用就是先确定属性和值，然后穷尽不同的选项情况，再为它们设计出相应的样式完成后续的设置。

变体的创建和引用

变体的创建主要有两种模式，一种是在创建完第一个组件后，在属性面板中点击添加 Variant。

另一种是创建多个组件后框选它们（必须是原始组件），在属性面板中点击 Combine as Variants 实现变体的创建。

创建变体后会有一个紫色虚线的区域，整个区域代表一个变体组件，而处于虚线内的组件即为该组件的不同变体。在左侧的图层列表中，组件下级就会有不同的实心菱形图标。

虚线区域可以拖拽放大缩小，如果将下级图形拖拽出虚线，那么它就会脱离该组件变体成为独立组件。如果拖拽别的独立组件进该虚线区域内，则该组件就会成为它的下级变体。

变体组件的引用和正常组件的引用相同，直接从组件列表中选择刚创建的组件进行添加即可。也可以选中变体组件下的某个变体进行复制，然后再外部黏贴，就会生成对应的子组件。

变体组件的子组件属性栏中，就会包含变体的属性列表，可以通过点击旁边的下拉菜单选择不同的值切换样式。

变体的属性值创建

在变体创建过程中，要指定属性和值，而这个它们要分开创建。

首先创建变体属性，要在创建变体组件后，选中整个组件，然后在右上角的 Property 属性栏内点击“+”号按钮添加变体属性，然后设置对应的属性名。

再选中里面的单个变体，属性栏上相同位置就会出现刚才设置的属性列表。而属性值的定义就要在属性右侧的下拉菜单中设置，点击可以直接输入新的属性值，如果前面添加过别的属性值则可以在下拉菜单内选择。

一个完整的变体组件需要单独给每个变体完成属性值的设置和选择，属性和值的命名都根据自己或项目的习惯制定就行，没有特殊的要求。

但Figma提供了一个特殊的命名场景，即属性值中如果只设置了两个值，且用了 “yes/no”、“ture/false”等名词的话，那么在子组件的应用中，对应的变体属性就会变成开关，而不是下拉菜单，提高切换的效率。

变体的图形创建逻辑

如果只有一个属性，创建变体中的样式逻辑就很简单，有几个值，添加和设计几个样式即可。但如果属性变多，就会增加很多属性值的交叉设置结果，那么如何设计并排列不同组件样式就有变得麻烦。

这里介绍个简单的逻辑，当只有一个属性时，我们可以使用横向和竖向的排列方法，并在旁边放一个小标题。

当出现第二个属性时，那么第二个属性有几个值，就要在第一行/列的基础上复制几倍出来，并根据复制的方向添加对应的属性名。

当出现第三个属性时，就要把前面所有内容作为一个整体，包含几个值就复制几倍出来，再添加上对应的文本标记即可。

以此类推，每添加几个属性和值，就添加几倍前面的所有样式。所以属性越多，那么包含的变体样式也就越多越复杂，同时也代表着越难维护和管理。

在真实项目应用中，并不是变体组件中添加越多属性和值越专业越完整，这样会导致组件库极其难维护，失去了它本身的价值。所以建议认真思考变体属性的使用数量，当属性值过多时，可以拆分成不同的变体组件，而不是非得合并到一起。