适用场景：为什么要把按钮“做成体系”
当项目里按钮越来越多（主按钮/次按钮/幽灵按钮、不同尺寸、禁用与加载态），如果只靠复制粘贴，很快就会出现：间距不一致、文字不居中、改样式要改几十处。下面用一套可直接复用的方式，在 Figma 里把按钮做成可维护的组件库。
准备工作：先定 3 个维度（避免变体爆炸）
建议先把按钮拆成 3 个最常见维度：
- Type（类型）：Primary / Secondary / Ghost
- Size（尺寸）：S / M / L
- State（状态）：Default / Hover / Disabled / Loading
命名建议（后面做 Variants 时会用到）：Type=Primary, Size=M, State=Default。维度先少后多，能覆盖 80% 场景就先发布第一版。
第 1 步：用 Auto Layout 做“会长大”的按钮骨架
- 新建一个 Frame，放入文字层（例如“确认”）。
- 选中 Frame，按 Shift + A 开启 Auto Layout。
- 设置 Padding（例如：左右 16、上下 10），Gap 设为 8（给图标预留）。
- 对文字层：设置 Hug contents；对外层按钮 Frame：保持 Hug contents，这样按钮会随文案自适应。
小技巧：如果按钮需要固定高度（例如 40px），可以把外层高度设为固定值，并把对齐设为居中，避免不同字号导致上下偏移。
第 2 步：加入可选图标与加载态（不破坏排版）
- 在文字左侧放一个 Icon 容器（可以是 16x16 的 Frame 或图标组件）。
- 把 Icon 容器默认设为“隐藏”（眼睛图标关闭），但仍保留在 Auto Layout 结构里。
- 加载态建议用一个小圆形/转圈图标占位，同样放在 Icon 容器里，通过状态切换显示不同内容。
这样做的好处是：开启图标或加载态时，按钮仍然按同一套间距规则排版，不会出现“图标挤压文字”或“间距跳动”。
第 3 步：做成 Component，并用 Variants 管理不同样式
- 选中按钮外层 Frame，按 Ctrl/Cmd + Alt + K 创建 Component。
- 复制出 2-3 个版本，分别设置不同类型（Primary/Secondary/Ghost）的填充、描边、文字颜色。
- 把这些组件合并为 Variants（右侧面板：Combine as variants）。
- 为 Variants 设置属性：Type、Size、State。按属性组合来命名变体。
尺寸（Size）做法：对不同尺寸版本，只改 Padding/字号/圆角（例如 S=8px 圆角、M=10px、L=12px），而不是重新画一套。
第 4 步：用交互（Prototype）快速验证 Hover/Pressed
- 在组件集（Variants）里，选择 Default 状态变体。
- 切到 Prototype：添加 While hovering → Change to → Hover。
- 添加 While pressing → Change to → Pressed（如果你有 Pressed 状态）。
- Disabled 状态一般不需要交互，确保视觉对比与可读性即可。
注意：交互是写在组件内部的，外部引用会继承。先在组件集里验证一遍，再投入页面使用。
常见问题排查（做完发现不对，就按这里查）
- 文字不居中/上下偏：检查外层是否是固定高度；对齐是否是 Center；文字行高是否异常（建议用与字号匹配的行高）。
- 开/关图标导致按钮宽度跳动：确保图标容器始终存在于 Auto Layout 中，只切换可见性；不要临时插入新图层。
- Variants 太多，切换困难：先合并属性，把稀有状态（比如 Danger、Success）拆到第二套组件，或用单独的 Type 组。
- 组件被覆盖后“改不回去”：检查是否对实例做了样式覆盖；必要时使用 Reset instance overrides。
提效建议：让团队更好用（可选但强烈推荐）
- 属性命名统一：Type/Size/State 用固定英文，避免出现 Type=primary、Type=Primary 两套。
- 写一条使用规则：比如“页面只用组件按钮，不允许手动画按钮”；减少样式漂移。
- 建立按钮规范页：把按钮的间距、尺寸、最小可点击区域（建议≥40px）写清楚，后续新增变体有依据。
结语：先发布 1.0，再迭代
按钮组件库的关键不是“一次做完所有状态”，而是先把结构（Auto Layout）和管理方式（Variants + 命名规则）定下来。你可以先发布 Type×Size 的基础版本，后续再逐步补齐状态与特殊类型。
