适合谁看
想把 Figma 文件做得更“像组件库”的同学：按钮要能一键切换尺寸/状态/主题色，还要保证文字长度变化时不崩版。
开始前准备（1 分钟）
- 建立 1 个按钮的基础视觉规范：高度、圆角、描边、阴影、字号、左右内边距。
- 至少准备 2 个尺寸（S/M）和 2 个风格（Primary/Secondary）作为变体样例。
Step 1：做“基础按钮”骨架（Auto Layout）
- 新建 Frame，放入文字层（Text）。
- 给 Frame 开启 Auto Layout（水平），设置左右/上下 Padding（例如 16/10）。
- 设置 Item spacing（例如 8），对齐方式选择 Center。
- 给 Frame 命名：Button。
这样文字长度变动时，按钮会自动撑开，不需要手动拉宽。
Step 2：把约束写清楚（避免“组件一用就乱”）
- 文字层：水平居中对齐，确保不会被拉伸变形。
- 按钮容器：宽度由内容决定（Hug contents），高度固定或由 padding 控制。
- 图标场景：预留左/右 icon 的占位（可用布尔属性控制显示）。
Step 3：做 Variants（尺寸/样式/状态）
把基础按钮 Create component 后，使用 Combine as variants 建立这些维度：
- size：S / M / L（对应不同高度与 padding）
- type：primary / secondary / ghost
- state：default / hover / disabled
命名建议：Button / size=S, type=primary, state=default，团队协作时最不容易误解。
Step 4：用 Component Properties 提升可用性
- 把文字层设为 Text property，使用者在右侧面板就能改文案。
- 图标做成可切换的 Boolean property（iconLeft/iconRight）。
- 颜色不要手填，用 Color Styles（例如 Brand/Primary）统一管理。
交付建议：给出“使用说明”
- 在组件页写 3 条规则：何时用 primary/secondary；禁用态怎么用；不要直接拆解组件。
- 给出推荐字号/行高，避免按钮里出现 12px + 28px 的混搭。
常见坑（做完自检）
- 变体切换后 padding 变化导致文字不居中：检查 Auto Layout 对齐和文字层约束。
- disabled 仅调透明度：建议同步调整文字色/背景色对比度，保证可读性。
- 颜色未绑定样式：后期改品牌色会非常痛苦。
按这套方式做完，你的按钮就能在“改字、换尺寸、切状态”时保持稳定，同时也更适合扩展成完整的 Design System。
