变体是整理和使用引用组件的一种全新方式,可以帮你按类型、尺寸、样式等对引用组件进行统一管理,使用时在右侧快速切换组件类型即可完成切换。
如:使用变体切换不同机型「开关」的开启、关闭状态,直接通过右侧属性面板选择切换即可。

创建变体
变体是对引用组件统一管理,只需选中引用组件后,在右侧属性面板中点击「添加」即可完成创建。

在变体中,随时可以对引用组件进行编辑,如新增、删除等,完全不用担心创建变体后无法修改。

此外,还可以通过拖拽引用组件移入、移出变体的方式,完成新增和删除操作。

变量分类和变量值
为了方便设计师快速对变体的引用组件进行管理,添加变体后,会自动根据引用组件命名设置变量分类和变量值。
例如:引用组件命名如下「Switch/iOS/开启」、「Switch/iOS/关闭」,添加变体后,变体名称和变量分类、变量值如下:
变体名称:Switch。
变量分类:
分类 1:iOS;
分类 2:开启、关闭。

变量分类
变量分类是变体中所有变量值的集合,将相同类型的变量值放在同一个分类下,可以帮你最大化的减少信息干扰,更快速、更清晰地定位单项内容。
如在「开关」示例中,将变量值分为「机型」和「状态」两个分类,在切换使用时,只用进行相应分类下变量值选择即可。
新增变量分类
创建变体后,可以通过右侧面板中「更多 -> 添加新分类」完成添加。

修改变量分类名称
右键变量分类名称,选择「重命名」即可修改变量分类名称。

删除变量分类
你可以按照下列方式删除变量分类:

- 将鼠标悬停在单项变量分类上,选择「删除」,也可完成删除。

Tips
变量分类只有 1 项时,无法删除。
变量值
在变体各个分类中都有独立对应的属性值,称其为变量值,每项变量值都具有唯一性,可以通过选择不同的变量值,快速定位至某项内容,完成替换。
如在「开关」示例中,「机型」分类下有 iOS、 Android 两项变量值,「状态」分类下有开启、关闭两项变量值,通过两两组合可以定位至唯一的引用组件。
修改变量值名称
右键变量值名称,选择「重命名」,可以对变量值名称进行修改。

此外,选中变体中多项引用组件时,也可以批量对变量值进行重命名。

Tips
当变量分类中只有两项变量值,且为「yes/no、true/false、on/off、是/否、打开/关闭、开/关、开启、关闭」命名时,组件切换时为「开关」样式。

Tips
除了上方修改变量分类、变量值名称外,还可以在目录处进行修改。

使用变体
完成变体创建后,你可以使用以下两种方式使用变体:


变体组件在引用组件库中有特殊的标识说明。
