这篇教程的目标，是在 30-60 分钟内用 Figma 搭出一套“可复制到任何项目”的按钮组件：支持尺寸、层级、状态、左/右图标、加载态，并且命名清晰、后期好维护。
在开始画之前，先把按钮的可变维度写清楚。推荐最小可用集合：
1）尺寸 Size：S / M / L（比如高度 32 / 40 / 48）
2）层级 Hierarchy：Primary / Secondary / Tertiary
3）状态 State：Default / Hover / Pressed / Disabled
4）图标 Icon：None / Leading / Trailing
5）Loading：On / Off
有了这些维度，后面的“变体矩阵”才不会爆炸式增长。
1）新建一个 Frame（快捷键 F），放入一段文字（T），内容写“按钮”。
2）选中文本，按 Shift + A 创建 Auto Layout。
3）在右侧 Auto Layout 设置：
- Padding：左右 16，上下 10（后续不同尺寸再做变体）
- Spacing：8（用于图标与文字间距）
- Alignment：居中
4）给容器加圆角（比如 8），并设置填充颜色（先做 Primary）。
1）把按钮做成组件：Cmd/Ctrl + Alt + K。
2）在组件内部选中文本层，在右侧把文本内容暴露为 Text property（文本属性）。
这样之后使用者就能直接改按钮文案，不需要进组件内部。
1）在 Auto Layout 内部，文本左侧插入一个 16x16 的图标占位（可以用简单的矢量或任意 Icon）。
2）把图标层命名为：Icon/Leading。
3）在右侧把这个图标层暴露为 Boolean property（开关属性），命名：Leading icon。
4）复制一份图标到文本右侧，命名：Icon/Trailing，同样暴露 Boolean property：Trailing icon。
提示：图标隐藏时，Auto Layout 会自动回收空间，按钮宽度不会乱。
1）先做“尺寸”：复制组件，调整 Padding/字体大小/高度，分别得到 S/M/L 三个版本。
2）选中三份组件，右键 Combine as variants（合并为变体）。
3）在变体属性里创建并命名：
- Size = S | M | L
4）基于同一套尺寸，再做层级 Hierarchy：Primary / Secondary / Tertiary。
做法：复制变体并修改样式（例如 Secondary 用描边、Tertiary 用文字按钮）。
5）最后做状态 State：Default / Hover / Pressed / Disabled。
做法：每个层级下复制状态，按常见交互调整颜色/透明度/描边。
建议用一个布尔属性 Loading 来控制：
1）在按钮内放一个 16x16 的 loading 图标（可以是圆形描边）。
2）把文字层设置为在 Loading=On 时隐藏（Boolean property 控制 Visible）。
3）同时把 Loading 图标设置为 Loading=Off 时隐藏。
这样你不会因为“文案 + loading 同时出现”而反复调间距。
组件名建议：
Button
变体属性建议固定顺序（方便团队沟通）：
Hierarchy / Size / State / Leading icon / Trailing icon / Loading
例如一个实例：
Hierarchy=Primary, Size=M, State=Default, Leading icon=false, Trailing icon=true, Loading=false
1）按钮高度不统一：检查不同 Size 的 Padding 是否一致，以及字体行高是否被改动。
2）图标开关后间距怪：确保图标与文字都在同一个 Auto Layout 内，Spacing 统一设置为 8。
3）Disabled 看不出层级：Primary/Secondary/Tertiary 的 Disabled 建议使用不同的对比度策略（Primary 降低填充，Secondary 降低描边，Tertiary 降低文字）。
4）变体太多：把不必要的维度从变体里移出，用属性（Boolean/Text）替代，例如 Icon/Loading 用属性而不是单独变体。
如果你有团队文件，建议把 Button 组件放到单独的 Library 页面，并在页面顶部写一段“使用说明”（什么时候用 Primary/Secondary/Tertiary，禁用态怎么用）。
到这里，一套可复用、可扩展的按钮系统就完成了。
