在 Figma 推出 Variables（变量系统）之前，设计系统中的颜色和文字仅能通过 Style（样式）进行管理。然而，传统的 Style 属于“单一扁平值”，当面对多主题（如深色/浅色模式切换）、多设备断点响应（如移动端与桌面端不同的间距）、多语言文案切换以及多品牌白标（White-label）产品定制时，往往需要成倍复制画板，造成设计资产严重冗余与维护灾难。

Figma Variables 的引入，真正将现代前端工程中的 变量（Variables） 与 设计令牌（Design Tokens） 概念带入画布。本文将深入解析 Variables 的底层架构，并带领大家完整实战一套工业级双模式（Light / Dark）与多断点自适应系统。

---

1. Variables 核心概念与四大基础类型

Figma Variables 本质上是存储特定属性的可复用键值对。通过将变量绑定到图层属性上，可以在全局修改变量值或切换上下文模式（Mode）时，实现全画板联动更新。

目前 Figma 官方原生支持以下四大变量类型：

变量类型	图标标识	允许绑定的图层属性	典型应用场景
Color（颜色）	🎨 调色板	图层填充（Fill）、描边（Stroke）	品牌主色、表面背景色、文本对比度颜色、状态告警色
Number（数值）	🔢 数字	宽度/高度、圆角（Corner Radius）、内边距（Padding）、间距（Gap）、不透明度、描边粗细	8pt 栅格间距梯度、卡片圆角层级、响应式容器宽度
String（字符串）	🔤 字母	文本图层内容（Text Layer Content）、组件属性值	多语言国际化（i18n）文案切换、用户默认昵称占位符
Boolean（布尔）	🔘 开关	图层可见性（Layer Visibility）、组件布尔属性	控制徽标（Badge）显示、密码输入框明暗文眼睛图标显示

Variables 与 Styles 的协同边界

• Variables 专注于存储单一原始值（单个 Hex 色值、单个数值）以及跨模式切换。
• Styles 专注于复合渲染效果。例如：渐变填充（Linear / Radial Gradient）、文字复合样式（字体族 + 字重 + 字号 + 行高）、以及图层投影/内阴影（Drop Shadow / Blur）。
• 最佳实践：在文字颜色、纯色背景、间距上全面使用 Variables；在投影效果、毛玻璃背景、复合渐变色上继续使用 Styles，或者将 Variable 嵌入到 Style 中使用。

---

2. 集合 (Collection) 与模式 (Mode) 架构模型

理解 Variables 的关键在于其组织模型：Collection（变量集合） 与 Mode（模式列）。

┌───────────────────────────────────────────────────────────────┐
│ Collection: "Color Tokens" (集合)                             │
├────────────────────────┬───────────────────┬──────────────────┤
│ Variable Name          │ Mode: Light       │ Mode: Dark       │
├────────────────────────┼───────────────────┼──────────────────┤
│ surface/primary        │ #FFFFFF           │ #0F172A          │
│ text/primary           │ #1E293B           │ #F8FAFC          │
│ brand/accent           │ #2563EB           │ #3B82F6          │
└────────────────────────┴───────────────────┴──────────────────┘

• Collection（集合）：逻辑命名空间，用于将同类变量归纳在一起（例如划分 Primitives、Semantics、Spacing、Typography 等不同集合）。
• Variable（变量行）：定义变量的名称、类型以及作用域。
• Mode（模式列）：同一个变量在不同上下文下的具体表现。例如在 Light 模式下列值为浅灰，在 Dark 模式下列值为深黑；在 Mobile 模式下列值为 16px，在 Desktop 模式下列值为 32px。

---

3. 实战：构建企业级 Light / Dark 双模式色彩体系

下面我们将通过标准四步法，从零建立一套支持一键切换深浅色模式的完整体系。

步骤一：创建基础色与语义色集合

