了解变量

什么是变量

变量是设计系统中存储单一属性值的可复用容器。通过变量，可以将颜色、数值、布尔值、字符串等基础设计属性提取为独立实体，在多处复用并统一管理。

使用变量的好处：

  • 统一修改：修改变量值，所有引用该变量的元素自动更新

  • 主题切换：通过「模式切换」功能，快速切换整套设计的主题

  • 系统化管理：集中管理设计资产，提升团队协作效率

变量类型

MasterGo 支持四种变量类型：

类型用途默认值
颜色变量纯色颜色值，用于填充、描边、特效等#FFFFFF 100%
数值变量数值（间距、字号、圆角、尺寸等）0
布尔变量布尔值（是 true / 否 false），可用于控制图层显隐是 true
字符串变量文本字符串，用于文案内容的统一管理输入文本

创建变量

任何变量都可以通过「变量管理」和「属性面板」来进行创建，可根据操作喜好，来选择创建方式。下面以颜色变量的创建来举例：

创建颜色变量

方式一：通过变量管理面板创建

  1. 点击右侧面板的「变量管理」按钮

  2. 选择目标集合，点击底部要创建的变量类型

  3. 设置变量名称和初始值，完成创建

通过变量管理面板创建.png

方式二：通过属性面板创建

  1. 选中图层

  2. 点击「应用变量」按钮

  3. 点击「创建变量」或 右上角「+」创建新变量

  4. 设置名称后，完成创建

属性面板中创建颜色变量.png

创建数值变量

方式一：通过输入框创建

适用于宽度、高度、行高、间距、边距、圆角等属性。

  1. hover 数值输入框，点击「应用变量」按钮

  2. 点击「创建变量」或 右上角「+」创建新变量

  3. 设置变量名称后确认创建

方式一：通过输入框创建数值变量.png

方式二：通过下拉菜单创建

适用于字号、字重等属性。

  1. 点击属性旁的下拉选择器

  2. 选择「使用变量」

  3. 点击「创建变量」或 右上角「+」创建新变量

  4. 设置变量名称后确认创建

方式二：通过下拉菜单创建数值变量.png

创建字符串变量

适用于文本内容、字体、字重等属性。

  1. 选中文字层，点击应用「应用变量」

  2. 点击「创建变量」或 右上角「+」创建新变量

  3. 设置变量名称后确认创建

属性面板中创建字符串变量.png

创建布尔值变量

适用于图层属性，控制显示 / 隐藏。

  1. 选中任意图层，在右侧图层属性面板，点击应用「应用变量」

  2. 点击「创建变量」或 右上角「+」创建新变量

  3. 设置变量名称后确认创建

属性面板中创建布尔值变量.png

使用变量

使用颜色变量

方式一：在 填充 / 描边中使用

  1. 选中图层，点击填充或描边「应用变量」按钮

  2. 在变量菜单中选择已创建的「颜色变量」

  3. 应用成功

填充 : 描边中使用颜色变量.png

方式二：在 渐变色节点中使用

  1. 展开渐变色编辑面板，点击颜色节点的「应用变量」按钮

  2. 根据颜色节点选择要应用的「颜色变量」

  3. 应用成功

渐变色中使用颜色变量.png

使用数值变量

  1. hover 数值输入框，点击「应用变量」按钮

  2. 在变量菜单中选择「数值变量」

  3. 应用成功

数值属性中使用数值变量.png

使用字符串变量

  1. 选中文本层，在文本内容右侧点击「应用变量」按钮

  2. 使用已创建好的字符串变量，来进行文本内容填充

文本内容中使用字符串变量.png

使用布尔值变量

  1. 选中图层，在图层属性中点击「应用变量」按钮

  2. 可通过已创建好的布尔值变量，来控制图层显示 / 隐藏

图层属性中使用布尔值变量.png

常见属性变量使用场景

属性类别适用变量类型
填充 / 描边颜色颜色
渐变色节点颜色
特效 / 网格颜色颜色
宽度 / 高度数值
间距 / 边距数值
圆角数值
描边数值
行高 / 字间距数值
字号 / 字重数值
透明度数值
图层显隐布尔值
文本内容字符串

