你将做出什么
这篇教程带你在 Figma 里用Auto Layout（自动布局）做一个真正可复用的按钮组件：支持不同尺寸（S/M/L）、不同状态（默认/悬停/按下/禁用）、可选图标、文案自适应，并且在组件被拉伸或文案变长时不崩。
准备：先把按钮规则写清楚
建议在动手前先定一套最小规范，后面做变体会省一半时间：
- 尺寸：S/M/L（高度建议 32/40/48）。
- 左右内边距：S=12，M=16，L=20（图标按钮可略减 2）。
- 上下内边距：S=8，M=10，L=12。
- 圆角：8（或跟设计系统一致）。
- 文本：S=12，M=14，L=16（与高度对应）。
- 图标与文字间距：8。
- 最小宽度：建议设 Min width（例如 88），避免短文案太“瘦”。
步骤 1：用 Frame 做按钮根节点，并开启 Auto Layout
- 新建一个 Frame（不要用 Rectangle 当根节点）。
- 右侧面板开启 Auto Layout，方向选择水平。
- Padding 先按 M 档：左右 16、上下 10。
- Item spacing 设 8（给图标预留）。
- 对齐方式：垂直居中；内容建议水平居中。
现在你得到的是一个“会自动包住内容”的容器，这就是按钮组件最关键的基础。
步骤 2：加入文字层，让文案自适应
- 在按钮 Frame 里放一个 Text，例如“确认”。
- Text 的 Resizing 设为Hug contents（自动适应内容）。
- 按钮 Frame 的 Resizing 也保持 Hug contents，先别急着做固定宽度。
测试：把文字改成“立即下载并保存”，按钮应该自动变宽，padding 保持不变。
步骤 3：加入可选图标位，避免开关图标时布局跳动
常见坑：有图标/无图标两种按钮切换时，文本会偏移。推荐做法是把图标当成独立层，并用组件属性控制显示。
- 在文本左侧放一个 16x16 的 Icon（矢量或图标组件都可）。
- Icon 的 Resizing 设为 Fixed，确保尺寸稳定。
- Auto Layout 顺序保持：Icon → Text。
- 暂时不要删除图标层；后面用 Boolean 属性控制显隐。
步骤 4：做尺寸变体（S/M/L），让高度“由规则长出来”
尺寸主要影响 padding、字体（以及可能的圆角）。尽量避免用拖拽去拉固定高度，那会让维护变体非常痛苦。
- 把当前按钮做成组件（Create component）。
- 复制两份得到三枚按钮，分别调整为 S/M/L 的 padding 与字体。
- 选中三枚组件，Combine as variants。
- 新增变体属性：Size = S / M / L。
- 逐个确认：文字 Hug、容器 Hug、间距一致。
步骤 5：做状态变体（Default/Hover/Pressed/Disabled）
状态建议只改颜色/阴影，不要改 padding 或间距，否则交互时会“抖”。
- 在变体集中新增：State = Default / Hover / Pressed / Disabled。
- Default：基础填充色 + 正常文字颜色。
- Hover：提高对比（例如略加深背景或提高描边对比）。
- Pressed：进一步加深；阴影可减小 y 值，表现“按下去”。
- Disabled：降低不透明度，并降低文字对比。
建议把颜色抽成 Color Styles，后期换主题/统一调整更轻松。
步骤 6：用组件属性控制“是否显示图标”
- 选中 Icon 图层。
- 在右侧创建组件属性：Boolean，例如 Icon。
- Icon=true 显示图标；Icon=false 隐藏图标。
因为是 Auto Layout，隐藏图标后间距会自动收缩，按钮仍然保持居中，文案不会偏。
步骤 7：让按钮支持“横向填充”，同时保证文字不被挤坏
真实页面里按钮经常需要与网格对齐或铺满容器。你可以这样做：
- 把按钮实例放进父级容器（例如一行表单的右侧）。
- 将按钮实例的 Resizing 设为Fill container（横向填充）。
- 按钮内部文字保持 Hug contents，并将内容对齐设为居中（或两端）。
如果出现文本被挤压换行/截断：检查 Text 是否是 Auto height，检查按钮是否开启了 Wrap（除非你真的需要多行按钮）。
常见问题快速排查
- 文本不是 Hug contents：会导致按钮宽度异常或出现空白。
- 根节点不是 Frame：Auto Layout 行为不稳定。
- 状态变体改了 padding/间距：交互时会“跳”。
- 用删除图标来做无图标版本：后续属性会难以维护。
- 颜色没抽成 Styles：后期统一改色会非常费力。
加分项：让按钮更像“设计系统组件”
如果你需要更完善的组件库，可以继续扩展：
- 增加 Type 属性：Primary/Secondary/Ghost（样式体系更完整）。
- 增加左右图标：IconLeft/IconRight（更贴近实际业务）。
- 增加 Loading 状态：用旋转图标 + 禁用交互样式。
- 把圆角、阴影、文字样式全部抽为 Styles。
做到这一步，你的按钮组件基本能覆盖大多数产品界面需求。
