在 Figma 推出 Variables（变量）之前，设计系统通常依赖 Styles（样式）来管理颜色与文字排版。但当面对暗黑模式切换、多品牌换肤、响应式间距适配以及前端工程化对接时，单纯的样式系统往往需要复制多套重复画板，维护成本呈指数级上升。Figma Variables 的出现改变了这一现状：它让设计系统真正具备了参数化、层级引用和上下文动态计算能力。

本文围绕企业级 Design Tokens（设计令牌） 的标准化架构，从基础别名映射、多模式（Modes）矩阵搭建、作用域防错约束，到 Dev Mode 前端代码无缝交付，全面拆解 Figma Variables 的生产级落地流程。

如需了解基础概念与样式区别，可先参考本站 Variables 入门 与 创建与使用样式；标准命名规范可对照 Design Tokens 标准命名与结构手册。

一、Variables 与 Styles 的分工与本质区别

许多团队在重构设计系统时常陷入误区：有了 Variables 是否需要彻底废弃 Styles？答案是否定的。两者是互补而非互斥的关系：

维度	Figma Variables（变量）	Figma Styles（样式）
数据本质	单一原子值（Color、Number、String、Boolean）	复合属性集合（如文字样式含字号/行高/字重，效果样式含多层阴影）
多模式切换 (Modes)	原生支持。同一个 Token 在 Light / Dark 下动态映射不同物理值	不支持模式切换，深浅色必须维护两套完全独立的样式名称
层级别名 (Alias)	支持变量引用变量，构建清晰的 Tokens 继承体系	样式之间无法相互继承或引用
属性绑定场景	填充色、描边色、Auto Layout 间距、内边距、圆角、原型状态	整体文本排版（Typography）、多层阴影/模糊（Effects）、布局网格（Grids）
前端映射物	CSS 自定义属性 (--color-text-primary)、JS Tokens 对象	CSS 预设类名、Mixins 或复合样式规则

最佳协同原则：用 Variables 管理所有的色彩色板、空间间距（Spacing）、几何圆角（Radius）与交互状态；用 Styles 管理整套文字排版层级（Font Family + Size + Line Height 复合体）和复杂卡片投影效果。在文字样式中，同样可以将其文字颜色属性绑定到语义变量上，实现真正的全局贯通。

二、企业级 Design Tokens 分层架构实操

构建可持续维护的变量体系，核心在于坚决杜绝“组件直接引用十六进制裸色”。标准的工业级架构采用清晰的两层或三层解耦模型：

┌────────────────────────────────────────────────────────┐
│  1. Primitive Tokens（基础物理层 / 裸值色板）            │
│  例如: blue-500 = #3B82F6, gray-900 = #111827, 8px    │
└──────────────────────────┬─────────────────────────────┘
                           │ 建立别名引用 (Alias)
                           ▼
┌────────────────────────────────────────────────────────┐
│  2. Semantic Tokens（语义决策层 / 语境上下文）          │
│  例如: bg-surface-default = { Mode: Light -> white }   │
│                             { Mode: Dark  -> gray-900 }│
└──────────────────────────┬─────────────────────────────┘
                           │ 绑定组件属性并限制 Scopes
                           ▼
┌────────────────────────────────────────────────────────┐
│  3. 业务组件 / 页面画布 (Buttons, Inputs, Cards)        │
└────────────────────────────────────────────────────────┘

1. 拆分独立的 Collections（集合）

建议在 Figma 的 Local Variables 面板中，创建至少两个独立的集合：

• 01_Primitives（全局基础物理值）：只包含一列默认值（Value），严禁在此处划分 Light / Dark 模式。这里存放纯粹的原子值，例如 color/blue/100 ~ color/blue/900、space/4 (4px)、space/8 (8px)、radius/sm (4px)、radius/md (8px)。
• 02_Semantic（语义决策层）：开启多列模式（例如 Light 与 Dark，或品牌 A 与品牌 B）。这里的变量不填写具体的物理色值，而是点击输入框右键或按别名快捷键，全部指向 01_Primitives 中的对应变量。

2. 语义 Token 的命名公式规范

统一遵循清晰的语境结构：[类别]-[使用对象]-[层级/状态]。

• 背景表面：surface-default、surface-subtle、surface-elevated、surface-inverse
• 文本可读性：text-primary、text-secondary、text-muted、text-inverse
• 边界线与分割：border-subtle、border-strong、border-focus
• 交互行为状态：action-primary-default、action-primary-hover、action-disabled

对照详细命名矩阵可深入查阅 Design Tokens 命名规范速查。

三、多模式 (Modes) 暗黑主题一键切换实战

多模式切换是 Variables 最强大的功能之一。在 02_Semantic 集合中点击右上角 + 新增一列，命名为 Dark，即可针对每个语义 Token 配置深色模式下的别名映射。

核心映射对照表示例

语义变量标识 (Token)	Light 模式别名	Dark 模式别名	前端 CSS 变量映射
surface-canvas	primitives/white	primitives/gray-950	--color-surface-canvas
surface-card	primitives/white	primitives/gray-900	--color-surface-card
text-primary	primitives/gray-900	primitives/gray-50	--color-text-primary
text-secondary	primitives/gray-600	primitives/gray-400	--color-text-secondary
border-divider	primitives/gray-200	primitives/gray-800	--color-border-divider
interactive-accent	primitives/blue-600	primitives/blue-500	--color-interactive-accent