1. 在画布无选中状态下，点击右侧属性面板中的 Local Variables 弹窗图标。
2. 点击右上角新建集合，命名为 01-Primitives（原始色板集合），创建基础色阶：
   • blue/500 -> #3B82F6
   • blue/600 -> #2563EB
   • gray/100 -> #F1F5F9
   • gray/900 -> #0F172A
   • white -> #FFFFFF
3. 新建第二个集合，命名为 02-Semantics（语义层集合）。

步骤二：配置多模式 (Modes) 并绑定别名 (Alias)

在 02-Semantics 集合中，点击表头右侧的 + 按钮，添加两个 Mode 列，分别重命名为 Light 与 Dark：

语义变量名	Light 列 (引用别名)	Dark 列 (引用别名)
surface/default	引用 01-Primitives/white	引用 01-Primitives/gray/900
surface/card	引用 01-Primitives/white	引用 01-Primitives/gray/900
text/primary	引用 01-Primitives/gray/900	引用 01-Primitives/white
text/secondary	引用 01-Primitives/gray/500	引用 01-Primitives/gray/400
brand/action	引用 01-Primitives/blue/600	引用 01-Primitives/blue/500

别名引用的重要性

在语义层定义变量时，千万不要直接输入十六进制色值！必须右键选择 Create Alias 关联到 Primitives 底层色板。这样当未来调整品牌主色时，只需修改原始色板，所有语义层与业务画板即可全局同步更新。

步骤三：在图层中应用 Variables

1. 绘制一个展示卡片 Frame：
   • 填充（Fill）：点击颜色选择器，切换到 Libraries/Variables 选项卡，选中 surface/card。
2. 卡片内部创建文字图层：
   • 标题文字选中 text/primary。
   • 描述说明文字选中 text/secondary。
3. 底部主操作按钮：
   • 按钮背景填充选中 brand/action。
   • 按钮文案选中 white。

步骤四：在页面中一键切换主题

1. 选中整个父级 Frame 或整个页面画布。
2. 观察右侧面板 Layer 区域，会出现一个名为 Change Variable Mode（菱形图标）的控制菜单。
3. 将 Mode 从 Auto 或 Light 切换为 Dark。
4. 瞬间见证奇迹：卡片背景自动变为深黑，标题自动反色为纯白，描述文字变为浅灰，按钮根据深色调配方微调提亮，全过程零手工改色！

---

4. 空间与间距：数值变量的响应式应用

除了色彩系统，Number 变量 是打造响应式布局（Responsive Layout）的核心神器。

创建间距集合 (Spacing Tokens)

在 Local Variables 中新建 Spacing 集合，定义两列模式：Compact（适用于移动端）与 Spacious（适用于桌面端）：

变量名称	Compact 模式 (移动端)	Spacious 模式 (桌面端)
spacing/layout-margin	16	32
spacing/gutter	12	24
spacing/card-padding	16	24
radius/card	12	16

绑定到 Auto Layout 属性

1. 选中卡片容器，在其 Auto Layout 面板的 Padding 输入框中，点击出现的 Variable 图标，选中 spacing/card-padding。
2. 选中圆角（Corner Radius）输入框，绑定 radius/card。
3. 复制两份同样的画板，将画板 A 模式设为 Compact，画板 B 模式设为 Spacious。同一个组件在不同画板中将自动呈现精准的设备自适应间隙与圆角，真正实现“一次组件设计，全场景自适应”。

---

5. 生产环境高频避坑与设计规范

1. 避免为每种微调创建孤立变量： 变量应具备高度通用性，如果为“某个页面右上角的特定小标签”创建私有变量，会迅速导致变量列表急剧膨胀失控。
2. 模式命名的通用性： 如果您的产品需要适配多客户品牌（如 SaaS 白标），模式命名可设为 Tenant_A、Tenant_B、Default；避免将模式名称与单一业务场景强耦合。
3. 付费计划配额意识： Figma 免费版文件仅支持 1 个模式列（Mode）；专业版（Professional）支持多达 4 个 Mode；组织版（Organization）与企业版（Enterprise）支持高达 40 个 Mode。在规划大型多维主题方案时需提前结合团队订阅计划进行合理的结构划分。