Auto Layout（自动布局）是 Figma 区别于传统矢量绘图软件的核心引擎。在过去版本中，Auto Layout 仅支持单一的水平（Horizontal）或垂直（Vertical）单向流动，遇到多标签流体折行、头像层叠重叠以及极值边界限制时，往往需要依赖大量辅助画板或手动断开排版。

随着最新 Auto Layout 引擎的全面升级，Figma 正式补齐了现代 CSS Flexbox 的核心关键能力：Wrap 自动换行、Min / Max 尺寸约束、负间距层叠（Negative Spacing） 以及 绝对定位（Absolute Position）。本文将深度解析这四大特性的核心机制与工业级组合玩法。

---

1. 核心特性矩阵与 CSS Flexbox 映射

对于追求“产研无缝对齐”的团队，Auto Layout 的每一个属性在前端 CSS 中都有精准的映射对应关系：

Auto Layout 属性	Figma 面板位置 / 图标	对应 CSS Flexbox 属性	实际设计用途
Wrap (自动换行)	布局方向第三个弧形换行图标	flex-wrap: wrap;	标签栏（Tags）、筛选器、商品多列网格卡片响应式折行
Min Width / Height	尺寸输入框下拉菜单	min-width: ...; min-height: ...;	设定卡片/按钮最小收缩底线，防止内容挤压畸变
Max Width / Height	尺寸输入框下拉菜单	max-width: ...; max-height: ...;	设定自适应容器最大宽度，防止大屏下文字行长过宽
Negative Spacing	间距输入框直接输入负数（如 -8）	margin-left: -8px; / 图层叠放	多人协作头像堆叠（Avatar Stack）、卡片阴影重叠
Canvas Stacking	高级布局选项面板	z-index 堆叠次序	控制负间距重叠时“前在上 (First on top)”或“后在上”
Absolute Position	图层右上角十字靶心图标	position: absolute;	将通知红点（Badge）、关闭按钮脱离排版流自由定位

---

2. 深入实战：Wrap (自动换行) 与多行对齐控制

在设计标签列表（Tag List）或商品分类筛选器时，标签长度不可预测，且需要在不同设备宽度下自动流式折行。

2.1 制作一个自适应换行标签组

1. 选中多个已做好自动布局的 Tag 药丸组件。
2. 按下 ⇧ + A 将其编入一个父级 Auto Layout 容器。
3. 在右侧面板 Direction（方向）区域，选中第三个选项 Wrap。
4. 将横向间距（Horizontal gap）设为 8，垂直间距（Vertical gap）设为 12。
5. 将父容器宽度设置为 Fill container（撑满父容器）或直接拉动父容器右侧边框。
6. 动态效果：当父容器宽度缩小，装不下的标签会自动流体下落到第二行、第三行，行间距自动保持为 12px，完全无需手动挪动图层！

2.2 配合 Min/Max 打造真正健壮的响应式卡片网格

过去要在桌面端展示 4 列卡片、在平板端变成 2 列、在移动端变成 1 列，往往需要画 3 套完全独立的组件。现在借助 Wrap 与 Min-width 可以在单一容器内搞定：

• 子卡片设置：
  • 宽度模式：Fill container
  • 添加约束：点击宽度下拉菜单 -> Add min width -> 输入 280px
• 父容器设置：
  • 启用 Wrap
• 效果表现：
  • 当父容器宽度为 1200px 时，刚好并排容纳 4 张卡片（每张约 280~300px）。
  • 当父容器缩窄至 700px 时，放不下 3 张，卡片自动折行为 2 列，且自动伸展填满整行。
  • 当缩窄至 390px 移动端时，自动降级为单列纵向通栏卡片！

---

3. 负间距 (Negative Spacing) 与头像堆叠最佳实践

在社交应用或协作工具中，展示“当前在线成员”常需要将多个圆形头像重叠排列。

3.1 极简实操步骤

1. 绘制 4 个 32 × 32 的圆形头像。
2. 选中它们按下 ⇧ + A 建立水平自动布局。
3. 在间距（Item spacing）输入框中，直接键入负值，例如 -8。
4. 观察头像瞬间实现重叠展示！

3.2 掌控堆叠前后顺序 (Canvas Stacking)

默认情况下，后创建的元素会遮挡前面的元素（Last on top）。如果设计规范要求“左侧第一个头像在最上方”，只需：

1. 点击 Auto Layout 面板右下角的三点图标（Advanced layout settings）。
2. 找到 Canvas stacking 选项。
3. 将选项从 Last on top 切换为 First on top。
4. 此时首个头像将平滑覆盖在后续头像之上，完美符合各主流设计系统的规范需求。

---

4. 绝对定位 (Absolute Position) 与排版流的有机融合

在过去，一旦某个容器开启了 Auto Layout，容器内的所有子元素都必须老老实实参与排版，无法自由随意摆放。

典型痛点场景

• 购物车图标右上角的小红点提示（Badge）。
• 弹窗卡片右上角的关闭按钮（Close Icon）。
• 装饰性背景光斑或渐变几何图形。

解法：一键赋予绝对定位

1. 将红点图层直接拖入已开启 Auto Layout 的购物车卡片内。
2. 选中该红点图层，在右侧属性面板右上角点击 Absolute position 图标（或快捷键触发）。
3. 此时该红点在图层面板中图标变为虚线框，完全脱离了父级 Auto Layout 的横纵流式排布，你可以像在普通 Frame 中一样，将其随意拖拽对齐到右上角边缘。
4. 更棒的是，由于它依然是该父容器的子图层，你可以为其配置 Constraints（约束） 为 Right 和 Top。当父容器无论如何自适应拉伸变形时，小红点永远牢牢锚定在右上角相对位置！

---

5. 常见排版对齐避坑指南

1. 文本基线对齐 (Baseline Alignment)： 当一行 Auto Layout 中并排包含大字号标题（如 24px）与小字号副标题（如 14px）时，默认居中对齐会导致文字基线视觉下坠。在高级设置中勾选 Align text baseline，可以让不同字号的文字底边缘完全严丝合缝对齐在同一水平基准线上。
2. 多余包裹容器清理： 引入了 Wrap 和 Min/Max 后，过去为了折行而嵌套的无数层中间辅助 Frame 已不再需要。适时精简嵌套层级，不仅能让图层面板更加清爽，还能大幅提升复杂大文件的缩放渲染性能。