Figma 自动布局怎么用：间距、Hug 与 Fill、换行 Wrap，再看辅助插件

先说结论：日常做按钮、卡片、列表和响应式页面，优先用 Figma 自带 Auto Layout，不必先装插件。Shift A 加上布局后，用方向、Gap、Padding、对齐、Hug / Fill / Fixed、Wrap、Min/Max，以及嵌套自动布局，就能覆盖绝大多数 UI。插件只补原生做不到的事——例如反向排列、瀑布流、按 4/8pt 审核间距。

本文操作与术语均对照 Figma 官方帮助：Guide to auto layout in Figma、Toggle on auto layout in designs、Use the horizontal and vertical flows in auto layout。没在官方文档核过的按钮名，本文不上。

什么时候用 Auto Layout，什么时候不用

适合：

• 文案会变长变短的按钮、标签、输入框
• 条目会增减的列表、导航、卡片内容区
• 要适配不同屏宽、需要嵌套横纵布局的页面模块
• 组件库里需要随内容自适应的主组件

不太适合 / 边界：

• 纯装饰、绝对坐标拼贴的海报（用普通 Frame + Constraints 往往更直接）
• 真正的瀑布流（官方说明 Vertical wrap 不是 masonry；不等高错落排布仍需插件或手排）
• 在自动布局子层上直接用 Constraints：官方写明，子对象默认不能设 Constraints，除非开启 Ignore auto layout（旧称 Absolute position）
• 实例里随意增删层：主组件可改结构，实例侧限制更多（见官方组件与 Auto Layout 说明）

怎么加上 Auto Layout

选中一个或多个图层，任选一种方式（来源：Toggle on auto layout）：

1. 快捷键 ⇧ Shift A
2. 右侧面板点 Add auto layout
3. 右键选中对象 → Add auto layout

注意：Auto Layout 只作用在 Frame 上。你选的是普通图层时，Figma 会在外面包一层带 Auto Layout 的 Frame。

已有 Frame / 主组件时，也可在右侧 Layout 里直接选 Vertical / Horizontal / Grid。复杂稿可用 Suggest auto layout（Mac：Ctrl ⇧ Shift A；Windows：Ctrl Alt ⇧ Shift A）批量建议结构，但仍建议分段检查。

去掉 Auto Layout：⌥ Option ⇧ Shift A（Windows：Alt ⇧ Shift A）。

方向：Vertical、Horizontal，以及 Grid

来源：Guide to auto layout。

流向 典型场景 Vertical 待办列表、信息流、表单字段自上而下 Horizontal 一排按钮、底部 Tab、图标导航 Grid 画廊、Bento、仪表盘格子；子项可跨多行/列，不会像 Wrap 那样自动折行

复杂界面常见做法是：外层纵向、内层横向（或反过来）嵌套，各自设 Padding / Gap。

Padding、Gap 与对齐

• Padding：父 Frame 边缘到子对象的内边距；可统一，也可分上下左右。
• Gap：子对象之间的间距。数值 Gap 最常用；水平/垂直流还可把 Gap 设为 Auto，并选 Between / Around / Evenly。
• 对齐：在右侧对齐格子里点选；可用方向键或 W/A/S/D 调到边缘（官方快捷键表）。

开启 Wrap 后，同一流向上可分别设「同行/同列间距」和「折行后行距/列距」。

Hug、Fill、Fixed，以及 Min / Max

这是 Auto Layout 真正省时间的地方（来源同上 Guide）：

属性 用在谁身上 行为 Hug contents Auto Layout Frame 框跟着内容缩小放大（仍尊重 Padding / Gap） Fill container 自动布局的子对象 吃掉父级剩余空间 Fixed 父或子 宽或高钉死 Min / Max width/height 父或子 与上面叠加；限制最小/最大尺寸

实用组合：

• 按钮：宽 Hug、高 Fixed 或 Hug，左右 Padding 固定 → 文案变长按钮跟着变。
• 卡片：外框宽 Fixed（或 Fill 进页面栏），高度 Hug → 正文变长卡片变高。
• 列表行：行宽 Fill，左侧图标 Fixed，标题 Fill。

画布技巧（官方）：双击自动布局对象的边 → Hug；按住 ⌥ Option / Alt 再双击边 → Fill。

注意：若某个子项是 Fill，父级在该轴上往往无法继续 Hug，会变成 Fixed——这是官方明确写出的行为，不是 bug。

换行 Wrap

来源：Horizontal and vertical flows。

1. 选中 Auto Layout Frame
2. 选 Horizontal 或 Vertical
3. 打开 Wrap

• 水平 + Wrap：从左到右排满后换到下一行（标签云、筛选 chips）。
• 垂直 + Wrap：自上而下排满后换到下一列；需要固定高度才能控制何时换列。

官方强调：Vertical wrap 不是瀑布流（masonry），仍按自动布局顺序排布。

Ignore auto layout（原 Absolute position）

来源：Guide · Ignore auto layout。

需要角标、浮动按钮、装饰点时：

