一、 变量（Variable）的定义与原理 #
1. 定义与起源 #
- 变量（Variable）是 Figma 在最近两年推出的一个数据保存工具。
- 它本质上是开发（编程）当中的一个术语，用于对临时数据进行保存和使用。
- 在 Figma 中，变量面板看起来非常类似于 Notion 或 Coda 等工具中用到的智能表格，即 database（数据库）。
2. 界面入口 #
- 当用户选中画板/画布（配局），未选择任何元素时，右侧面板会显示
Local Variable。 - 这与之前课程中编辑的
Local Style（本地样式）位于同一区域。
二、 变量的三大核心应用场景 #
变量功能主要应用在以下三个进阶场景中：
1. Design Token（设计令牌） #
- 用途： 用于更进阶、更复杂的规范制定。
- 模式： 它支持一套非常具体和复杂的命名模式，例如将颜色根据不同的等级和状态进行具体规范化命名，这是之前使用样式（Style）功能无法很好解决的痛点。
- 示例： 常见于 Ant Design 或 TD Design 等 B 端设计规范网站的色彩介绍中。
- 课程说明： 来源指出 Design Token 较为复杂，不会在本课程中深入涉及。
2. 主题模式的切换 #
- 功能： 允许设计师快速在不同的主题模式间进行一键切换。
- 常见模式： 例如 APP 最基本的白天模式（Light）和夜间模式（Dark）。
- 扩展应用： 还可以定义更多的模式，如护眼模式、少儿模式或老年模式。
- 实现原理： 设计师可以为同一个变量（例如
b60颜色）创建多份不同的值（Value），每份值代表一个模式（Mode），从而达到只修改属性样式而不变更布局样式的情况下进行批量操作。
3. 进阶的交互辅助功能 #
- 用途： 用于在制作进阶的交互效果时，定义更复杂的逻辑。
- 实现逻辑： 必须应用变量进行数据处理、计算或条件判断。
- 示例： 例如判断一个开关是否打开，如果开了，才能启用登录按钮。
- 价值： 变量的增加大大增强了 Figma 的可用性和功能拓展性，使其能够在普通界面设计的基础上做出更复杂、更进阶的拓展。
三、 变量的数据类型与结构管理 #
1. 四种数据类型 #
变量是分类型的，类似于编程中需要声明数据类型。Figma 提供了四种类型：
- Color（色彩）。
- Number（数字）。
- String（文本段/文本内容）。
- Boolean（布尔值，即 True 和 False）。
2. 结构与管理 #
- 值与模式： 每个变量都有一个变量名（Name，如 b60）和对应的值（Value，即色号或数字）。变量的强大之处在于可以横向添加多个模式（Mode），例如
Light、Dark等。 - Collections（一级分类）： 可以通过
Collection对变量进行大的分类，例如“色彩的应用”和“文本的应用”，以区分不同的数据类型或应用场景。 - Groups（二级分组）： 在 Collection 内部，可以通过创建
New Group来进行二次划分，例如将颜色分为“中性色”和“主色系”。
四、 变量与样式（Style）的关键区别 #
理解变量和样式的区别是有效应用的关键。
| 特征 | 变量（Variable） | 样式（Style） | 来源 |
|---|---|---|---|
| 可保存的值 | 可保存多个值（模式）。 | 只能保存一个值。 | |
| 功能相关性 | 只有 **Color（色彩）**类型与样式功能相关联。 | 可应用于填充、描边、效果、字体和格线等属性 [前述来源]。 | |
| 记录内容 | 记录具体的值/内容（如数字、文本内容、布尔真假）。 | 记录元素的视觉样式（如字号、行高）。 | |
| 渐变色支持 | 不能记录渐变色。 | 支持记录渐变色。 | |
| 应用建议 | 无法完全替代正常的样式（Style）规范。 | 经常与变量混合使用于进阶的设计环境。 |
变量的应用 #
- 在填充（Fill）或描边（Stroke）过程中，可以通过选择带方形或圆角矩形图标的选项来应用变量。
- 设计师应区分带图标的变量选项和普通的样式（Style）选项。
核心警告： 变量功能很强大，但也很容易导致思维混乱。不能强行用变量去硬套所有的规范信息，它绝对做不到完全取代样式功能。
#Figma学习指南 #学习笔记最后一次修改于 2025-11-21