你将做出什么
这篇教程带你在 Figma 里从 0 做一个「可复用按钮系统」：统一按钮尺寸与内边距（Auto Layout）、管理多状态（组件变体/属性）、以及用变量（Tokens）实现一处改动全局更新。做完后，你可以把它直接用于项目，或作为团队 Design System 的起点。
准备工作（3 分钟）
- 打开任意 Figma 文件，新建一个页面：Button System。
- 准备 3 个颜色 Token（也可以后面再补）：Primary / Neutral / Danger。
- 约定按钮字体与字号（示例）：14px，Medium（或 500）。
建议先写下你们团队常用的按钮规格：S/M/L 三档高度，左右 padding 固定，圆角固定（例如 8）。
步骤 1：用 Auto Layout 做出「一颗标准按钮」
- 新建一个 Frame，命名 Button/ 。
- 按 Shift + A 给它添加 Auto Layout。
- Auto Layout 设置建议：
- 方向：Horizontal
- Spacing：8（图标与文字间距）
- Padding：左右 16，上下 10（先按 M 号做）
- Alignment：Center
- 放入一个文本层：Label（例如“按钮”）。
关键点：按钮尺寸不要手拉宽高，而是让内容 + padding 决定尺寸；这样文字改动、语言切换、加图标都不会破版。
步骤 2：把按钮做成组件，并拆出可控属性
- 选中 Button/ ，按 Ctrl/⌘ + Alt + K（Create component）。
- 在组件里把文本层命名为 Label，以后外部实例就能直接改文案。
- 如果需要图标：在文本左侧放一个 Icon（可以用任意 16px 矢量），并把它包进一个 Frame 命名 Icon。
建议先做两个版本：有图标 / 无图标。下一步用变体统一管理。
步骤 3：用组件变体管理状态（默认/悬停/按下/禁用）
- 选中组件，点击右侧 Combine as variants。
- 创建属性：State，值分别为 Default / Hover / Pressed / Disabled。
- 每个 State 里只改「必要的外观」：
- Default：主色填充 + 白字
- Hover：主色加深一点（或加 4% 黑叠层）
- Pressed：更深一点 + 可加 1px 内阴影
- Disabled：降低不透明度（例如 40%）并关闭交互提示
小技巧：不要在不同状态里改尺寸、padding、圆角等结构性参数；否则组件会在切状态时“跳动”。
步骤 4：扩展三种尺寸（S/M/L），避免到处复制
- 新增属性：Size，值：S / M / L。
- 对每个 Size 调整 Auto Layout 的上下 padding（高度由 padding 决定）：
- S：左右 12，上下 8（更紧凑）
- M：左右 16，上下 10（默认）
- L：左右 20，上下 12（更大）
- 如果需要固定高度：也可以用 Min height 约束，但优先用 padding 控制视觉节奏。
步骤 5：加入「类型」：Primary / Secondary / Ghost / Danger
- 新增属性：Type，值：Primary / Secondary / Ghost / Danger。
- 只在 Type 上区分：填充、描边、文字颜色、hover 逻辑。
- 示例规则：
- Primary：实心主色
- Secondary：浅底 + 描边
- Ghost：透明底 + 仅文字，Hover 时加浅底
- Danger：危险色（用于删除等）
到这里你的变体数量会变多（Type × Size × State）。建议先把最常用组合做全，再逐步补齐。
步骤 6：用变量（Tokens）让它“一处改动全局更新”
- 在 Variables 里创建颜色变量（例如：color/primary/500、color/neutral/100、color/danger/500）。
- 把按钮填充、描边、文字颜色绑定到变量，而不是写死颜色。
- 未来做深色模式/品牌换肤，只要改变量或切模式即可。
实用建议：先把 Primary 与 Neutral 两套跑通，再扩展 Danger；不要一上来做几十个 Token，容易半途而废。
检查清单（发布到团队前必看）
- 切换 State 时按钮不跳动（尺寸/圆角一致）
- Label 文案变长不会撑爆（Auto Layout 正常）
- 有图标/无图标都对齐，间距统一
- 禁用态对比度足够但不抢眼
- 颜色来源于变量（便于换肤与维护）
常见坑与修复
- 按钮宽高被手动改过：把固定宽高清掉，改用 Auto Layout + padding 控制。
- Hover/Pressed 颜色不好把握：先用同色加 4%~8% 黑叠层，或用同一色阶系统（500/600/700）。
- 变体太多难管理：先保留 Type=Primary/Secondary、Size=M、State=Default/Hover/Disabled 的核心组合，跑通后再补齐。
你可以立刻怎么用
把这个按钮组件发布到团队 Library，然后在项目里统一替换“手搓按钮”。当产品提出“按钮圆角从 8 改 10、主色稍微亮一点”时，你会第一次体会到组件系统的快乐：改一次，全局生效。
