Figma Variants - 组件集

本文基于：【草帽老师-Figma新功能教学：Variants】

认识新功能-Variants

看一下下面的四个 按钮

他们被分为两组，分别是 灰色按钮 和 粉色按钮，而每一组的按钮又分为 有边框 和 无边框，下面我们使用一个组件集合来实现它。

创建组件集

• 首先在画布上绘制如下四个按钮：

• 点击面板上方的 组件 按钮，选择 创建为多个组件：

• 选中我们所创建的四个 组件，点击面板右侧的 Combine as varients 按钮

• 这时左侧的 Layer 图层面板会新增如下内容，双击其中一个组件的名称来更改它，会发现变成了 Property 1=Default

• 双击更改名称时，发现选中的是 粉色 、不带边框 的按钮，我们将其名称改为 Color = Pink, Border = false

再以此类推，例如将 灰色 、 带边框 的按钮名称设置为 Color = Gray, Border = true

Color = Pink, Border = false
Color = Pink, Border = true
Color = Gray, Border = false
Color = Gray, Border = true

• 这时，从左侧边栏 Assets 面板中拖出刚刚创建的组件，点击组件

出现图中的选项，可以通过更改选项的值来改变按钮状态。

使用斜杠命名法创建

我们也可以在创建组件时使用如下方式命名：

Btn/Pink/false
Btn/Pink/true
Btn/Gray/false
Btn/Gray/true

使用这种方法在创建按钮时，由于没有定义属性名，会显示默认的 Property 字段

只需要点击 Assets 面板的组件，在右侧就可以更改属性名称了：

注意：
只有当属性的 value 的值为 false true, yes no, on off 时按钮的下拉选单样式才会变成switch 的开关样式。