使用变量

妙多支持将变量应用于图层的某些属性，便于提高设计的一致性。

你可以在文件中使用本地变量，或使用你有权限引用的团队组件库中的变量。

使用颜色变量

颜色变量可应用于填充、描边、阴影和渐变节点，还可以应用于颜色样式或效果样式中的颜色属性。

颜色变量和颜色样式都可以从颜色选择器中的「组件库」面板中进行选择。

1. 1.点击组件库的 ，选择所需的组件库。
2. 2.点击 切换视图，妙多支持列表视图和网格视图。
3. 3.方形色块中显示颜色变量。
4. 4.圆形色块中显示颜色样式。

填充或描边属性

你可以对填充或描边使用颜色变量：

1. 1.选中需要使用变量的图层。
2. 2.在右边栏中，点击「填充」或「描边」模块中的 ，打开颜色选择器。
3. 3.查看本地变量和团队组件库中的变量。
4. 4.选择所需变量，即可在图层上使用该变量。

阴影效果

你可以对阴影效果中的颜色属性使用颜色变量：

1. 1.选中已使用阴影属性的图层，如果尚未添加阴影效果，可先添加。
2. 2.在右边栏的「效果」模块中，点击阴影属性前的 。
3. 3.点击颜色色值前的色块。
4. 4.在组件库中选择需要使用的变量。

渐变节点

你可以对填充或描边中的渐变节点使用颜色变量：

1. 1.选中已添加渐变的图层，如果尚未添加渐变，可先添加。
2. 2.在右边栏的「填充」或「描边」模块中，点击颜色属性前的色块。
3. 3.在「节点」模块中，点击颜色色值前的色块。
4. 4.在组件库中选择需要使用的变量。

在样式中使用颜色变量

妙多支持在以下样式中使用颜色变量：

• 颜色样式中的纯色填充。
• 颜色样式中的渐变节点。
• 效果样式中的颜色属性。

你可以通过以下步骤在已有样式或新建样式中使用颜色变量：

1. 1.点击画布空白区域。
2. 2.在设计面板的「本地样式」模块中，将鼠标悬停在样式上，然后点击右侧的 。
3. 3.在「编辑样式」面板中，对不同的颜色属性使用颜色变量。
   • 纯色填充：点击属性前的色块，在组件库中选择需要使用的变量。
   • 渐变节点：点击属性前的色块，在「节点」模块中，点击颜色色值前的色块，在组件库中选择需要使用的变量。
   • 阴影效果：点击属性前的 ，再点击颜色色值前的色块，在组件库中选择需要使用的变量。

使用数值变量

数值变量可应用于描边、效果样式、布局网格、圆角，还可以应用于调整图层宽高或间距与边距中的数值属性。

1. 1.点击数值右侧的 ，打开「变量」面板进行选择。
2. 2.点击组件库的 ，选择所需的组件库。
3. 3.面板左侧显示数值变量名称。
4. 4.面板右侧显示已设置变量的具体数值。

描边属性

你可以对描边粗细设置数值变量：

1. 1.选中需要使用变量的目标图层。
2. 2.在右边栏中，点击「描边」模块中的 + ，为图层添加描边属性。
3. 3.点击 三 中数值右侧的 。
4. 4.在「变量」面板查看本地变量和全部组件库中的变量。
5. 5.选择所需变量，即可在图层上使用该变量。

效果样式

你可以对效果样式中的内外阴影、图层模糊、和背景模糊使用数值变量：

1. 1.选中已使用效果样式的图层，如尚未添加效果，可先添加。
2. 2.在右边栏中，点击「效果」模块中的 + ，为图层添加效果样式。
3. 3.点击 ，在 X、Y、模糊、扩展中选择需要添加变量的详细属性。
4. 4.点击详细属性数值右侧的 。
5. 5.在「变量」面板的组件库中选择需要使用的变量。

布局网格

你可以对布局网格中的网格尺寸、行高、列宽等设置数值变量。

1. 1.选中已添加布局网格的图层，如尚未添加布局网格，可先添加。
2. 2.在右边栏中，点击「布局网格」模块中的 + ，为图层添加布局网格。
3. 3.点击 更改布局网格的类型，对不同的数值使用数值变量。

• 网格：点击尺寸值右侧的 ，在组件库中选择需要使用的变量。

• 行和列：点击行高、列宽数值右侧的 ，在组件库中选择需要使用的变量。你也可以用相同的方式为不同布局方式下的偏移、边距、和间距值设置变量。

圆角属性

你可以对圆角和独立圆角设置数值变量：

1. 1.选中需要调整圆角值的目标图层。
2. 2.在右边栏中定位至「容器」模块。

• 圆角：点击 字段右侧的 ，为所有圆角设置数值变量。
• 独立圆角：点击 字段，再点击数值右侧的 ，为每个方向上的圆角设置数值变量。

1. 3.在「变量」面板查看本地变量和全部组件库中的变量。
2. 4.选择所需变量，即可将所选图层的圆角改为变量值。

图层宽高

你可以使用数值变量调整图层宽高。

1. 1.选中需要调整宽高的图层。
2. 2.在右边栏中的「容器」模块，点击 W、H 数值右侧的 。
3. 3.在「变量」面板查看本地变量和全部组件库中的变量。
4. 4.选择所需变量，即可将所选图层宽高改为变量值。

间距与边距

在自动布局中，你可以通过数值变量调整图层之间的间距与边距。

分离变量

妙多支持对属性上使用的变量进行分离。分离变量后，该属性将不再随变量的更新而更新。

1. 1.将光标悬停在使用变量的属性值上。
2. 2.点击 即可分离变量。
3. 3.属性值将恢复为具体的数值。

切换模式

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

切换页面中的模式

当文件中的本地变量或引用团队组件库的变量包含多个模式时，「页面」模块会出现 。此时你可以切换页面的模式：

1. 1.点击画布空白区域。
2. 2.在设计面板的「页面」模块中，点击 。
3. 3.光标悬停在变量合集名称上，选择你要切换的模式。

切换图层上的模式

当图层或其子图层所使用的变量包含多个模式时，「图层」模块会出现 。此时你可以切换图层上的模式：

1. 1.选中使用变量的图层。
2. 2.点击右边栏的「图层」模块中的 。
3. 3.光标悬停在变量合集名称上，选择你要切换的模式。

自动模式

对于使用变量的图层，其默认的变量模式为「自动」。此时「自动」所对应的模式将继承其父图层或页面上设置的模式。

模式冲突

当在文件中图层使用同一变量模式的不同版本，且版本间进行增减模式时，会发生模式冲突。妙多会在模式切换菜单中的对应模式旁边显示 。

解决模式冲突

1. 1.在发生模式冲突的文件中查看并接受组件库的更新。
2. 2.如果没有接收到组件库更新提示，你可以打开变量所在的组件库文件，并发布更新。