Figma 实操 —— Auto Layout、组件与变量

本课导读

工具课。前四课的每个概念在 Figma 里都有一个对应的按钮：刻度对 Variables、组件对 Components、状态表对 Variants、"组内小组间大"对 Auto Layout 的间距面板。本课不追求"精通 Figma"（那是设计师的十年功），目标定得很实际：能画出一张规范的界面稿——用上 token、组件齐状态、布局经得起改字。浏览器打开 figma.com 就能跟练，免费档完全够用。预计 50 分钟（含动手）。

认门：Figma 是什么、界面长什么样

Figma 是浏览器里的协作设计工具——设计界的 Google Docs：文件在云端、多人同时编辑、链接一发就能看。它赢下行业的两张牌恰好都和协作有关：开发、产品都能零安装打开设计稿；评论、交接、版本都在同一个链接里。

新建文件后，界面三块：

• 左侧图层面板：画布上所有东西的树状结构（DOM 树的设计版）
• 中间画布：无限大，滚轮缩放，空格拖拽
• 右侧属性面板：选中什么就显示什么的属性——位置、尺寸、颜色、字体、Auto Layout，本课大部分操作都在这里

最先要分清的一对概念：Frame 不是 Group。Group 只是打包（把几个东西捆一起），Frame 是容器——有自己的尺寸、能裁剪内容、能设网格、能开 Auto Layout。用网页的话说：Frame 是 div，Group 只是圈选。画界面几乎永远该用 Frame（快捷键 F；把选中元素装进 Frame 是 Ctrl/Cmd+Alt+G）。

Auto Layout：布局的"活"骨架

不开 Auto Layout 的设计稿是"死"的：元素摆在绝对坐标上，改一行文字，后面所有东西都要手动挪。开了 Auto Layout（选中 Frame 按 Shift+A），Frame 变"活"：内容变了，布局自己流动。

它的属性面板和 flexbox 一一对应：

Figma	CSS flexbox	管什么
方向（横/竖）	flex-direction	排队方向
元素间距	gap	队友之间空多少
内边距	padding	队伍离墙多远
对齐九宫格	justify-content + align-items	队伍靠哪站

尺寸行为三选一是新手最大的坎，翻译成人话：

• Hug（抱内容）：我多大取决于孩子多大——按钮宽度跟着文字走
• Fill（填容器）：我多大取决于爹给多大——卡片里的正文横向填满
• Fixed（写死）：图标 24×24 这种

嵌套起来就是完整布局：卡片（竖向 Auto Layout，间距 8）里装标题行（横向，间距 8，两端对齐）再装正文。第二课的间距刻度在这里兑现：间距面板只填 4/8/12/16/24/32——改字不乱、增删不乱，这就是"经得起改字"的布局。

Components 与 Variants：状态表的落地

选中你画好的按钮，Ctrl/Cmd+Alt+K 变成主组件（图层名前出现四菱形标记）；从它拖出或复制出的都是实例——改主组件，实例齐步走，第四课"改 1 处不改 47 处"就是这个按钮。

**Variants（变体）**把一族相关组件收进一个抽屉，按属性组合管理。给按钮建变体，属性设两个：

• type：primary / secondary
• state：default / hover / focus / disabled

2×4 = 8 个变体一次画齐——这就是第四课那张状态表的 Figma 形态。使用者在实例的属性面板里像填表一样切换 type 和 state，不用知道抽屉里有几张图。

实例的规矩：实例上可以改文字、换图标（这叫 override，合法），但不要 detach（解绑成普通图形）——detach 之后它就脱离了组件系统，主组件再更新与它无关，47 处漏 1 处的事故通常就是从一次随手 detach 开始的。

Styles 与 Variables：token 的落地

右侧属性面板里，颜色、字体旁边有个四点小图标——Style：把当前值存成具名样式（text/title-md、color/accent），全文件复用。这是 token 的初级形态。

**Variables（变量）**是完整形态，直接支持第四课的两层命名：

1. 建一个 primitives 集合：gray-900、gray-600、paper-50、space-4……（只记值）
2. 建一个 semantic 集合：text-primary → 引用 gray-900，bg-page → 引用 paper-50（记用途，值全部引用原始层，不直接填色值）
3. 画布上的一切元素只挂 semantic 变量

Variables 还支持 Mode（模式）：同一个 text-primary 在 light 模式指向 gray-900、dark 模式指向 gray-50——第四课练习 2 那道"换肤改哪层"的题，Figma 用一个下拉菜单作答。

Dev Mode：契约的交付端

右上角切到 Dev Mode（开发模式），设计稿变成"可检查的规格"：开发点任何元素，直接看到尺寸、间距、以及变量名——不是 #1a1a1a，而是 text-primary。第四课说的"设计与开发共享词汇表"在这里完成交付：你在 Variables 里起的名字，就是开发在代码里引用的名字。

