你将做出什么
目标：把一个“按钮组件”做成可复用的 Variants（默认 / 悬停 / 按下 / 禁用），并且用属性控制大小、类型、图标、加载态，让团队在右侧面板就能完成组合，而不是到处复制粘贴。
本文按“先规范 → 再结构 → 后交互”的顺序来做，适合从 0 建组件库，或把旧组件迁移到 Variants。
准备：先定 3 条命名与属性规则（最容易踩坑的部分）
在开始画之前，先把规则写清楚，否则做完会发现属性面板混乱、同事不敢用：
- 属性名用英文、值用短词：例如 Type：Primary/Secondary；Size：S/M/L。
- 状态统一叫 State：Default/Hover/Pressed/Disabled。不要混用 Normal/Active 之类的近义词。
- 布尔属性用“有/无”：例如 Icon（Boolean）控制是否显示图标；Loading（Boolean）控制加载态。
如果你们已经有设计系统，属性名尽量对齐现有的 Token（比如颜色、字号、圆角）。
步骤 1：画出基础按钮并建立 Auto Layout
1）画一个按钮容器（建议从一个矩形开始），添加文本。
2）选中容器 + 文本，按 Shift + A 开启 Auto Layout。
3）把 padding 设为：
- 左右 padding：16（M 尺寸常用）
- 上下 padding：10（或 8，看你们规范）
- 间距 gap：8（用于图标和文字）
4）对齐设置：
- 垂直对齐：Center
- 水平对齐：Center（或 Space between 用于两端布局）
5）把按钮容器的宽度设为 Hug contents，高度也设为 Hug。
步骤 2：把按钮做成 Component，并拆出可控的结构
1）选中按钮，按 Ctrl + Alt + K 创建组件（Mac：Cmd + Option + K）。
2）给组件命名（示例）：Button。
3）在组件内部预留 3 个结构层：
- Icon：一个 16x16 的图标占位（可以是矢量或 Frame）
- Label：文字
- Spinner：加载态图标（默认隐藏）
注意：Icon/Spinner 不要用“删除/新增”来实现，而用显隐（这样才能用 Boolean 属性控制）。
步骤 3：创建 Variants（Type / Size / State）
1）选中组件，在右侧点击 Combine as variants（或直接复制组件并用 Variants 合并）。
2）建立 3 个属性：
- Type：Primary、Secondary（控制背景/描边/文字色）
- Size：S、M、L（控制 padding、字号、圆角）
- State：Default、Hover、Pressed、Disabled（控制颜色与透明度）
3）先只做最小闭环：Type=Primary + Size=M + State=Default/Hover/Pressed/Disabled，确保每个状态视觉差异明确。
4）再扩展 Secondary、S/L 尺寸。建议用“先扩 State，再扩 Type，再扩 Size”的顺序，最不容易漏。
步骤 4：把 Icon 与 Loading 做成 Boolean 属性（提高可用性）
1）Icon：
- 选中 Icon 图层，在右侧把图层可见性绑定为 Boolean 属性：Icon
- 默认 Icon=false；当 Icon=true 时，Icon 显示，gap=8 保持
2）Loading：
- Spinner 绑定 Boolean 属性：Loading
- Loading=true 时：Spinner 显示；Label 可以降低透明度或替换为“加载中”
- 同时把 Icon 隐藏（避免三件套挤在一起），这是更常见的交互逻辑
小技巧：如果你希望 Loading 时按钮宽度不跳动，可以用一个不可见的占位文本（或固定最小宽度）。
步骤 5：用 Interactive Variants 做状态预览（交互演示更直观）
1）切到 Prototype 面板，在 Variants 之间建立交互：
- Default → Hover：While hovering
- Hover → Pressed：While pressing
- Pressed → Hover：Mouse up
2）Disabled 不需要交互（保持静态）。
3）在组件集上添加说明（可选）：例如“Hover 只用于演示；真实产品由开发实现”。
检查清单：发布前 30 秒自检
- 属性面板是否只有少量核心属性（Type/Size/State/Icon/Loading）？
- 每个状态是否有明显反馈（颜色/阴影/透明度/描边）？
- Auto Layout 是否 Hug contents，嵌套组件是否不会撑爆？
- 字体样式是否用 Text Styles（便于统一修改）？
- 颜色是否用 Color Styles / Variables（便于主题与暗色扩展）？
常见问题（避免返工）
Q1：Variants 太多怎么办？
A：把不常用的组合拆成独立组件（例如“带图标按钮”作为单独的组件），或者减少属性维度（例如 Size 只保留 S/M/L，不要再加 XS/XL）。
Q2：同事用起来还是乱？
A：把默认值设置为“最常用的组合”，并在组件描述里写清楚使用范围；同时给组件加示例（Playground）页面。
Q3：做完交互后预览不对？
A：检查交互触发条件是否写在正确的 Variant 上；Hover/Pressed 的连接要互相闭环，别漏 Mouse up。
你可以直接复制的组件命名模板
- Button / Type=Primary, Size=M, State=Default
- Button / Type=Primary, Size=M, State=Hover
- Button / Type=Primary, Size=M, State=Pressed
- Button / Type=Primary, Size=M, State=Disabled
按这个模板扩展到 Secondary 和 S/L，你的组件库会非常规整，开发对照也更容易。