如何在设计稿中触发动态切换

1. 页面或顶层容器级切换：选中整个页面画板（Frame），在右侧属性面板的 Layer（图层）区域，会看到一个类似图层调节的快捷图标 Change variable mode。
2. 选择目标模式：点击后在下拉菜单中展开 02_Semantic，将其从 Auto 切换为 Dark。此时画板内部所有绑定了语义变量的子组件（背景、文字、边框、图标），都会瞬间同步切换为深色模式外观。
3. 局部语境隔离（Nested Override）：在深色画板中，如果嵌入一个固定需要反白高亮显示的浅色营销横幅，只需选中该横幅 Frame，单独将其 Variable Mode 强制设为 Light。Figma 支持无限层级的模式继承与局部覆盖。

四、变量作用域 (Scopes) 与防错约束

当团队规模扩大时，设计师经常会误把背景颜色绑定到文字上，或者把边框间距用于圆角。Figma 提供了 Scopes（作用域） 功能，从底层杜绝属性乱配：

1. 打开 Local Variables 面板，双击或悬停任一变量，点击其右侧的 Edit variable（编辑变量） 图标。
2. 展开 Scopes 区域，取消勾选不适用的属性场景：
   • 对于 surface-* 变量：只勾选 Frame fill 与 Shape fill，取消勾选 Text fill 与 Stroke。
   • 对于 text-* 变量：只勾选 Text fill。
   • 对于 border-* 变量：只勾选 Stroke。
   • 对于 Number 类型的间距变量：区分 Gap、Padding 与 Corner radius。
3. 隐藏私有变量 (Hide from publishing)：对于 01_Primitives 基础集合，可勾选底部的 Hide from publishing。这样当把设计库发布给全公司使用时，业务设计师的调色板里只会看到经过严格语义化的 02_Semantic，从源头避免跨过语义层直接滥用物理裸色。

五、Auto Layout 与响应式组件的变量绑定

除了颜色，Number（数值）类型的变量对组件弹性布局同样至关重要：

1. 内边距与间距参数化：在 Auto Layout 布局 中，点击 Padding 或 Gap 输入框内部的变量快捷入口，绑定 space-4 (16px) 或 space-6 (24px)。
2. 断点密度自适应：在集合中创建 Desktop 和 Mobile 两个模式，定义 layout-gutter 在 Desktop 下为 32px，在 Mobile 下自动收缩为 16px。在不同端画板之间拖拽组件时，布局间距自动适应。
3. 极值约束保护：通过给 Frame 设置 Min Width / Max Width 并绑定变量，防止大屏拉伸时内容过度散开。
4. 组件变体状态联动：将变量与组件属性结合，利用 Boolean 变量控制开关插槽，结合 组件与变体设计 实现高拟真交互。

六、Dev Mode 与前端代码交付全链路

变量不仅是设计资产，更是前端工程师的生产环境代码来源。在交付阶段，Variables 能够彻底取代传统的手工切图标注：

1. 配置 Code Syntax（代码语法映射）

在编辑变量弹窗中，点击 Code syntax，为不同技术栈直接录入生产变量命名：

• Web (CSS): var(--color-surface-default)
• Android (Compose): MaterialTheme.colorScheme.surface
• iOS (SwiftUI): Color.Surface.default

当工程师在 Figma Dev Mode 开发者模式 中选中该图层时，右侧 Code 面板将不再显示 #FFFFFF 这样的死值，而是直接生成前端可以直接复制的 background: var(--color-surface-default);。

2. 前端自动化导出工作流对比

交付方案	适用场景	优势	实施要求
Dev Mode 手动核验	日常功能迭代、敏捷需求	零配置门槛，即点即看，支持差异高亮	需开发者拥有 Dev Mode 席位
Community Tokens 插件	中型团队、快速建立 JSON	一键导出标准 JSON 格式，支持 GitHub 提交	依赖第三方插件维护稳定性
Figma REST API + Style Dictionary	大型企业级设计系统基础设施	完全自动化，CI/CD 流水线直接编译生成 CSS/SCSS/TS 文件	需后端或工程化脚本开发支持

如果团队正计划将设计稿全自动化转换为生产级前端组件，可参考 Figma 转 HTML 与前端代码交付实战 和 Dev Mode MCP 协同接入。

常见问题与避坑清单

问：修改了 Variable Mode，为什么画板上的某些图层颜色没有跟随改变？
答：通常有三个原因：一是图层上直接使用了旧版的 Local Style 而非 Variable；二是图层填充时手动修改了 Hex 裸值，解绑了变量；三是图层设置了独立的不透明度覆盖（Opacity Override），建议在图层属性中重新点击变量库进行绑定。

问：Free（免费）版能否使用 Variables？
答：免费版 Starter 计划可以使用本地变量，但仅支持单个模式（1 Mode），无法体验 Light/Dark 切换，且不支持将变量发布到跨团队公共库。多模式与跨团队发布需要升级至 Professional 或更高方案，方案选型可查阅 如何选择 Figma 方案。

问：变量过多导致文件卡顿怎么办？
答：将 Prims 和 Semantic 集合收归到专门的独立 Design System 库文件中，工作业务文件只以只读方式引入（Enable Library）。业务文件中避免频繁创建冗余临时变量，大型工程性能优化细节详见 常见报错与疑难故障手册。