即时设计教程 • 变体

变体是整理和使用引用组件的一种全新方式,可以帮你按类型、尺寸、样式等对引用组件进行统一管理,使用时在右侧快速切换组件类型即可完成切换。

如:使用变体切换不同机型「开关」的开启、关闭状态,直接通过右侧属性面板选择切换即可。


 

创建变体

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



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



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



 

变量分类和变量值

为了方便设计师快速对变体的引用组件进行管理,添加变体后,会自动根据引用组件命名设置变量分类和变量值。

例如:引用组件命名如下「Switch/iOS/开启」、「Switch/iOS/关闭」,添加变体后,变体名称和变量分类、变量值如下:

变体名称:Switch。
变量分类:
分类 1:iOS;
分类 2:开启、关闭。


 

变量分类

变量分类是变体中所有变量值的集合,将相同类型的变量值放在同一个分类下,可以帮你最大化的减少信息干扰,更快速、更清晰地定位单项内容。

如在「开关」示例中,将变量值分为「机型」和「状态」两个分类,在切换使用时,只用进行相应分类下变量值选择即可。

新增变量分类

创建变体后,可以通过右侧面板中「更多 -> 添加新分类」完成添加。

 

修改变量分类名称

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

 

删除变量分类

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

  • 右键变量分类名称,选择「删除」;


 

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


 

Tips
变量分类只有 1 项时,无法删除。

变量值

在变体各个分类中都有独立对应的属性值,称其为变量值,每项变量值都具有唯一性,可以通过选择不同的变量值,快速定位至某项内容,完成替换。

如在「开关」示例中,「机型」分类下有 iOS、 Android 两项变量值,「状态」分类下有开启、关闭两项变量值,通过两两组合可以定位至唯一的引用组件。

修改变量值名称

右键变量值名称,选择「重命名」,可以对变量值名称进行修改。

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

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


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


 

使用变体

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

  • 将变体中引用组件拖拽至画布编辑区直接使用;


 

  • 从引用组件库中,直接拖拽至编辑区使用。



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