很多UI设计师在第一次做
UI主题切换
时，基本时直接复制一套页面，再把颜色改一遍。浅色模式一套，深色模式再复制一套，听起来改个颜色很简单？在项目初期或许还能应付，一旦产品要适配深色模式，甚至后续还要增加适老化主题，或者品牌升级需要全局换色时，更大的问题就来了。
这时候你会发现，光靠这个手动修改的“笨办法”，在这个快节奏的设计中已经撑不住了。改一个主色，看起来只是改了一个值，实际上可能牵连几十个组件、上百个页面。真正麻烦的，其实不在颜色本身，而在后面越来越难维护。
所以，我们急需一套更“聪明”的方法——变量系统。可能你会觉得它前期设置有点麻烦，不算刚需功能，但当规模一上来之后，设计还能不能被控制住，
全看变量用得扎不扎实。
除了大家知道的Figma有Variables变量功能，在国产UI设计工具中，墨刀设计也拥有完整的变量系统。本文以UI设计师较为常见的
APP日夜主题切换
为例，分享颜色变量的完整实操教程，并分析几个常见误区和高效管理UI系统的技巧。
先从最常见、也最容易理解的场景开始：
APP日夜主题切换
。以墨刀设计的颜色变量功能为例展示实操过程：
首先，不要一上来就创建一堆颜色变量。更合理的做法应该是在脑子里过一遍：在日夜模式切换中，哪些东西一定会变，哪些不需要改变。
在不选中页面或元素的情况下，在右侧面板找到“本地变量”，进入变量面板，点击新建
颜色变量
。建议直接按语义拆分，将梳理好的需要改变的颜色添加变量。先把默认的浅色主题的颜色一一对应起来，不用急着区分出深色。
接下来创建一个新的变量模式即深色模式，在右上角点击加号，添加一列模式，可以把两个模式命名为 Light / Dark。在同一个变量里，将对应的深色模式填充好，选择要变更不同的颜色值。这样就形成了一个变量两种模式颜色，例如Text - Primary两种颜色：
变量创建完成后，就可以对界面上的组件元素绑定变量了。这一步是关键，绑定变量后切换主题才能跟着改变颜色。选中元素后，在填充颜色处选择“变量”，找到对应创建的变量名称选择即可。
绑定变量后，选中整个页面，在右侧面板处找到“图层”，选择变量集。可以看到这时出现了颜色变量的两种模式，点击Dark模式切换即可完成主题颜色的变化。
切换到Dark主题后，重点看三类地方：叠加层（弹窗、浮层）是否漏掉、图标是否需要反色或替换、品牌色在深色背景下是否刺眼等。检查这三个地方，如果有不合理之处，可以调整变量色值。这样就完成了APP日夜主题的切换，整体过程并不复杂，需要一些耐心和细心即可。
步骤看完了，但千万别以为会创建变量就等于会用。
变量用得好不好，关键在管理。下面总结了
UI设计师们常常忽略的几个误区。
UI设计师常见的命名方式比如：Blue-01、Gray-Text-1、Red-Error等。这种命名方式，在一开始看起来很直观，不影响整个设置变量的过程，但问题很快就会在以后的维护中出现。比如：
同一个颜色，在不同页面被复用但是不知道该绑定哪个；
所以为了避免后期出现这样的问题，更合理的方式是
对命名方式有一套定义标准
。比如
语义优先，颜色靠后
。如：Feedback-Error、Button-Danger-Background、Text-Disabled。这只是一种方式，更多还是看设计师的习惯，但在创建变量起初，能够有统一的命名方式，对后期维护和多成员协作更友好。
“太密”也就是说一个变量绑定的组件元素过多，举个例子：一些UI设计师创建一个“PrimaryColor”变量，能把文本、按钮、背景，全部绑定在同一个变量，后期一旦因为其中一个颜色要修改变量，其他元素就会受到关联影响。
“太松”的情况也有，比如有些UI设计师几乎把每个元素都创建一个变量，比如“Button-Primary-Hover-Bg-Light”和“Button-Primary-Hover-Bg-Dark”，绑定的时候找就很麻烦，整个变量系统也会过于臃肿，维护起来反而变成负担。
因此，在使用变量系统时，尽量只在未来可能需要独立变化的地方拆变量，不能太密也不能过松。
在实际项目中，颜色变量只是整个变量系统很基础的一层。墨刀设计的变量有四大类型：
在很多中大型项目里，变量还会用于圆角（普通 / 卡片 / 弹窗）、阴影层级、字号体系（正文 / 注释 / 标题）、间距体系等等场景中。虽然颜色变量应用的场景更加常见，但是也要掌握其他变量的用法，服务于整个设计系统。
避开误区是基础，想要变量系统成为你的得力助手，还需要一些高阶的管理技巧，这比变量本身更重要。下面分享几个用变量高效管理UI设计系统的实用技巧。
在前面的教程中我们演示了颜色变量从创建、绑定的应用的实操过程。在一开始创建变量时，并非所有变量都必须划分在一起，可以在面板左上角选择创建变量集，即变量的合集。一般会在区分原始变量、区分主题或者区分品牌色等场景下，为设计系统创建新的变量集。
有时候我们在设置变量时，在右侧面板上操作容易遗漏。分享一个小技巧，在变量值最右侧将鼠标悬停，找到对应的设置按钮，在展开的窗口中选择“范围”Tab，这里可以看到变量应用的详细范围。比如某个颜色变量仅用于描边，就可以取消全选所有支持的属性，仅选中描边即可。
变量模式功能可以让你的设计在不同的环境中灵活切换。在上述教程中颜色变量使用了两种模式：Light / Dark，除了创建颜色模式，还可以在文本变量中切换文字语言模式，在数值变量切换不同尺寸设备的模式，或者在布尔变量中切换图层的可见性。
1.墨刀设计的变量系统和Figma的Variables有什么区别？
其实它们的核心逻辑相通，变量类型一致，并且都支持创建不同变量模式等功能。两者的主要区别在于操作界面和具体功能的操作上，墨刀设计作为国产UI设计工具，在界面的直观性和操作便捷性上更符合国内团队使用习惯，Figma全英文界面需要掌握一定的熟悉度才能操作顺畅。
2.设计师在此前设计中大量手动修改，如何迁移到变量系统？
手动修改与变量系统并不冲突，甚至在实际运用中可以同时存在。如果此前面对多主题多版本等需求，才用了手动复制页面修改的方式，建议从新页面或核心组件开始，先把变量系统应用到当前设计中。接着再定期重构一部分优先级偏低的旧页面，逐步完成迁移。
3.
变量系统这么好，是不是所有项目一开始就要用上？
这要看实际项目，如果你的项目目标明确、风格稳定且规模有限，用样式库或许更轻快。但如果产品规划未来可能会拓展主题版本（如深色/适老化）、适配多端或者需要进行A/B测试，从核心组件就可以开始搭建变量系统，这样能确保产品在快速迭代中，视觉体验始终保持可控的状态。
很多新人UI设计师会把变量系统当成“暂时不需要学会的高阶功能”。但在实际项目里，变量系统和设计师经验关系不大，新手用不用，老手用不用，差别都会在项目后期体现出来，是服务于整个设计系统的。当项目涉及到多主题多版本切换，
不用变量，才是真正的高风险操作
。
当你习惯用变量来思考设计时，很多问题会自然消失。不用再害怕改整个设计规范，也不需要一页一页手动调整，墨刀设计的变量系统，本质上是在帮设计师在前期设计时做正确的决策，越早开始，后期越轻松。
