📦 06 - 自动布局

自动布局（Auto Layout）是 Figma 最强大的功能之一，它让你的设计像 CSS Flexbox 一样自动排列和调整。掌握自动布局，你可以创建真正响应式的设计，大幅减少手动调整的工作量。本课从基础概念到高级技巧全面讲解自动布局的方方面面。

📌 本课要点

一、自动布局基础

自动布局让框架内的子元素按照规则自动排列，无需手动定位每个元素的位置。当内容变化（如文字变长、子元素增多），布局会自动调整——这就是"自动"的核心含义。自动布局的原理类似 CSS 的 Flexbox，如果你有前端开发经验，会非常容易理解。

1
添加自动布局：选中一个框架或多个元素，按⇧+A，或右键→Add auto layout。框架会立即按规则排列子元素。✅验证通过
2
基本效果：添加后，子元素会自动排列，默认垂直方向从上到下。元素之间的间距和内边距可以精确控制。✅验证通过
3
调整方向：在右侧属性面板中，切换水平（Horizontal）或垂直（Vertical）方向。也可以选择反向排列。✅验证通过

二、布局属性详解

1. 方向（Direction）

→ 水平布局

子元素从左到右排列。

↓ 垂直布局

子元素从上到下排列。

2. 间距（Gap）

1
设置间距：Gap 控制子元素之间的间距。输入数值如8、16等。这是最常用的间距控制方式。✅验证通过
2
独立间距：点击间距旁的独立设置图标，分别设置水平和垂直间距。在双向排列时特别有用。✅验证通过

3. 内边距（Padding）

1
统一内边距：Padding 输入一个数值，四边相同。如按钮的内边距通常设为12×24。✅验证通过
2
独立内边距：点击独立设置图标，分别设置上下左右。常见用法：左右24px、上下16px。✅验证通过

4. 对齐（Alignment）

对齐方式效果典型用途
Start对齐起点（左/上）默认对齐方式
Center居中对齐按钮、标签、提示
End对齐终点（右/下）右对齐内容、操作栏
Space Between两端对齐中间均匀导航栏、工具栏
Space Around均匀分布含两端半距等间距按钮组

三、嵌套自动布局

自动布局可以嵌套使用，创建复杂的布局结构。外层框架控制大布局，内层框架控制小组件内部排列。这是创建真实 UI 界面的核心技巧。

1
示例：卡片布局：外层垂直布局（图片+内容区+按钮行），内层水平布局（标签+标签），再内层垂直布局（标题+描述）。✅验证通过
2
嵌套原则：从外到内思考布局——先确定页面大结构（如顶部导航+侧边栏+主内容），再细化每个区域内部排列。✅验证通过

嵌套自动布局示例

卡片（垂直自动布局，Gap:16，Padding:24）
  ├── 图片（Fill width）
  ├── 内容区（垂直自动布局，Gap:8）
  │   ├── 标签行（水平自动布局，Gap:8）
  │   │   ├── 标签1（Hug width）
  │   │   └── 标签2（Hug width）
  │   ├── 标题（Fill width）
  │   └── 描述文字（Fill width）
  └── 按钮行（水平自动布局，Gap:12，Space Between）
      ├── 次要按钮（Hug width）
      └── 主要按钮（Hug width）

四、子元素尺寸控制

三种尺寸模式

模式说明行为典型用途
Fixed固定宽高不随容器和内容变化固定尺寸的图标、头像、间距
Hug content包裹内容尺寸随内容自动调整按钮、标签、单行文本
Fill container填充容器填满父容器剩余空间列表项、卡片内容、输入框
1
设置 Hug：选中子元素，宽/高中选择 Hug content。按钮随文字长度自动调整宽度。✅验证通过
2
设置 Fill：选中子元素，选择 Fill container。元素填满父容器剩余空间。✅验证通过
3
混合使用：同一布局中可以混合三种模式。如水平布局中，左侧图标 Fixed，中间文本 Fill，右侧箭头 Hug。✅验证通过

五、自动布局与约束

1
约束优先级：自动布局中，子元素的约束会影响其在容器内的对齐方式。✅验证通过
2
布局约束 vs 定位约束：自动布局控制排列顺序和间距，约束控制特定情况下的定位行为。✅验证通过
3
最小/最大尺寸：可以为子元素设置最小宽度和最大宽度，限制自适应范围。这在响应式设计中非常有用。✅验证通过

六、高级技巧

1
绝对定位元素：在自动布局框架内，可以将某个子元素设为绝对定位（右键→Add absolute position），它脱离布局流但仍属于框架。适合徽标、关闭按钮等浮动元素。✅验证通过
2
自动布局动画：在原型模式中，自动布局的变化可以设置动画效果。元素位置变化时平滑过渡。✅验证通过
3
条件布局：结合组件变体，可以创建不同布局状态的组件。如"有图标"和"无图标"两种变体，自动布局自动调整间距。✅验证通过
💡 提示：自动布局是 Figma 最接近代码的功能。理解自动布局意味着你同时理解了 CSS Flexbox，这对设计和开发的沟通协作非常有帮助。

七、实战：创建完整组件

1
按钮组件：矩形+文字，水平自动布局，Gap:8，Padding:12×24，Hug宽度。✅验证通过
2
列表项组件：框架+图标+文字+箭头，水平自动布局，Fill宽度，垂直居中。✅验证通过
3
导航栏组件：框架+Logo+多个链接+按钮，水平自动布局，Space Between，Fill宽度。✅验证通过
4
卡片组件：垂直自动布局，嵌套水平自动布局的标签行和按钮行，图片 Fill 宽度。✅验证通过

🎯 练习

  1. 用自动布局创建3种尺寸的按钮组件
  2. 创建包含图片、标题、描述和按钮的卡片
  3. 实现嵌套自动布局的导航栏
  4. 用 Fill 和 Hug 创建自适应列表项
  5. 创建一个包含绝对定位徽标的组件
📦
自动布局专家

完成本课学习，你已经掌握了自动布局的核心技能！

七、延伸阅读与资源

📚 推荐学习资源

🔑 关键快捷键回顾

操作MacWindows
编组⌘+GCtrl+G
取消编组⌘+⇧+GCtrl+Shift+G
创建组件⌥+⌘+KCtrl+Alt+K
自动布局⇧+AShift+A
复制⌘+DCtrl+D

💡 自动布局常见问题 FAQ