设计变量是什么，如何使用？变量系统使用全攻略

变量原先是 IT 研发领域的术语，但随着设计工程化的发展，设计与开发之间的边界日渐模糊，变量也被引入到了设计领域，设计变量也就因此诞生。

与研发变量一样，设计变量也遵循了“低耦合”的理念，将设计中常用的属性与其值抽离开来，基于键值对的方式来管理设计系统。

变量是什么？

变量（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 还支持的数值、文本、布尔变量，可以快速完成适老化改造、多语言适配等需求，操作逻辑与前边基本一致，可创建对应变量集进行管理，感兴趣的朋友，可以在 Pixso 中自行尝试！

以上就是本次想和各位分享的所有内容，希望能帮到有需要的朋友。