Variables（变量）入门 #

依据官方文档整理：Guide to variables in Figma (opens new window)。功能可用性因方案与席位而异，以账号内实际界面为准。

Variables（变量） 用于存储可复用的值，并可绑定到设计属性与原型动作。典型用途包括：

  • 用设计令牌（design tokens）管理颜色、间距等，提升设计系统维护效率
  • 借助 Mode 在浅色 / 深色等主题间切换，并同步间距与文案等
  • 在原型中用变量保存状态，配合表达式与条件逻辑减少重复画板

站内相关：术语表 · Variables、创建样式、自动布局、更新日志。

核心概念 #

变量类型与集合 #

官方「变量总览」类文档说明：变量按类型存储不同取值（如颜色、数字、字符串、布尔等，以产品当前支持为准），并归入 Collection（集合） 管理。集合内可定义多个 Mode（模式），使同一变量在不同模式下有不同定义（例如 color/bg 在 Light / Dark 下各一套）。

向团队库发布变量等能力通常需要 Professional 及以上方案（官方写明的计划列表以帮助中心为准）。

应用到设计 #

可在属性面板将变量绑定到填充、描边、圆角、间距（含 Auto layout）、部分文字属性等。也可通过别名（alias）让一个变量引用另一个变量的定义，便于搭建语义层令牌。

扩展阅读（官方）：

与 Styles（样式）的区别 #

Styles 适合封装一组外观（颜色填充、文本排版、效果、布局网格等）。Variables 更适合作为可绑定的单个值，并支持 Mode 切换与原型逻辑。官方专文：The difference between variables and styles (opens new window)。实践中二者常并存：样式管排版组合，变量管主题化 token。

见本站 创建样式。

进阶：原型与 API #

在 Professional 等方案上，可用 Set variable 等原型动作修改变量，结合表达式、多动作与条件分支，用更少 Frame 做出高保真交互。官方入口见变量总指南中的 Variables for advanced prototyping 一节。

开发者还可通过 Plugin API / REST API 读写变量，用于与代码库同步令牌。

Dev Mode 中的变量 #

工程师在 Dev Mode 中可查看应用到图层的变量详情与建议变量，并通过变量表浏览本地集合（见官方 Variables in Dev Mode）。

建议练习 #

官方提供 Variables playground 等 Community 练习文件（链接见 Guide to variables (opens new window)）。建议复制后对照本页概念动手绑定颜色与间距 Mode。

整理自 Figma Help Center，更新于 2026-11-02（Asia/Shanghai）。

Dev Mode 入门