上手任务：40 分钟从零到一张课程卡

分步操作

1. 建文件，立刻度（8 分钟）

   注册/登录 figma.com，新建 Design File。先建 Variables：primitives 集合放 4 个灰、1 个米白、1 个强调色、间距 4/8/16/24；semantic 集合放 text-primary / text-muted / bg-page / bg-panel / accent，全部引用原始层。

2. 做文字样式（5 分钟）

   建三个 Text Style：title-lg（20/600）、body（16/400/行高 1.6）、caption（14/400）。字体用默认的也行——刻度对了比字体好看重要。

3. 画按钮组件（12 分钟）

   画一个 Auto Layout 按钮（内边距 8×16，文字挂 body 样式加粗，底色挂 accent）。Ctrl/Cmd+Alt+K 转组件，加变体：type（primary/secondary）× state（default/hover/disabled），共 6 个格子填齐。hover 加深一档、disabled 降对比——第四课状态表照抄。

4. 拼课程卡（10 分钟）

   竖向 Auto Layout Frame（内边距 24，间距 8，底色 bg-panel）：标题（title-lg）+ 元信息行（caption、text-muted）+ 摘要（body）+ 按钮实例（横向靠右）。卡片宽度 Fixed 360，内部全部 Fill/Hug，一个绝对坐标都不许出现。

5. 验收：折腾它（5 分钟）

   把标题改成两倍长——布局自己长高了吗？复制三张卡改成不同内容——间距还一致吗？把主组件按钮圆角改掉——三张卡里的实例跟着变了吗？三问全是，这张稿就是"规范的界面稿"。

✍️ 练习

练习：把验收三问变成肌肉记忆

上手任务的第 5 步就是本课练习。额外加一问：打开 Dev Mode 点你的卡片标题，看到的是变量名还是裸色值？如果是裸色值，回去检查哪一步漏挂了变量。

✅ 参考答案

四问全过的标志：① 改文字布局自适应（Auto Layout 生效）；② 复制后间距一致（间距来自刻度不是手摆）；③ 改主组件实例联动（没 detach）；④ Dev Mode 显示语义变量名（token 挂全了）。任何一问失败都能定位到本课对应小节。做完把文件链接存进笔记——项目课（第 7 课）直接在这个文件里开工。

📝 随堂测验

随堂测验0 / 5 题正确

1. Frame 和 Group 的关键区别是？

AFrame 收费，Group 免费BGroup 能嵌套，Frame 不能CFrame 是容器（有尺寸、能裁剪、能开 Auto Layout，相当于 div），Group 只是打包圈选——画界面几乎永远用 FrameD没有实质区别，习惯问题

2. Auto Layout 的尺寸行为 Hug / Fill / Fixed，正确的人话翻译是？

A小 / 中 / 大三档尺寸BHug＝我多大看孩子（按钮宽随文字）、Fill＝我多大看爹（正文填满卡片）、Fixed＝写死（图标 24×24）C分别对应手机/平板/桌面三端DHug 和 Fill 是同一件事的两个名字

3. 为什么实例可以 override（改文字换图标）但不建议 detach？

Adetach 会删除主组件Boverride 是免费功能，detach 要企业版Cdetach 会让文件变大Ddetach 后实例脱离组件系统，主组件更新不再联动——'47 处漏 1 处'的事故多从一次随手 detach 开始

4. 用 Variables 落地两层 token，正确的搭法是？

A一个集合就够，名字里带上用途即可Bprimitives 集合记值（gray-900）、semantic 集合记用途（text-primary）且只引用原始层；画布元素只挂 semantic——换肤/换模式只动映射Csemantic 集合里直接填色值，更省事DVariables 只能存颜色，间距要用 Style

5. 上手任务的'验收三问'验证的分别是？

A改文字看自适应（Auto Layout）、复制看间距一致（刻度而非手摆）、改主组件看联动（组件系统未被 detach）B文件大小、图层数量、导出速度C颜色好看、字体好看、圆角好看D能否分享链接、能否评论、能否导出 PNG

本课小结

• Figma＝设计界的 Google Docs；界面三块：图层树、画布、属性面板
• Frame 是 div，Group 只是圈选；凡"一排/一列"一律 Auto Layout（Shift+A）
• 尺寸三态：Hug 看孩子、Fill 看爹、Fixed 写死；间距面板只填刻度值
• Components + Variants＝状态表落地；override 合法、detach 是事故源头
• Variables 两个集合落地两层 token；Mode 让换肤变成下拉菜单
• Dev Mode 是契约交付端：开发看到的是 text-primary，不是 #1a1a1a

下一课换一种"动"的表达：界面动效的三个正当理由、时长与缓动的数字，以及让 AI 替你做产品视频的 Motion——设计工具进入"描述即产出"的时代之后，你的品味值多少钱。