为什么必须掌握Auto Layout

传统Figma设计中，改一个按钮的文字，按钮框不会自动跟随变宽，得手动拖拽调整。列表多一项内容，下面所有元素要手动下移。Auto Layout解决这个问题——内容变了，布局自动适应。它让设计组件像网页一样响应式，改一处、自适应一片，是做设计系统的基础。

第一步：Auto Layout基础

选中一个元素或一组元素，按Shift+A添加自动布局。Figma会自动创建一个Frame包裹这些元素，并按默认设置排列。

Auto Layout面板核心参数：

  • 方向——水平或垂直排列，快捷键Shift+H或Shift+V
  • 间距——Gap控制元素间距，Padding控制内边距
  • 对齐——主轴和交叉轴对齐方式，justify-content和align-items
  • 填充——Fill container让元素充满可用空间，等同于flex:1

最基础的应用：一个按钮包含文字和图标，选中两者按Shift+A，设为水平方向，间距8px，内边距水平16px垂直8px。改文字长度，按钮自动变宽或变窄，图标始终跟着文字右侧8px。

第二步：嵌套布局

真实UI组件通常需要多层嵌套。以一个列表项为例：左侧头像加名字是水平布局，整个列表项是垂直布局（头像名字行加描述行加操作行）。

搭建步骤：

  1. 选中头像和名字，Shift+A创建水平布局，间距12px，垂直居中
  2. 选中这个水平布局和描述文字，Shift+A创建垂直布局，间距8px，左对齐
  3. 在右侧加一个操作按钮，选中列表项内容和按钮，Shift+A创建水平布局，两端对齐
  4. 给最外层布局设置内边距16px，白色背景，圆角8px

嵌套布局的核心思维：从最小单元开始搭，逐步包裹。先搭原子单元（头像加名字），再搭分子（列表项），最后搭容器（整个列表）。这和前端的组件化思维完全一致。

第三步：响应式组件

Auto Layout的真正威力在响应式。设置两个关键参数：

1. 填充模式：选中一个元素，在右侧Width/Height选择Fill container（填充容器）。这个元素会自动填满可用空间。在水平布局中设两个元素都为Fill，它们会平分宽度。

2. 约束设置：在Resizing面板中设置Fixed（固定尺寸）、Hug（适应内容）、Fill（填充容器）。一个列表项中的描述文字设为Fill，内容多时自动撑高整个列表项。

实战：做一个自适应宽度的卡片组件

外层Frame设为垂直Auto Layout，宽度Fill
标题文字设为Hug（宽度跟随文字）
描述段落设为Fill（宽度填满容器，文字自动换行）
底部按钮行设为水平Auto Layout，两端对齐

把卡片放到不同宽度的容器里，内容自动换行、间距自动调整，不需要手动改尺寸。

第四步：间距与对齐精细化

Auto Layout支持不同方向的独立间距设置：

  • Gap between items——元素之间的间距
  • Padding——上下左右独立设置内边距
  • 独立间距——在两个特定元素之间设置不同于全局的间距

对齐精细化：在水平布局中，主轴对齐控制水平方向（左、中、右、两端、均分），交叉轴对齐控制垂直方向（上、中、下）。这些对应CSS的justify-content和align-items。

实战技巧：两端对齐在做导航栏时极常用。选中Logo和菜单，水平Auto Layout，主轴设为两端对齐，Logo靠左、菜单靠右，中间空间自动分配。

第五步：与Variants变体搭配

Variants是Figma的组件变体系统，配合Auto Layout可以做出真正自适应的设计系统。

创建变体组件：选中组件，点击右上角变体，添加属性如Size（Small、Medium、Large）和State（Default、Hover、Disabled）。

每个变体都设置Auto Layout，改Size属性时，间距和内边距自动变化——Small变体内边距8px间距4px，Large变体内边距16px间距8px。一个组件属性切换就能变出多个尺寸，不用手动复制修改。

进阶：把Auto Layout和组件属性绑定。创建一个Spacing属性，值直接驱动Auto Layout的间距数值。不同使用场景调不同间距，一个组件覆盖所有场景。

常见问题与误区

  • 不用Auto Layout纯手动排列——改一处内容所有元素位置全乱，手动调整耗时巨大。养成用Shift+A的习惯
  • 嵌套层级太深——超过5层嵌套调试困难。合理规划层级，原子到分子到容器三层最佳
  • 间距写死像素值——设计系统中间距应该用变量。Figma的Variables功能配合Auto Layout间距值，统一修改一处全局生效
  • 忽视Fill和Hug的区别——Fill填满容器适合弹性元素，Hug适应内容适合固定元素。用反了会导致布局错乱

效率数据

实测：搭建一个包含20个变体的按钮组件系统。传统方式手动复制修改每个变体的尺寸间距约3小时，用Auto Layout加Variants约30分钟。后续修改全局间距从8px改为12px，传统方式要改20个变体约30分钟，Auto Layout方式改一个变量值5秒。核心建议是：Auto Layout不是可选技能而是Figma的基础能力，从第一天用Figma就应该用Auto Layout，而不是先手动排列再学。