Figma 自动布局从入门到实战：3 个例子做出可复用组件

你将学到什么

Auto Layout 的价值是「让组件会自己排版」：文字变长按钮不炸、卡片内容增减不乱、列表和栅格能自适应。下面用 3 个例子，从 0 到可复用组件。

准备：新建框架与基础设置（1 分钟）

1）新建一个 Frame（F 键），比如 1440×900。
2）打开右侧属性面板，确保你能看到 Auto Layout、Constraints、Fill container 等选项。
3）建议开启「像素预览」与「对齐到像素」，减少导出偏差。

例子 1：做一个“不会炸”的按钮组件（最常用）

目标：按钮文字变长/变短，左右内边距保持一致，按钮高度稳定。

步骤：

1）输入一段文字，例如「立即报名」。
2）选中文字，按 Shift + A（Add Auto Layout）。此时文字外面会出现一个带 padding 的容器。
3）在 Auto Layout 面板设置：
- Direction：Horizontal（横向）
- Spacing between items：8（如果只有文字可为 0）
- Padding：左右 16，上下 10（按你的设计规范）

4）把容器圆角设为 10，填充背景色（例如 #111）。文字设为白色。
5）关键设置：将容器的 Width 设为 Hug contents，Height 也设为 Hug contents。这样文字改动时按钮自动扩张。

常见坑：

- 文字外层没加 Auto Layout：会导致你只能手动拉宽按钮。
- Padding 不统一：不同按钮看起来像不同系统。建议把 padding 作为组件属性统一。

例子 2：做一张“可增减内容”的信息卡片（响应式卡片）

目标：卡片里有标题、描述、按钮；描述多一行时，卡片高度自动变高，布局不乱。

步骤：

1）新建一个矩形作为卡片背景（或直接用 Frame）。选中它，按 Shift + A 变成 Auto Layout 容器。
2）设置 Auto Layout：Direction 选 Vertical（纵向），Spacing 设为 12，Padding 设为 16。
3）在容器内依次放入：
- 标题 Text（例如「活动详情」）
- 描述 Text（两三行说明文字）
- 例子 1 做好的按钮

4）给卡片容器设置：Width = Fixed（例如 360），Height = Hug contents。
5）选中描述文本：将文本框宽度设为 Fill container（或确保文本宽度跟随容器），这样换行时高度增长、宽度稳定。
6）如果你想按钮靠右：给按钮外面再包一层横向 Auto Layout 容器，并设置 Justification 为 Space between 或右对齐（Align right）。

常见坑：

- 卡片 Height 设成 Fixed：内容增多会溢出或被裁切。
- 描述文本没设 Fill：导致文本框宽度不跟随容器，换行表现怪。

例子 3：做一个“左右自适应”的顶部导航（横向布局）

目标：左侧 Logo 固定，右侧菜单/按钮自动靠右；窗口变宽时中间留白自然增长。

步骤：

1）新建一个横向 Auto Layout 容器（Frame + Shift+A），高度 64，宽度先设 1200。
2）设置 Direction：Horizontal；Padding：左右 24，上下 12；Spacing：16。
3）放入 3 块：
- 左：Logo（图形或文字）
- 中：空白占位（可以是一个透明 Frame）
- 右：菜单项（或一个按钮组）

4）把「中间占位」的 Width 设为 Fill container（关键）。这样它会吃掉剩余空间，把右侧顶到最右。
5）把整个导航容器 Width 设为 Fill container（如果在上级 Frame 中），或在 Constraints 中设为 Left & Right。

常见坑：

- 用手动对齐而不是 Fill：一改宽度就全乱。
- 右侧按钮没打组：间距不好统一。建议右侧也用 Auto Layout 管理。

组件化与复用：把例子 1/2 变成真正的组件

1）选中按钮/卡片，点击 Create component（Ctrl+Alt+K / ⌥⌘K）。
2）为按钮增加 Variants：Default / Hover / Disabled；用属性控制图标是否显示。
3）为卡片增加可选区域：比如「标签」「角标」可以用布尔属性开关显示。
4）给组件命名清晰：Button/Primary、Card/Info 等，便于团队检索。