变量引用

变量之间可以相互引用，形成引用链条。当修改源变量时，所有引用它的变量会自动更新。

引用方式

  1. 变量管理面板中，hover 变量的模式值单元格，点击「应用变量」按钮

  2. 在变量菜单中选择同类型的目标变量

  3. 引用成功

变量引用操作示意.png

引用规则

  • 变量只能引用同类型变量（颜色变量引用颜色变量，数值变量引用数值变量）

  • 修改源变量后，所有引用它的变量会自动更新

  • 引用链条不宜过长，建议控制在 3 层以内

变量引用同步关系.png

变量模式切换

通过「模式切换」功能，可以快速更换整套设计的主题（如浅色 / 深色模式切换）

创建多模式变量

  1. 在变量管理面板中，选择目标变量

  2. 点击「添加模式」

  3. 设置模式名称（如 浅色、深色）

  4. 设置新模式中对应的值

添加多模式.png

模式切换操作

页面级模式切换：点击画布空白区域，确保未选中任何图层的情况下，点击右侧面板「变量模式切换」入口，选择目标模式。作用于该页面中，所有使用了多模式设计内容的模式切换。

图层级模式切换：选中图层，在图层属性面板中切换模式。仅作用于当前选中的图层的模式切换。

变量模式切换入口与操作.png

变量管理面板

打开方式

  • 点击右侧面板「变量管理」按钮

  • 快捷键：

Mac：Option + Command + Y Win：Alt + Ctrl + Y

主要功能

功能说明
切换查看支持 全部、变量、样式 切换查看对应类型
搜索功能通过关键词快速查找变量、样式
全屏模式扩大面板显示区域
集合管理新建、排序变量集合
创建多模式在选定集合中创建多模式

变量管理面板功能区域.png

设置变量应用范围

在进行变量管理时，可根据实际的使用情况，对已创建的变量进行多选设置其应用范围，以便于在使用变量时，针对性的显示可使用的变量，简化调用菜单。

  1. 在变量管理面板中，对想要设置的变量进行多选，点击设置按钮→应用范围

  2. 根据使用需求，勾选想要在哪些属性中显示

设置变量应用范围.png

相关操作

编辑变量

  • 重命名：双击变量名称，或右键选择「设置」进行编辑

  • 修改值：直接编辑模式值单元格中的内容

  • 修改模式值：在多模式变量中，为不同模式设置不同的值

解绑变量

  • hover 已使用变量的属性栏，显示解绑图标按钮

  • 点击解绑，显示属性值

删除变量

  • 在变量管理面板中，右键点击目标变量

  • 选择「删除」

命名限制

  • 变量名称命名限制 20个中文字符、40个英文字符

  • 建议使用语义化的命名，如 color-primary、spacing-medium 以便协作成员管理和理解其用途

常见问题

Q1：找不到某个变量？

A：检查以下方面：

  • 确认变量所在集合是否正确

  • 使用搜索功能通过变量名称查找

  • 确认当前 Tab 是否为「变量」（而非「样式」）

Q2：修改变量后画布没有更新？

A：请检查：

  • 确认修改的是否为被引用的变量

  • 确认当前查看的变量模式是否正确

Q3：能否恢复已删除的变量？

A：目前无法直接恢复已删除的变量。但图层会保留当前的变量绑定状态（如有需要，可以重新创建同名变量）

Q4：变量可以跨文件使用吗？

A：变量随文件保存，可以在同一文件的多个画板中复用。跨文件复用建议使用「团队库」功能。

附录：术语表

术语说明
变量设计系统中存储可复用值的容器
颜色变量存储颜色值的变量类型
数值变量存储数值的变量类型
布尔值变量存储 true / false 的变量类型
字符串变量存储文本字符串的变量类型
变量模式变量的不同取值状态（如 浅色 / 深色）
变量引用变量引用另一个同类型变量的机制

评价此篇文章：👍🏻 有帮助 👎🏻 无帮助

👉本篇文章对你是否有帮助？👍🏻 有帮助 👎🏻 无帮助，我们期待着你的反馈。

变量与样式 了解样式