怎样使用 Figma 变量、样式与模式？

分清单个可复用值、组合样式与不同场景的值，再对应到 Web 规则。

在 Figma 中，变量记录可复用的值，样式记录一组表现属性，模式为不同场景保存不同值。分清三者，有助于让设计稿采用共同规则。

先记住这几件事

• 变量 像一个有名字的值，例如背景颜色或间距； 集合 是相关变量的组织单位。
• 样式 可以组合一组属性，例如字体、字号和行高一起构成正文样式。
• 模式 在同一变量集合中区分场景，例如浅色与暗色； 别名 让变量引用另一个变量。
• 变量和样式可以配合使用，不需要为了使用新工具把所有样式都删掉。

概念与区别见 Figma：变量、集合与模式 和 变量与样式的区别 。

在设计稿中建立对应

资源对应的示意

以下是假设设计资源。

用一个例子走一遍

团队建立主要文字和背景变量，分别安排浅色、暗色值；正文样式继续记录字体与行高。切换主题后，检查正文、错误提示和边框。随后把这些用途与网页令牌对应，避免代码只照抄某张截图里的色值。

边界与常见误解

工具能表示哪些属性会变化，不等于网页已有同样行为。模式数量和具体支持能力按当前工具环境确认。变量与样式是表达规则的手段，不是设计系统完整内容。