• 选中自动布局的子对象 → 右侧点 Ignore auto layout；或
• 拖入时按住 Control（Mac）/ S（Windows）

该对象仍留在 Frame 内，但不参与流式排布，可手动定位，并可再对它使用 Constraints。其余 Auto Layout 的 resizing 选项对它不可用。

嵌套自动布局

把带 Auto Layout 的 Frame 再放进另一个 Auto Layout Frame，就能组合横、纵、Grid，做出顶栏 + 侧栏 + 内容区这类多维结构。每一层有自己的 Padding 和 Gap。官方另有「Combine vertical, horizontal, and grid」专题，上手后建议对着组件库练一层层嵌套。

和 Constraints、原型、文本的边界（避免踩坑）

• Constraints：普通自动布局子层不能设；只有 Ignore auto layout 的子层可以。自动布局 Frame 本身若嵌在普通 Frame 里，仍可对「这一整块」设 Constraints。
• 滚动原型：父级若是 Hug，会跟着内容长高。要做裁切滚动，通常把 Auto Layout 放进一个尺寸固定的普通 Frame 里。
• 文本：自动布局里尽量少用完全 Fixed 的文本框，否则文案变长容易和兄弟层重叠；文本的 Max height 与 Max lines 不能同时钉死（官方说明）。

什么时候再找插件

自带能力够用时：加布局、改间距、Hug/Fill、Wrap、嵌套、角标 Ignore——都不必装插件。

下面这些场景，插件更省事（全部来自觅件公开库检索；不写 Figma 社区外链；库内标免费的，正文一律写「以安装时提示为准」）：

1. 要反向排列 / RTL / 聊天气泡

Auto Layout Reverse丨自动布局反转（编辑&造型，作者 Tal Snir；库内标免费，以安装时提示为准）
为当前页的 Auto Layout Frame / Component 补反向控制，适合 LTR↔RTL、聊天组件快速对调顺序。原生没有一键 Reverse 时再用它。

2. 要按 4pt / 8pt 检查 Padding 与 Gap

• Spacing Checker丨间距检查器（效率，作者 Bas；库内标免费，以安装时提示为准）：按 4pt 网格查宽高、位置、间距、Padding，并可修到最近标准值。
• spacing-audit｜间距审核（Skills，作者 Tran Mau Tri Tam ✪；库内标免费，以安装时提示为准）：偏 4/8pt 体系的 AI Skill，会先出 Audit Summary 再改间距，不改 Hug/Fill 结构。适合设计系统整理和交付前自查。

3. 要快速整齐排布，但还没建成 Auto Layout

Alignmate｜排序（工具，作者 Dára Sobaloju；库内标免费，以安装时提示为准）
把多选图层排成网格 / 横向 / 纵向并统一间距，适合整理 Icon、Moodboard。它是「先排齐」，不是替代完整响应式 Auto Layout。

4. 要瀑布流（官方 Wrap 做不到）

Masonry | Grid Layout｜瀑布流（效率，作者 Dave aka Raiken；库内标免费，以安装时提示为准）
按内容高度排不等高卡片/图墙。作者定位也写明：更强调视觉平衡，不是用来替代 Auto Layout。

5. 后台表格想直接生成可继续改的 Auto Layout 结构

Table Templates with Auto Layout丨表格模板（图表，作者 Superbig；库内标免费，以安装时提示为准）
按行列表格模板生成，行高支持 Fixed / Hug / Fill，生成结果本身是 Auto Layout，方便你再调响应式。

觅件库一手统计（数据来自觅件插件库）

本稿发布前，在觅件用「自动布局」「Auto Layout」「间距」「布局」交叉检索并去重，核验到与 Auto Layout / 间距审核 / 排版辅助 直接相关的插件 8 款，库内均标免费（含上文列出的 Reverse、Spacing Checker、spacing-audit、Alignmate、Masonry、Table Templates，以及 Automater、Bento Grid Maker 等带 Auto Layout 能力的工具；以安装时提示为准）。分类页底「本分类全部插件」目录里，效率可见约 5 条、工具约 32 条、编辑&造型约 182 条，可按场景继续翻。

需要中文搜更多布局类插件：打开 觅件，用「自动布局」「间距」「表格」等词检索；也可在 Cursor / WorkBuddy 等里接 觅件 MCP（例如 Cursor 篇），用中文描述场景让 AI 帮你在库里对比。

一份可照做的最小练习

1. 画一个按钮：图标 + 文字，Shift A → Horizontal，Gap 8，Padding 12×8，宽 Hug。
2. 改长文案，确认按钮变宽。
3. 把多个按钮放进外层 Vertical Frame，Gap 12，宽 Fixed 320，子项宽 Fill。
4. 给右上角加小红点：对红点开 Ignore auto layout，Constraints 贴右上。
5. 需要标签换行时，在 Horizontal 上开 Wrap。

做完这五步，日常 Auto Layout 就够用了；缺 Reverse、瀑布流或间距审计时，再回到上面的插件名单。