组织与管理变量

变量可以存储需要复用的设计属性值，从而更灵活地保持设计一致性，并便于实现多主题设计。

Motiff 妙多支持通过「变量弹窗」来组织和管理变量。你可以通过以下步骤打开「变量弹窗」：

1. 1.点击画布空白区域。
2. 2.在右边栏点击「本地变量」模块中的 。

组织变量

创建变量

1. 1.

   在任意合集中，点击 + 颜色变量 。

2. 2.

   在第一列中，为变量命名。

3. 3.

   在第二列中，设置变量值。

   a. 点击变量值，直接进行输入。 b. 点击变量值中的色块，在颜色选择器中自定义色值。

添加合集

1. 1.在变量弹窗中，点击左上角 。
2. 2.选择「添加合集」。

你可以对合集进行管理：

• 重命名：点击合集名称右侧的 ，选择「重命名合集」。
• 删除：点击合集名称右侧的 ，选择「删除合集」。

变量分组

为了更好地管理变量，可以对变量进行分组。

1. 1.在合集中选择一个或多个变量。
   • 选择两个变量间的全部变量：在列表内选中第一个变量，按住修饰键 ⇧ Shift ，再点击选中最后一个图层。
   • 选择任意多个变量：在列表内选中第一个变量，按住修饰键 ⌘ Command / Ctrl ，再点击需要选中的变量。
2. 2.右键点击选择「添加到新分组」。

你可以对分组进行管理：

• 重命名：在变量弹窗的左边栏，双击分组名称即可进行编辑。
• 排序：选择一个或多个分组，拖动到目标位置，可以更改顺序或移动到其他分组中。
• 创建分组副本：在变量弹窗的左边栏右键点击分组名称，选择「创建分组副本」。
• 取消分组：在变量弹窗的左边栏右键点击分组名称，选择「取消分组」。
• 删除分组：在变量弹窗的左边栏右键点击分组名称，选择「删除分组」。

引用其他变量

变量值不仅可以被设定为色值，还可以引用一个已有的变量。

在变量值中引用其他变量后，只需要修改被引用的变量，与其关联的其他变量即可同时被修改。

你可以通过以下步骤引用其他变量：

1. 1.右键点击变量值，选择「引用其他变量」。
2. 2.从组件库中选择要引用的变量，可以使用搜索快速找到对应的变量。

如果你不想引用该变量，可以将光标悬停在变量值，点击 分离变量。

添加变量模式

模式是指合集中一个主题下的一组变量值。

Motiff 妙多支持对同一变量定义多个值，以适应不同的设计主题。例如，创建浅色模式和深色模式两种颜色主题。变量弹窗中，选择要添加模式的合集。

1. 1.点击标题右侧 。

默认模式

Motiff 妙多会将合集中左侧第一个模式设定为「默认模式」。当协作者使用变量时，默认使用该模式下的变量值。

在页面的「模式切换菜单」中，合集的默认模式会显示在括号中。

编辑变量

在 Motiff 妙多中，你可以通过以下两种方式打开编辑变量弹窗。

• 将光标悬停在变量上，点击变量右侧的 。
• 右键点击变量所在行，选择「编辑变量」。

在编辑变量弹窗中，你可以：

1. 1.编辑变量名称。
2. 2.添加描述以解释如何使用该变量。
3. 3.修改变量的值。
4. 4.添加代码语法。
5. 5.发布时隐藏变量。
6. 6.设置变量的适用范围。

代码语法

代码语法是设计变量在代码中的表现形式，可以直接将其用于研发，确保设计与代码的一致性。

你可以为变量设置代码语法，比如添加 iOS 端代码类型，此时会显示对应的代码为.property(Fill/Default)。

当设置好变量的代码语法后，在研发模式中，点击使用该变量的图层，即可查看自定义的代码语法。

Motiff 妙多支持一个变量最多同时添加三种代码语法，包括 Web、iOS 和 Android。你可以为每个平台创建一个变量名称：

1. 1.右键点击变量，选择「编辑变量」。
2. 2.在「代码语法」模块，点击右侧 ，选择平台类型。
3. 3.在输入框输入代码中的变量名称。
4. 4.点击变量名称可以预览该变量在代码片段中的显示。

适用范围

为变量设置范围可以限制其应用属性。例如，可以将颜色变量的范围限定为填充，则该变量只能应用于填充属性，同时在描边和效果属性中不会展示该变量。

1. 1.右键点击变量，选择「编辑变量」。
2. 2.在编辑变量弹窗中，切换至「适用范围」。
3. 3.选择并设置适用范围。

批量编辑变量

1. 1.

   在变量弹窗中，选择多个变量。

   • 选择两个变量间的全部变量：在列表内选中第一个变量，按住修饰键 ⇧ Shift ，再点击选中最后一个图层。
   • 选择任意多个变量：在列表内选中第一个变量，按住修饰键 ⌘ Command / Ctrl ，再点击需要选中的变量。
2. 2.

   右键点击所选变量，选择「编辑变量」。

3. 3.

   在编辑变量弹窗中，仅支持编辑：

   • 适用范围
   • 发布时隐藏

管理变量

查看本地变量

本地变量是存在于当前文件中的变量，你可以在变量弹窗中看到本地变量。

你可以通过以下步骤打开「变量弹窗」：

1. 1.点击画布空白区域。
2. 2.在右边栏点击「本地变量」模块中的 。

发布变量

变量与样式和组件一样，都可以发布到组件库，便于团队成员共享与使用。

点击了解《发布组件库》相关功能。