你将做出什么
目标：在 Figma 里做一套“可交付”的按钮组件（Primary/Secondary、不同尺寸、不同状态），并用 Variables 让主题色一键切换。做完后，你可以把它当作项目的按钮基座，团队直接拖拽复用。
准备工作（3分钟）
文件结构建议：新建 1 个页面：Components；再建 1 个页面：Playground（用于测试）。
按钮最小规格：圆角、内边距、文字样式、图标间距、按钮高度（通过 padding + font 共同决定）。
第1步：先做“基础按钮”Frame（Auto Layout）
- 创建一个 Frame（快捷键 F），命名为 Button/ 。
- 开启 Auto Layout（Shift + A），方向水平，水平/垂直居中。
- 设置 Padding（例如：左右 16，上下 10），Item spacing 8。
- 放入 1 个 Text：例如“按钮”。文字样式建议做成 Text Style（如 Body/14/Medium）。
- 把宽度设为 Hug contents，高度 Hug contents；这样内容变化时按钮会自适应。
提示：先把“结构”做对，比一上来纠结颜色更重要。
第2步：做尺寸体系（S / M / L）
尺寸不要靠缩放（Scale），而是靠 Auto Layout 的 padding 和文字样式来控制。
- S：左右 12，上下 8；字体 12-13
- M：左右 16，上下 10；字体 14
- L：左右 20，上下 12；字体 16
做法：复制 Button/ 三份，分别命名为 Button/Size=S、Button/Size=M、Button/Size=L，分别调整 padding 与字体样式。
第3步：建立 Variants（类型 + 状态）
选中某一个尺寸（建议先用 M），点击右侧 Create component，再点 Add variant。
推荐两个维度的属性：
- type：primary / secondary / ghost
- state：default / hover / disabled
这样你可以得到 3×3 的组合。先把 primary 的 3 个状态做完，再复制改 secondary/ghost。
第4步：用 Variables 管颜色（让主题可切换）
在右侧 Variables 面板创建一个 Collection（如：Theme）。建议最少创建这些变量（示例命名）：
color/bg/primary
color/bg/primaryHover
color/bg/disabled
color/text/onPrimary
color/text/default
color/border/default
把按钮的 Fill/Stroke/Text color 绑定到变量，而不是写死颜色。之后新增主题（例如 Light/Dark 或 品牌A/品牌B）时，只需要改变量值。
第5步：补齐交互细节（建议清单）
- 禁用态：降低对比度 + 取消阴影/描边强调，鼠标样式可在交付规范里说明
- Hover：仅改变背景或描边，不要同时改太多属性，避免“抖动感”
- 图标按钮：在文字左侧加 Icon（16px），保持与文字间距一致
- 长文本：仍保持 Hug contents；如需要固定宽度，额外提供一个“block”变体
第6步：在 Playground 页面验证（5分钟）
- 拖拽组件到 Playground。
- 切换 size/type/state，观察按钮高度、左右留白、文字是否居中。
- 切换 Variables 的 Mode（主题），确认颜色联动正确。
- 用不同文案（2字/6字/12字）测试 Hug 是否合理。
交付给开发/团队时怎么写规范
建议给按钮组件配一段简短规范（放在组件旁边即可）：
- 尺寸：S/M/L 对应的 padding 与字体
- 状态：default/hover/disabled 的视觉差异说明
- 颜色：由 Variables 控制，开发侧对应 token 名称
- 使用建议：同一页面避免混用过多 type；主按钮优先 primary
到这里，你已经有了一套结构清晰、可扩展、可交付的按钮组件。之后再扩展输入框、标签、开关等基础组件，会非常顺手。
