变量概览
变量是可重复使用、可集中维护的值。将颜色、尺寸、文案或开关状态保存为变量后，多个图层和交互可以引用同一个值；修改变量时，引用它的内容会同步更新。
变量能解决什么问题
变量适合处理“同一个值在多个地方重复出现，且后续可能一起变化”的设计问题：
- 统一主题：用颜色变量管理品牌主色、文字色和背景色，在浅色、深色模式之间切换。
- 统一规格：用数字变量管理宽高、间距、圆角或组件尺寸，修改设计系统时不必逐层查找。
- 预览不同内容：用文本变量准备不同语言或不同业务文案，快速检查文字溢出和布局变化。
- 模拟状态与数据：用布尔变量控制开关，用数字变量配合交互表达式制作计数器、购物车金额等原型。
变量不是组件或样式的替代品。组件负责复用结构和交互；样式资源负责复用一组稳定的视觉属性；变量负责复用单个有类型的值，并可在不同模式或原型交互中提供不同值。需要维持固定外观时使用样式资源；需要随主题、设备、语言或运行时状态改变时使用变量。
变量类型
摹客 3 支持以下四种类型：
| 类型 | 保存的值 | 常见用途 |
|---|---|---|
| 颜色 | 颜色值 | 填充、描边、文字颜色等支持颜色变量的属性 |
| 数字 | 整数或小数 | 宽高、间距、圆角等支持数字变量的属性 |
| 文本 | 字符串 | 文本图层和输入框的文本内容 |
| 布尔值 | true 或 false | 图层显示/隐藏 属性 |
属性控件只会显示类型匹配的变量。例如，宽度控件不会列出颜色变量；如果某个控件没有变量入口，不能通过变量强行绑定。
当前绑定范围
摹客 3 的变量绑定入口按属性类型和控件范围提供，不能把“支持某种变量类型”理解为所有同类属性都可绑定。当前常用范围如下：
| 变量类型 | 已确认的常用绑定入口 | 说明 |
|---|---|---|
| 颜色 | 填充、描边、文字颜色、效果颜色 | 多选图层也可在属性面板中统一引用颜色变量 |
| 数字 | 宽高、间距、圆角；列表行高和内边距 | 以属性控件出现变量入口为准 |
| 文本 | 文本图层、输入框文本内容 | 适合语言模式和长文案压力测试 |
| 布尔值 | 图层显示/隐藏；普通文本图层的文本内容 | 可显示 已开启、未开启 等状态文案 |
普通文本图层的文本内容还可引用数字和布尔变量，系统会将值转换为可显示的文本；输入框的文本内容仍只支持文本变量。
列表容器、组件实例和特殊属性的入口可能受对象类型、作用域或编辑模式影响。培训或交付前，应在目标控件上确认变量按钮是否出现；外部变量模式若只在部分属性可用，界面会提示可绑定范围不完整。
变量集、模式和分组
- 变量集：一组相关变量及其模式。建议按用途拆分，例如“主题色”“间距”“文案”。
- 模式：变量集的一套值，用来表示一个设计上下文，例如“浅色”和“深色”，或“桌面端”和“移动端”。同一变量在不同模式中可以有不同值。
- 分组：变量集内部的目录。变量名中的
/会形成层级，例如品牌/主色、间距/卡片/内边距。
一个图层绑定变量后，会按当前变量集模式解析实际值。模式切换适合整体切换设计上下文，不需要为每种上下文复制一套画板。
开始前的规划
- 先按职责建立变量集，不要把颜色、间距和文案全部放在一个集合中。
- 采用稳定的命名规则，例如
颜色/背景/默认、尺寸/间距/小，让选择器中的搜索结果容易理解。 - 先确定默认模式，再补充其他模式。默认模式用于没有显式指定模式时的初始解析值。
- 只有确实需要整体切换的上下文才建立模式；不随上下文变化的值无需重复创建。
实用技巧：用两层变量表达设计决策
不要把图层直接大量绑定到 蓝色/500、灰色/100 这类原始值。更容易维护的方式是建立两 层变量：
- 基础值：保存客观色阶和尺寸，例如
基础色/蓝/500、尺寸/8、尺寸/16。 - 语义用途：保存界面角色，例如
颜色/操作/主按钮、颜色/文字/次要、间距/卡片/内边距，并将其值绑定到对应基础值。 - 设计图层优先绑定语义变量，而不是基础值。
这样做的好处是，品牌主色从蓝色改为紫色时，只需更新 颜色/操作/主按钮 的引用或其基础值；按钮、链接和重点信息不需要逐个调整。变量引用只能选择兼容类型，且系统会阻止变量引用自身。
实用技巧：按“变化维度”而不是页面建立模式
模式应描述一次可整体切换的上下文。推荐拆分方式：
| 变量集 | 模式示例 | 管理的内容 |
|---|---|---|
| 主题色 | 浅色、深色、高对比度 | 背景、文字、边框、状态色 |
| 布局尺寸 | 桌面端、移动端 | 页面边距、栅格间距、卡片圆角 |
| 文案 | 中文、英文、德文 | 标题、按钮、提示语 |
| 品牌方案 | 品牌 A、品牌 B | 品牌色和专属视觉值 |
不要在同一个变量集中混用“深色”“移动端”“英文”这类不同维度的模式，否则一次切换会同时改变不相关的值，也难以在原型中单独验证。
典型场景：主题色
建立“主题色”变量集，创建 背景/页面、文字/主要、品牌/主色 等颜色变量，并设置“浅色”和“深色”模式。页面背景、标题和按钮分别绑定对应变量后，在原型中切换模式，整页即可同步变更。
无障碍检查技巧：除浅色和深色外，可以建立“高对比度”模式，单独提高正文与背景、边框与背景之间的区分度。切换后逐页检查弱提示、禁用状态、错误提示和图标是否仍可辨识；不要只调整品牌主色。
典型场景：响应式间距
建立“布局尺寸”变量集，创建 间距/页面边距、间距/卡片间距 等数字变量，设置“桌面端”和“移动端”模式。将变量绑定到支持数字变量的间距、宽高或圆角控件，可在同一套画板中检查不同尺寸下的布局。
检查技巧：优先将最容易漏改的页面边距、列表间距、卡片内边距和触控区域尺寸变量化。切换到紧凑模式后，重点检查文字是否拥挤、操作区是否过小，以及自动布局是否产生意外换行。
典型场景：多品牌复用
服务多个客户或子品牌时，保持组件结构和语义变量名称不变，仅在“品牌方案”变量集中设置“品牌 A”“品牌 B”等模式。设计稿绑定 颜色/操作/主按钮、颜色/品牌/强调 等语义变量，而不直接使用客户颜色。新增品牌时复制现有模式，再逐项替换品牌相关值，可避免复制整套组件和页面。
典型场景：国际化与文案压力测试
将容易变化的标题、按钮、空状态和错误提示建为文本变量，为中文、英文及预计最长的语言设置模式。切换语言后，检查：
- 固定宽度按钮是否截断；
- 标题是否被意外换行；
- 价格、日期和单位是否需要留出额外空间；
- 右对齐或图文组合是否仍然清晰。
这类测试的目标不是翻译文案，而是在开发前发现布局对语言长度的假设。
典型场景：状态与数据
用布尔变量保存“是否展开”“是否勾选”等状态，用数字变量保存“商品数量”“总价”等数据。交互触发时通过“设置全局变量”修改它们；数字变量可以使用 fx 表达式读取其他变量或图层数据并计算结果。