你将完成什么
跟着本文操作，你会在 Figma 里从 0 搭出一套「可复用、可扩展」的按钮组件：支持尺寸（S/M/L）、类型（Primary/Secondary/Ghost）、状态（Default/Hover/Pressed/Disabled）等组合，并且能在组件面板里用属性快速切换。
适用场景：海报/活动页/后台系统/APP UI 的按钮统一规范；团队协作需要可维护的组件库。
准备工作（先把基础规则定下来）
在开始画之前，先约定 4 件事，后面会省很多返工：
- 字体与字号：例如 14/16/18（对应 S/M/L）。
- 左右内边距：例如 S=12、M=16、L=20（单位 px）。
- 高度：例如 S=32、M=40、L=48（单位 px）。
- 圆角：例如 8（或按你的设计系统定义）。
建议把这些数值写在页面角落当「临时规范」，做好后再迁移到正式文档。
Step 1：用 Auto Layout 做出“一个最小可用按钮”
- 新建一个 Frame（快捷键 F），命名为 Button/ 。
- 在 Frame 里输入文字层（例如“按钮”）。
- 选中 Frame，按 Shift + A 开启 Auto Layout。
- Auto Layout 设置：方向 Horizontal；Spacing=8（图标与文字间距）；Padding 左右=16、上下=0（或按你的规范）。
- 给 Frame 设置高度（例如 40），并将对齐设为 Center（保证文字垂直居中）。
此时你已经得到一个可以随文字长度自动伸缩的按钮外壳。
Step 2：补上图标位（可选，但推荐预留）
组件里常见两种按钮：纯文字 / 左图标+文字。建议预先加一个图标容器，后续用布尔属性开关显示。
- 在文字左侧放一个 16x16 的占位（可以是一个 Frame 或简单图形）。
- 保持它与文字同一层级，确认 Auto Layout 的间距依旧为 8。
- 将图标占位命名为 Icon，文字命名为 Label。
Step 3：把 变成组件（Component）
- 选中 Button/ ，按 Ctrl + Alt + K（Mac：Cmd + Option + K）创建组件。
- 把组件重命名为 Button。
建议把组件放在单独页面（例如 Components）里，避免被业务页面误删。
Step 4：用 Variants 建立“状态”（Default/Hover/Pressed/Disabled）
- 选中 Button 组件，右侧点击 Add variant（添加变体）。
- 创建 4 个变体，分别设置不同样式：
- Default：正常背景/描边/文字色。
- Hover：背景略深或加高亮（不要改变布局）。
- Pressed：更深背景或轻微下压（可用阴影变化模拟）。
- Disabled：降低对比度，并确保可访问性（不要只靠颜色，必要时加透明度+描边策略）。
关键点：状态只改“视觉”，不要改尺寸与内边距，否则组件切换时会跳动。
Step 5：用 Variants 建立“类型”（Primary/Secondary/Ghost）
继续在同一组 Variants 里添加属性，而不是创建新的组件。
- 在右侧 Variant 属性面板里，把属性命名为 Type。
- 设置三种类型：
- Primary：实心背景，文字为白色或高对比色。
- Secondary：浅背景或描边，文字为主色。
- Ghost：透明背景，仅文字/描边，适合次要动作。
建议把颜色变量（例如 Primary/Primary-600）接到样式库里，后续换主题更轻松。
Step 6：用 Variants 建立“尺寸”（S/M/L）
- 新增属性命名为 Size。
- 为 S/M/L 设置：
- S：高度 32；字号 14；左右 padding 12。
- M：高度 40；字号 16；左右 padding 16。
- L：高度 48；字号 18；左右 padding 20。
如果你的产品对齐 8px 栅格，padding 与高度尽量也落在 8 的倍数上。
Step 7：加入“是否有图标”的布尔属性
- 选中 Icon 层，在右侧把它设置为 Component property（布尔开关）。
- 属性命名为 Has icon，默认开启或关闭都可以，但要保持一致。
当 Has icon 关闭时，Icon 隐藏，Auto Layout 会自动收起间距，按钮宽度依旧自适应。
推荐的命名与属性规范（减少团队踩坑）
- Variant 属性名建议统一英文：Type / Size / State / Has icon。
- 属性值用首字母大写：Primary, Secondary, Ghost；S, M, L；Default, Hover, Pressed, Disabled。
- 不要用 1/2/3 这种数字当属性值，后期维护很痛苦。
交付检查清单（发布前自检 30 秒）
- 切换任意 Type/Size/State 时，按钮不应出现尺寸跳动。
- Label 文本变长时，按钮横向自适应且不会挤压高度。
- Disabled 的对比度仍能识别（至少满足基本可读性）。
- 组件暴露的属性清晰可读，团队成员能快速找到想要的组合。
常见问题（快速排错）
1）为什么切换状态按钮会“抖动”？
多数是某个变体的 padding/高度不一致。把所有变体的 Auto Layout 与尺寸参数统一。
2）为什么文字不垂直居中？
检查：Frame 高度是否固定；对齐是否 Center；文字层是否有不一致的 line-height。
3）图标开关后间距不对？
确保 Icon 与 Label 是同一 Auto Layout 容器内，并且 Icon 隐藏时不会留下空白层。
