在中大型项目里，当你维护设计系统时，很可能经历过这种情况：只是改一个颜色或字号，却要在几十个页面里逐一排查、替换。尤其是遇到深色/浅色两种模式、要做适老化适配或者多语言版本等等场景时，会面临超大的维护成本。
墨刀设计的变量系统
，本质上解决的就是这些因为多模式多版本带来的“反复修改”问题。如果你之前只用过样式，那变量会是一个明显提升设计效率的UI进阶功能。
这篇文章从实际的设计场景出发，重点帮你弄懂这三件事：
在没有变量之前，我们管理设计一致性，主要依赖：样式（颜色样式、文字样式）、组件、人工记忆和规范文档。比如页面直接使用具体颜色值；字号、间距在不同页面中反复手动设置；修改设计时，靠搜索和人工排查。
这些方式在
单一主题、小规模页面
下还可以接受，但是如果遇到
多模式、多方案
，问题就会暴露出来：
墨刀设计的变量系统
解决的核心问题，其实是「设计难以规模化」的问题。它把设计中散落各处的“值”，变成有名字的可以管理的部件。当你在使用变量时，不再关心“这是什么颜色”，而只关心“这是哪一类颜色”，比如背景主色、文字主色、品牌强调色等，有了变量可以让UI设计从简单画界面转向搭建一个设计系统。
在墨刀设计中，变量可以理解为一套可以反复使用、集中维护的设计参数集。它支持四种变量类型：
你可以把它理解成一个调好的“配方”，变量有三大特点：
全局更新
：一次修改，全量生效。当你将颜色、字号、间距等属性绑定为变量后，修改变量值后，所有关联组件、页面会自动同步更新。这样你就不再需要全局搜索后手动替换，设计系统的维护成本大幅降低。
逻辑关联
：变量之间可以“计算”。墨刀变量支持数值计算与逻辑关联，例如：间距随字号自动变化；不同状态下组件尺寸联动变化等。在原型演示展示不同条件的不同状态等场景非常有价值。
模式管理
：一套设计，多种方案。变量可以包含多个值，能放入不同的模式中，每个模式为每个变量设定一个值，例如Light/Dark模式下颜色变量的两个不同值；还有普通模式/长辈模式，多语言模式等。切换模式，等于为你的整套设计快速换肤。
以我们熟悉的场景为例，墨刀设计的变量系统可以帮你做以下几件事：
①一键切换深/浅色模式：
通过创建颜色变量和深浅色两种模式对应的颜色值，可以在同一套页面，无需复制文件，不用手动替换颜色，切换深浅色模式即可完成主题变化。
②适老化模式改造：
适老化模式一般涉及的是字号、行高、按钮高度、间距等参数的变化，将这些创建对应变量，设置普通模式、长辈模式，完成后即可切换变量模式即时预览。
③全球化多语言适配：
多语言适配例如中文、英文、日语等语言，需要把高频文案创建文本变量，在同一界面就可以快速切换语言版本，在预览的同时也能避免漏改、错改。
④组件多方案发布：
对同一组件设置变量，通过不同变量模式切换来支持多品牌、多皮肤、多业务线方案，不要频繁复制组件，可以大幅度降低组件维护的复杂度。
在不选中页面元素时，找到右侧面板“本地变量”，选择“创建变量”。我们要做的是APP深/浅色模式的切换，因此选择创建“
颜色变量
”。
目前页面是浅色模式，对页面中所有在深色模式下需要更改颜色的值，创建颜色变量，并在右上角加号“创建变量模式”，将两种模式命名为：
Light、Dark
，设置好两种模式下对应的的色值。这样每一个变量，就同时拥有了两个不同的配色方案，方便后面切换模式。
①
每个变量均可修改名称，前期花点时间定义好变量名称，后续查找和绑定时会清晰很多。
②
变量支持相互嵌套引用，例如新建一个变量可以引用已有变量的值，如果后面对初试色值做了改变，那所有引用该变量的颜色变量也会自动更新。
添加完所有颜色变量成后，需要把页面中元素的颜色绑定到对应的变量。以对话框气泡颜色为例，具体操作为：选中组件，在右侧属性面板找到颜色填充，点击设置图标，在弹窗中选择“变量”标签页，选中对应的颜色变量就引用成功了。
接着依次将需要变更颜色的元素引用至对应的颜色变量，这样当切换变量模式时，所有引用变量的组件元素颜色会随之变化，方便统一维护。
页面中所有元素都绑定好对应的颜色变量后，选中当前页面，在右侧面板中找到“图层”，有一个变量集的小图标，可以选择切换变量模式，这时可以选择Dark模式，将APP的UI界面一键切换为深色模式。整个过程操作简单，就像是在操控设计版本的“开关”，不需要我们另外复制页面重新修改色值，只要通过变量切换模式，即可完成界面深色浅色模式变更。
很多UI设计师第一次接触变量系统，会觉得好像有点复杂，但试过一次两次之后就会熟练。当项目规模真正上来之后，你会发现
变量不止解决的是当前多模式的需求，更是解决未来能不能长期维护。
虽然变量需要前期一些投入，但它换来的，是你应对大规模设计项目时的从容与可控。尤其是在产设研的协作中，利用变量系统可以减少设计返工，降低多方案并行的复杂度。学会变量系统，会是一次非常值得的投入。
