用变量管理设计中的常用值
颜色、间距、文案，设计稿里到处都是反复出现的值。每次都手动填一遍很烦，改的时候更烦，一个色值变了要在几百个图层里挨个改？变量就是为了解决这件事的。
变量能帮你做什么
举几个场景：
你的设计里反复用到一个主色 #006Cff。改产品配色的时候，不用挨个图层改，改一次变量值，全部跟着变。
你想做亮色和暗色两套设计稿。同一个文案，在亮色下是黑色，在暗色下是白色。用一个变量绑定，切换模式就能整套切换。
你的间距系统里有 8、16、24、32 这套规范值。把它们做成变量，绑到自动布局的间距上，团队里的所有人都用一致的间距。
你做一个多语言的设计稿，想看中英文下排版的差异。把文案做成字符串变量，切换变量就能切换语言。
简单地说，变量帮你把经常会变的值集中管理起来，改一处全局生效。
变量的四种类型
Ardot 支持四种变量，对应不同的属性。
| 类型 | 值 | 使用场景 |
|---|---|---|
| 颜色变量 | 颜色值（带不透明度） | 填充、描边、效果颜色、渐变节点、其他颜色变量 |
| 数字变量 | 数字（支持小数） | 尺寸、圆角、间距、字号、行高、不透明度、描边宽度等 |
| 字符串变量 | 文字 | 文本内容、字体名、字重等 |
| 布尔变量 | 真或假 | 图层显示和隐藏、组件的布尔属性 |
在哪里管理变量
变量管理在一个独立的变量管理器弹窗中。打开方式如下：
- 在画布上按
Esc或点击空白画布，确保没有选中任何图层 - 在右侧面板找到本地变量，点击打开；
弹窗打开后，左侧是变量集合列表，中间是变量内容，右侧是属性面板，和编辑器布局类似。
弹窗大小可以调整
弹窗右上角有一个缩放按钮，可以把弹窗缩小以方便你一边看变量一边操作画布。
小尺寸状态下，拖动右下角可以改变大小，按住顶栏可以拖动位置，右侧详情面板会改成弹窗形式呈现。
创建变量
第一次创建
变量管理器空空的时候，点击新建变量按钮，从下拉里选一个类型。
选了类型后，Ardot 会自动帮你创建一个默认变量集合，并加进一个变量。变量名称的输入框会自动激活，直接输入你想要的名字就行。
默认值的规则如下。
| 类型 | 默认值 |
|---|---|
| 颜色 | #FFFFFF（白色） |
| 数字 | 0 |
| 字符串 | 输入字符 |
| 布尔 | 假（False） |
同一集合内不能重名
同一个变量集合里，变量名必须唯一。如果你尝试新建一个重名变量，会被拒绝并提示，此变量集合中已有相同名称的变量。
编辑变量
改名字
双击变量名称单元格进入编辑态，输入后回车保存。
改值
每种类型的编辑方式略有不同。
颜色变量
点击十六进制输入框直接输入（比如 0052D9）。也可以点击左侧颜色图标打开取色器。还可以选择引用其他颜色变量作为值，见下方变量引用别名。
如果颜色变量的不透明度是 100%，Ardot 默认不显示。需要在颜色取色器里调整。如果有透明度，会直接显示在变量行里，可以快速修改。
数字变量
在数字框输入。
字符串变量
直接在文本框输入。
布尔变量
布尔变量点击切换真或假。
调整顺序
拖拽变量行可以排序，支持多选拖拽。按住 Command 逐个选，或 Shift 选范围，整体一起拖动。
排序会影响后续在属性面板上选变量时的列表顺序，建议把常用的放在前面。
删除
选中一个或多个变量，右键删除，或者用键盘删除键。
删除变量后，已经绑定这个变量的属性会显示一个置灰的变量标签，告诉你这个属性原本绑了变量但变量没了。可以重新选一个变量，或者直接解绑改回静态值。
删除操作可以通过撤销（Command+Z）恢复。
给变量分组
变量多了之后，分组能让管理变得清晰。Ardot 提供两种分组方式。
方式 1，用 / 命名分组
直接在命名时用 / 分隔，比如下面这样。
颜色/品牌色/主色
颜色/品牌色/辅助色
颜色/中性色/灰度1变量管理器会自动把它们归到对应的分组下。
方式 2，右键新建分组
选中一个或多个变量，右键，选择新建分组，输入分组名即可。和样式管理是一致的。
分组的操作
重命名分组：双击分组名，或在左侧分组树上右键，选择重命名。
取消分组：在左侧分组树上右键，选择取消分组。
删除分组：在左侧分组树上右键，选择删除分组，会删除组内所有变量。
排序规则是未分组的变量在最上方，下面是已分组的部分。
变量引用别名
变量可以用另一个变量作为它的值。比如下面这种结构。
基础色/blue-500 = #0052D9
语义色/主色 = 引用 基础色/blue-500修改 blue-500 时，主色自动跟着变。这就是别名的用法，特别适合做色板到语义的两层结构。
编辑变量值时（比如点击颜色取色器），切换到变量 Tab，从列表中选一个同类型的变量。
修改：点击已经引用的变量，重新选另一个。
解绑：hover 变量行右侧会出现解绑按钮，点击解除引用，恢复为静态值。
不能形成循环引用
如果你尝试 A 引用 B、B 又引用 A 这种循环引用，会报错。
用变量集合组织变量
变量集合（Variable Collection）是装变量的容器。一个集合里可以有很多变量，集合之间相互独立。
什么时候需要多个集合
按类型分，颜色变量放一个集合，间距变量放一个集合。
按主题分，基础色板一个集合，语义色一个集合。
按平台分，iOS 一个集合，Android 一个集合。
具体怎么组织取决于你团队的设计系统设计。
把变量绑到设计上
创建好变量之后，怎么用到设计稿上？答案是在属性面板的变量入口点一下就行。
变量入口
凡是支持变量的属性，都会有一个统一的变量图标入口。具体位置如下。
| 属性 | 入口位置 |
|---|---|
| 填充色 |  |
| 描边色 |  |
| 颜色取色器内 |  |
| 圆角、宽高、间距、padding 等数字属性hover 时显示 |  |
| 字号、行高、字间距等文字属性 |  |
| 文本内容 |  |
| 图层显隐（布尔变量） |  |
如何绑定变量
- 点击属性旁的变量入口（图标）
- 在弹出的样式变量选择列表中，找到你想要的变量
- 点击选择，即绑定生效
绑定后，属性框中会显示一个带变量标签的样式。比如颜色变量绑定到填充上，会看到 品牌色/主色 这样的标签。
批量绑定变量
如果你选中了多个图层（它们都支持同一种变量），可以一次性把变量绑到这些图层的同一个属性上，统一生效。
解绑变量
如果你不再需要某个属性绑定变量，可以解绑。
- hover 已绑定变量的属性
- 标签右侧出现解绑按钮
- 点击解绑
解绑后，属性的值会保留为变量当前的静态值，不会清空。比如填充色绑了一个 #0052D9 的变量，解绑后填充色就是 #0052D9，但不再跟变量同步了。
变量被删除了怎么办
如果一个属性绑定的变量被删除了，属性的变量图标会变成问号。hover 问号显示提示，变量已被删除。hover 变量名区域显示当前的静态值。你可以点击属性重新选其他变量，或者直接解绑。
属性的值会保留为变量被删除时的最后一个值，不会突然变成空或者默认值，所以设计稿不会因为变量被删而出现异常。
进阶用法
变量的便捷之处体现在两个高级功能上：
模式（Modes）：让一个变量在不同上下文下有不同的值，实现亮暗主题、多端适配等。
作用范围：限制变量只能用在某些属性上，避免设计师误用。
详见下一篇文档：[变量进阶：模式和作用范围]
一些常见问题
变量和样式有什么区别？
样式是死的，一个颜色样式就是一个固定的颜色值。变量是活的，一个颜色变量可以根据模式切换值（比如亮色下黑、暗色下白），还能被另一个变量引用。
简单说，只要你有可能切换值的需求（亮暗主题、多语言等），就用变量。纯固定的值用样式也行。
谁能编辑变量？
文件的所有可编辑权限的人都能创建和管理变量。如果是来自团队库的变量，编辑权限受团队库本身的权限控制。
研发能不能拿到变量？
可以。在研发模式下，开发者可以查看每个属性绑定了哪个变量，也可以查看完整的变量表。