---
title: "Figma 自动布局怎么用：间距、Hug 与 Fill、换行 Wrap，再看辅助插件"
excerpt: "先把 Figma 自带 Auto Layout 用熟：Shift A、方向、Gap、Padding、Hug/Fill、Wrap 与 Ignore auto layout；再挑间距与排版辅助插件。"
canonical: https://plugmate.figmod.top/blog/figma-auto-layout
---

# 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](https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout-in-Figma)、[Toggle on auto layout in designs](https://help.figma.com/hc/en-us/articles/5731482952599-Toggle-on-auto-layout-in-designs)、[Use the horizontal and vertical flows in auto layout](https://help.figma.com/hc/en-us/articles/31289464393751-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](https://help.figma.com/hc/en-us/articles/5731482952599-Toggle-on-auto-layout-in-designs)）：

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](https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout-in-Figma)。

| 流向 | 典型场景 |
| --- | --- |
| **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](https://help.figma.com/hc/en-us/articles/31289464393751-Use-the-horizontal-and-vertical-flows-in-auto-layout)。

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

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

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

## Ignore auto layout（原 Absolute position）

来源：[Guide · Ignore auto layout](https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout-in-Figma)。

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

- 选中自动布局的子对象 → 右侧点 **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——都不必装插件。

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

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

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

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

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

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

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

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

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

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

[Table Templates with Auto Layout丨表格模板](/plugin/plugin-170)（图表，作者 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 条，可按场景继续翻。

需要中文搜更多布局类插件：打开 [觅件](https://plugmate.figmod.top/)，用「自动布局」「间距」「表格」等词检索；也可在 Cursor / WorkBuddy 等里接 [觅件 MCP](/mcp-tutorial)（例如 [Cursor 篇](/blog/cursor-plugmate-mcp)），用中文描述场景让 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、瀑布流或间距审计时，再回到上面的插件名单。