Figma 自动布局实战：用 Auto Layout 做出可复用的按钮与表单组件

你将得到什么

做完本教程，你会得到一套可复用、可伸缩、可换主题的按钮与表单组件结构：文本多一行不炸、图标加减不乱、宽度随容器变化、间距统一可控。

准备工作（3 分钟）

文件：新建一个 Figma 文件，创建 1 个页面「Components」。

基础样式：先定义 3 个文字样式（14/16/18）和 3 个颜色变量（主色、文本、边框）。如果你暂时不做 Variables，也可以先用本地色板。

命名习惯：按钮用 Button/Primary，输入框用 Field/ ，后续做组件集会更省心。

第一步：做一个“不会崩”的按钮容器

1）画一个矩形作为按钮底（先别管圆角）。

2）在矩形上方放一个文本层，写「按钮」。

3）选中矩形 + 文本，按 Shift + A 开启 Auto Layout。

4）把方向设为横向，间距设为 8，内边距设为 12/16（上下/左右）。

5）把矩形删掉，改用 Auto Layout 容器的填充色和描边来当“按钮底”。这样结构更干净，也更利于换主题。

关键点：按钮宽度建议用 Hug contents（随内容），高度用 Hug；当你需要固定宽按钮（例如表单里的提交按钮），再改为 Fixed 或 Fill。

第二步：加入图标并保证对齐稳定

1）在按钮文本左侧放一个 16x16 的图标（可以用任意 SVG）。

2）确保图标层是固定尺寸（Fixed 16x16），不要 Hug。

3）对齐方式选择垂直居中（Align center）。

4）把图标设置为可选：做成一个组件属性（Boolean）或在组件里预留一个图标插槽。

排坑：如果你发现文本上下跳动，通常是字体行高不一致导致。统一行高（例如 20）会立刻稳定。

第三步：按钮的三种宽度策略（最常用）

A. Hug（内容自适应）：用于工具栏按钮、标签按钮。

B. Fixed（固定宽）：用于列表统一宽度按钮，文本过长要考虑截断或缩小字体。

C. Fill（填充容器）：用于弹窗底部主按钮、移动端全宽按钮。

建议做 1 个组件集（Variants）：尺寸（S/M/L）x 状态（Default/Hover/Disabled）x 类型（Primary/Secondary）。先做最小可用集，后续再扩展。

第四步：做一个可伸缩的输入框 Field

输入框建议拆成 3 层：外容器（负责边框/背景/圆角）+ 内容行（Auto Layout）+ 占位/输入文字（文本层）。

1）画一个容器 Frame，开启 Auto Layout（横向）。

2）设置内边距 12/12，间距 8，背景白色，描边 #DDD，圆角 8。

3）左侧放一个可选图标（16x16），中间放文本层（占位符：请输入）。

4）把中间文本层的宽度设为 Fill container，这样输入框拉宽时文本区域会一起拉伸。

5）如果有右侧清除按钮/提示图标，同样固定 16x16，并保持容器横向居中。

第五步：让 Field 支持“错误态/提示文案”

最推荐的结构：Field（纵向 Auto Layout）= 输入行（横向 Auto Layout） + 帮助文案（文本）。

1）把刚才的输入框整体包一层外 Frame，开启纵向 Auto Layout。

2）下面加一行帮助文案（例如：邮箱格式不正确），默认隐藏。

3）做 Variants：State=Default/Error/Success；错误态时描边变红、帮助文案显示。

技巧：帮助文案建议固定行高并使用较小字号（12-13），避免上下跳动影响布局。

第六步：把按钮放进表单里，验证“整体布局不会散”

1）新建一个表单容器（纵向 Auto Layout），间距 12，宽度设为 360（或任意）。

2）放入 3 个 Field（把 Field 宽度设为 Fill）。

3）底部放一个 Button，把按钮宽度设为 Fill。

4）在其中一个 Field 触发 Error 状态，观察：表单应当只在该 Field 处增加高度，其他控件保持对齐。

常见问题排查（对照做一遍基本能解决 90%）

问题 1：文字换行后按钮高度不对：检查按钮容器是否为 Hug，高度是否被 Fixed 锁死；同时检查文本行高。

问题 2：图标把布局撑开：图标尺寸必须 Fixed；如果图标是矢量组，先 Frame 住再固定。

问题 3：组件在父容器里不跟随拉伸：把需要拉伸的子层设为 Fill container，并确保父容器方向正确（横向/纵向）。

问题 4：变体切换导致间距变化：确保不同变体的 Auto Layout padding/spacing 一致；不要在某个变体里手动挪图层。

收尾：整理为可复用组件集

1）选中 Button 主结构，创建 Component（Ctrl/Cmd + Alt + K）。

2）创建 Variants：Type（Primary/Secondary）、Size（S/M/L）、State（Default/Disabled）。

3）同样把 Field 做成 Component，并加上 State 变体。

4）把所有组件放到「Components」页面，统一命名并补上描述，后续团队协作会非常顺滑。

你可以立刻举一反三的方向

- 用同样结构做：Tag、Chip、Stepper、Modal Footer、Toolbar。

- 把颜色和字号做成 Variables，实现一键换主题。

- 用 Component properties 把图标/右侧按钮做成可配置项，减少变体数量。