在日益复杂的设计项目中，你是否也曾被繁琐的样式管理所困扰？当需要调整品牌色，或是为产品适配深色模式时，逐一修改成百上千个设计元素，是否头大到无从下手？

好在有设计工具推出了变量(Variables)功能，它对设计样式进行了原子化处理，把原先一一绑定的样式属性和值进行“解绑”处理，以一种全新的方式来全局管理设计系统，将设计师从低效的重复操作中解救出来。

变量是什么？

变量（Variables）是一种可重复使用的设计元素存储机制，它能够将颜色、数值、文本和布尔值等设计属性封装成可复用的基本单元。

变量是对组成设计系统的所有属性进行“原子化”处理，将设计属性的键和值解耦，有别于很多人已非常熟悉的“样式”。

对于变量与样式的区别，可以用我们熟悉的“乐高”来类比理解：如果设计系统是一座乐高城堡，样式是固定颜色的积木块，那变量就是拥有无穷变化的智能积木。变量相对灵活，支持引用已有变量来定义新的变量，通过嵌套和模式实现批量修改。

譬如一个色值为#336FFF的颜色，在Pixso中定义为brand 90的颜色变量，同一个色值可以按需应用到不同场景中——按钮背景色、文本颜色以及图形描边颜色等，最明显的变化就是在不增加样式定义的情况下，达到和以往多个样式设置的效果，且得益于变量的嵌套关联特性，当改动基础变量的色值时，可快速实现局部或全部的自动更改，最大程度提升了设计系统的管理效率。

什么是变量

Pixso变量有哪些类型？

按照变量所存储的值的不同，Pixso将变量划分为4种类型，包括颜色变量、数值变量、文本变量和布尔变量。

颜色变量：集中管理品牌全色系，一处修改，全量更新！数值变量：统一存储各类尺寸参数，代替记忆，高效精准！文本变量：高效管理多语言及高频文案，一次编辑，批量更新！布尔变量：灵活控制组件显隐状态，一键切换，实时生效！

变量的类型

变量的使用场景有哪些？

到这有些朋友可能会问，明明已经有样式了，为什么还要使用变量功能，是不是多此一举？样式与变量，两者是不是非此即彼的关系？

实际上，变量的使用场景非常广泛，尤其是涉及多人协作的大型项目，前置环节看起来稍微有点繁琐的变量（变量的定义、嵌套和绑定），相较于样式有无可比拟的优势。

变量的使用场景有更改品牌色、UI界面深浅模式适配（深浅模式切换）、产品适老化改造、多语言版本切换、多方案发布等，这些场景往往涉及成百上千的设计元素，在灵活的变量系统驱动下，可以轻松实现“牵一发而动全身”的效果，轻点切换变量模式，即可自动切换整个产品或UI界面的样式，无需手动改每一个图层。

Pixso变量功能怎么使用？

“光说不练假把式”，下面以App UI界面深浅模式适配（深浅模式切换）为例，介绍Pixso变量的使用流程，帮助大家掌握如何用Pixso变量高效构建设计系统，成倍提升设计管理的便捷性和灵活度，释放团队生产力，真正赋能产设研全流程。

1、变量入口

在没有选中任何元素的情况下，点击右侧面板的本地变量，打开变量管理面板。

2、创建变量

点击创建变量，选择颜色变量，我们先建立基础颜色变量。按照语义化命名原则，创建白色、灰度和品牌色等基础变量。

同时选中它们，右键添加到新分组，将其归类到base分组，方便后续管理。

接着创建语义化变量，用于具体的界面元素，可引用前面的基础变量作为值，实现变量间的嵌套。

3、创建变量模式

点击变量右上角的创建变量模式，Pixso会自动创建名为 “模式2”的列。

我们将两个模式分别命名为light和dark，依次配置深色模式下的颜色值。

4、修改变量集

将左上角的变量集名称改为“color”，用于管理颜色；根据需要可创建多个变量集以放置不同的变量类型。

5、变量绑定元素

变量创建完成后，接下来将它们应用到设计稿中。选中设计元素，在颜色面板点击变量标签，将对应的颜色变量绑定到元素上。

6、变量模式切换

选中设计稿容器，点击切换变量模式，将颜色从light切换为dark。

整个界面瞬间变为深色模式，再次点击可切换回浅色模式。

除了颜色变量，Pixso还支持的数值、文本、布尔变量，可以快速完成适老化改造、多语言适配等需求，操作逻辑与前边基本一致，可创建对应变量集进行管理，成倍提升产品设计效率。

通过前面的介绍和App UI深浅模式切换案例，相信你对Pixso变量有了全面的认识。从“原子化”的理念，到颜色、数值、文本、布尔四种类型，再到深浅模式切换的实际应用，我们不难发现，变量为设计系统赋予了极高的灵活性。

借助设计变量，通过巧妙的嵌套和模式切换，我们可以轻松实现“一改全改”的全局控制，让设计系统的维护和迭代变得轻而易举，告别繁琐拥抱高效，让设计回归创意本身。