用娱乐的方式学习Figma变体Figma Variants Playground

查看设计稿（Figma 社区）：https://sourl.cn/ySScS8

Variants 变体是什么？

变体其实就是”超级组件“，我们可以将功能或样式相近的组件整合为变体。在调用和调整实例方面变体比组件更方快捷。

例如：在创建按钮时可以将“是否带图标、是否有圆角、亮环境使用或暗环境使用、大的或是小的...”等无数个按钮创建为一个变体，让资产列表保持简洁。

温馨提示

由于调整变体会改变单个变体组件的名称，所以变体中的对象不适合做切片导出，我们尽量不要将图标直接作为变体。

如果要将多个图标作为变体：

1. 将当前所有图标组件复制一份实例

2. 选中复制的所有实例，在工具栏选择批量创建组件

3. 选中新创建的组建，单击Combine as Variants（创建为变体）

这样创建的变体可保留原组建的名称，而且改变原组建属性时，变体中的对应图标也会做出响应。

如果我们的图标不但有不同的尺寸，又有线条和填充等多种样式，推荐将其创建为变体。