变量进阶：模式和作用范围

学会基础的变量用法之后，模式（Modes）和作用范围（Scoping）是把变量用得更深的两个关键能力。前者解决"同一个变量在不同场景需要不同值"的问题，后者解决"变量太多容易选错"的问题。

模式（Modes）

模式能做什么

模式是变量的多套值。同一个变量名，在不同模式下可以有不同的值。

最经典的用法：亮暗主题。

举例你定义了一个颜色变量叫"正文色"：

变量名	亮色模式	暗色模式
正文色	#000000	#FFFFFF

设计师把所有正文文字的填充都绑到这个变量上。需要切换主题时，只要切换一下模式，整张设计稿的所有文字颜色就全部反转——不需要挨个图层改。

除了亮暗主题，还能用来做：

• 多设备适配：同一个间距变量，在桌面端是 24，移动端是 16
• 多语言：同一个文案变量，中文是"确定"，英文是 "OK"
• 多品牌：同一个主色变量，品牌 A 是蓝色，品牌 B 是绿色

创建一个新模式

打开变量管理器后，每个变量集合会显示一列"值"——这就是默认模式（默认叫 "Mode 1"）。

新建模式

点击模式标题右侧的 "+" 号，会在右边新增一列。新列的值会默认沿用前一列的值。

重命名模式

双击模式标题，或者右键 → "重命名"。

建议：模式名要起得有意义，比如"亮色""暗色"、"桌面端""移动端"，方便团队成员理解。

默认模式

第一列模式是默认模式。当一个图层应用了变量，但没指定用哪个模式时，会使用默认模式的值。

设置默认模式：在某一列的模式标题上右键 → "设为默认模式"。该模式会被移到第一列。

调整模式顺序

有两种方式调整模式顺序：

• 选中模式列后，在标题处拖拽
• 右键 → "向左移动一列" / "向右移动一列"

排序会影响在画布上切换模式时的下拉顺序。

删除模式

模式标题右键 → "删除"。

删除一个模式只会删除"这一列的值"，不会影响变量本身。如果有图层正在使用这个模式的值，会自动 fallback 到默认模式。

在画布上切换模式

变量集合可以应用到任意 frame 上。选中 frame，在右侧"图层属性"区域可以选择该 frame 用哪个模式，画布上 frame 内的图层会即时切换为对应模式的值。

这就是亮暗主题切换的真正使用方式：让设计师能在画布上一键预览不同主题下的效果。

作用范围（Scoping）

为什么需要作用范围

随着变量越来越多，当设计师为一个矩形选填充颜色变量时，下拉列表里把所有颜色变量都列出来——文字颜色、背景色、描边色、阴影色全混在一起，又长又容易选错。

作用范围的设定是为了让每个变量只在它该出现的地方出现。

举例：你创建了一个变量叫"文字颜色"，且设定使用范围是“文本填充"，那其他场景（如形状的填充、描边）下选变量时，这个变量便不会出现，也因此避免了误用。

怎么设置作用范围

打开变量管理器，选中要设置的变量。右侧会出现 "作用范围" 配置区域，通过勾选复选框来定义这个变量能用在哪些属性上。

默认情况下，新建的变量会勾选所有属性。

小尺寸弹窗下：hover 变量行最右侧的单元格，会出现设置图标，点击切换到作用范围。

不同变量的作用范围

范围选项	含义
颜色变量
数字变量
字符串变量
布尔变量	布尔变量没有作用范围，布尔变量只能用于显示/隐藏和组件的布尔属性。

修改作用范围立即生效

设置作用范围后，画布上所有变量选择器会实时更新，已经不符合范围的变量会立刻从列表里消失，但已经绑定的变量不会被解绑。

举个例子：

1. 你给一个矩形的填充绑定了"棕色"变量
2. 后来你把"棕色"变量的作用范围改为"只用于文本"
3. 矩形的填充仍然保持绑定，颜色不会变
4. 但如果你想重新选变量，"棕色"不会出现在下拉选框中

这个设计是为了避免破坏已有设计稿，新规则只对未来生效，已有的绑定不会自动失效。

使用建议

起步阶段建议默认使用范围为全量

刚开始用变量的时候，建议所有变量默认全开。等变量数量越来越多，再考虑逐步收窄作用范围。

用"模式"替代变体切换的复杂方案

你之前用变体来管理"亮暗主题"，每个组件做两个变体会非常复杂。建议使用变量定义按钮的填充色，这样组件只需要一个版本，模式切换时按钮颜色直接切换，比增加变体更为高效，也可以减少变体数量，达到精简库的目的。

给变量一个清晰的命名约定

模式数量上去之后，变量名就变得很重要。建议用 / 分组，比如：

颜色/语义/正文
颜色/语义/背景
颜色/语义/描边
颜色/基础/blue-500
颜色/基础/gray-100

清晰的命名结构让团队成员能快速找到自己要的变量。