你将得到什么
本教程用一套“最小但够用”的结构，教你在 Figma 里做一个按钮组件：类型（主/次/文字）、尺寸（S/M/L）、状态（默认/悬停/按下/禁用）、以及“加载中”样式。做完后，你只需要在右侧属性面板点选，就能快速切换所有组合，不用复制粘贴。
准备：建立按钮的基础样式（Auto Layout）
- 新建一个 Frame，里面放一个 Text（例如：按钮）。
- 选中 Frame，开启 Auto Layout（Shift + A）。方向选 Horizontal。
- 设置内边距：左右 16，上下 10；间距（Spacing）8。
- 设置圆角（例如 8）；描边/填充先随便给一个明显的颜色，便于观察。
- 文字样式建议：14/20，Medium；文字颜色先设白色。
做“尺寸”变体：S / M / L
- 复制这个按钮 2 份，得到三份按钮。
- 分别调整 Auto Layout 的 padding：
S：左右 12，上下 8；M：左右 16，上下 10；L：左右 20，上下 12。
- 文字大小也可跟随变化（可选）：S=12，M=14，L=16。
做“类型”变体：Primary / Secondary / Text
- Primary：填充用品牌色（如 #2F6BFF），文字白色，描边无。
- Secondary：填充白/透明，描边 1px 品牌色，文字品牌色。
- Text：无填充无描边，文字品牌色；padding 可略小一点（但建议仍保留可点击面积）。
提示：先只把“视觉差异”做出来，不要急着做状态。先把结构搭对，后面组合会更顺。
把它变成组件并组合变体（Variants）
- 选中三个尺寸按钮（S/M/L），右键 Create component。
- 在右侧点 Add variant，把三份合并成一组 Variants。
- 给属性命名：
size = S / M / L
- 再复制这组三个按钮两组，分别做成 Secondary 和 Text 的视觉样式。
- 把三组（Primary/Secondary/Text）也合并进同一组 Variants，并新增属性：
type = Primary / Secondary / Text
做“状态”变体：Default / Hover / Pressed / Disabled
- 在同一组 Variants 中，为每个 type+size 再复制出 3 个状态（建议用批量复制再改样式）。
- 新增属性：state = Default / Hover / Pressed / Disabled
- 样式建议（按你的品牌微调）：
Hover：填充变亮一点或加 8% 黑色遮罩；Pressed：更深；Disabled：降低不透明度（例如 40%）并把鼠标指针交互交给开发处理。
做“加载中”样式：加一个可选的 Leading Icon
- 在 Auto Layout 的内容区域，文字左侧放一个 12x12 的小圆（或使用图标/Spinner）。
- 把这个图标包进一个 Frame，命名为 icon，并设置为固定宽高。
- 新增属性：loading = On / Off
- loading=Off：隐藏 icon；loading=On：显示 icon，并把按钮文案改成“加载中”（或保持原文案也行）。
交付给开发时怎么标注更省事
- 把颜色、字号、圆角都改成 Styles（Color styles / Text styles），开发能更快对齐设计系统。
- 在组件说明里写清楚属性含义：type/size/state/loading 的取值范围。
- 如果你们有多语言，建议把按钮文案留给实例层（不要写死在组件里）。
常见坑（避雷）
- 不要用“拉伸宽度”把按钮撑开：按钮通常应该由内容决定宽度，除非是表单里的全宽按钮。
- Disabled 不要只改透明度：Secondary/Text 可能还需要改描边/文字颜色，保证可读性。
- 变体属性命名尽量短且一致：type/size/state/loading 这种就很好。
