logo
帮助文档/设计系统/变量/使用变量

使用变量

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

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

使用颜色变量

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

颜色变量和颜色样式都可以从颜色选择器中的「组件库」面板中进行选择。 '使用颜色变量-01.png'

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

填充或描边属性

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

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

阴影效果

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

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

渐变节点

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

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

在样式中使用颜色变量

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

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

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

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

分离变量

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

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

切换模式

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

切换页面中的模式

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

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

在页面的模式切换菜单中,合集的默认模式显示在括号中。 '切换页面中的模式-02.png'

切换图层上的模式

当图层或其子图层所使用的变量包含多个模式时,「图层」模块会出现 '16_Panel_Mode.svg' 。此时你可以切换图层上的模式:

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

自动模式

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

模式冲突

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

如果选择的模式存在冲突,使用的变量版本不包含该模式的图层将无法展示正确的颜色。

解决模式冲突

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

Motiff 妙多支持具有 可编辑 权限的协作者发布组件库和接受组件库更新。