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

变量

变量可以存储需要复用的设计属性值,便于快速调用和批量调整。

你可以在多个设计主题中对同一个变量定义不同的值,从而快速实现多主题设计。例如深色模式、多品牌色设计等。

变量可以保存颜色、数值、字符串等元数据。

Motiff 妙多已经支持颜色变量,其他类型的变量即将上线。

'变量-01.png'

为了更好地了解「变量」功能,你可以先了解以下核心概念。

  • 变量:存储设计属性的具体值,如颜色的色值。
  • 合集:用于管理和分类变量。
  • 分组:合集内的进一步分类,便于组织变量的结构。
  • 模式:是指合集中一个主题下的一组变量值。
  • 别名:是指一个变量的值可以引用另一个变量。 '变量-02.png'

变量

当你修改变量时,Motiff 妙多会同步修改所有使用该变量的图层。

颜色变量

颜色变量能够存储颜色属性的色值,便于实现多主题设计。

适用于「填充属性」、「描边属性」、「颜色样式」等。 '变量-04.png'

合集

合集用于管理和分类变量。你可以将相关的变量按功能或用途分类。例如使用一个合集管理基础颜色,使用另外一个合集管理被引用的颜色。

例如,用 Primitive Colors 管理团队的基础颜色,用 Semantic Colors 管理基础颜色的具体用途。 '合集-01.png'

Motiff 妙多支持每个合集最多创建 5000 个变量。

分组

分组是合集内的进一步分类,便于组织变量的结构。

例如,创建 BrandBlackWhite 等分组进一步管理不同颜色的颜色变量。 '分组-01.png'

你可以在变量名称中使用 / 进行重命名,Motiff 妙多会自动将变量进行分组。

模式

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

Motiff 妙多支持对同一变量定义多个值,以适应不同的设计主题。例如,创建浅色模式和深色模式两种颜色主题。 '模式-01.png'

Motiff 妙多支持每个合集最多添加 99 个模式。

别名

别名是指一个变量的值可以引用另一个变量。

当变量的值发生变化时,所有引用该变量的别名也会自动更新,从而保持设计的一致性。

例如,变量「Brand 1」的值为 #3071FF ,如果你希望默认的填充也使用相同颜色。可创建另外一个变量「Fill-Primary」 ,使用「别名」功能,引用变量「Brand 1」。 '别名-01.png'

如果 「Brand 1」的值发生变化,「Fill-Primary」也会随之变化。 '别名-02.png'

此外,「别名」能够提升变量的灵活性,使得设计系统的更新与管理更加高效。

例如,你可以创建原始变量「Brand 1」,定义变量「Fill-Primary」、「Border-Select」、「Link-Highlight」并引用该原始变量,应用于开关、按钮、输入框等图层上。

如果「Brand 1」的值发生变化,此时使用该变量的图层都会同步更新。

如果只希望改变组件的填充色,你可以使用「别名」功能,重新引用变量「Purple 1」,此时开关和按钮的填充颜色发生变化。