你会得到什么
这篇教程用“能直接照做”的方式，带你在 Figma 里做一套可复用的按钮组件（Button），并用Auto Layout + 组件变量实现尺寸/类型/状态一键切换。做完后你可以把它放进项目的 UI Kit，团队成员直接拖拽使用。
目标：同一个按钮组件，支持 3 个尺寸（S/M/L），3 个类型（Primary/Secondary/Ghost），3 个状态（Default/Hover/Disabled），并且文本自适应、左右 padding 统一、图标可选。
准备：建立基础样式（10 分钟）
- 新建一个 Frame，命名为 UI Kit / Buttons，方便后续管理。
- 在右侧面板创建颜色样式（Color Styles），至少准备：Brand/600（主色）、Neutral/0（白）、Neutral/900（深色文字）、Neutral/200（浅灰边框/禁用）。
- 创建文字样式（Text Styles）：Button/S（12-14px）、Button/M（14-16px）、Button/L（16-18px）。如果你已经有项目字体规范，直接复用即可。
第一步：做“最小可用”的按钮骨架
- 画一个文本层，内容写“按钮”，命名为 Label。
- 选中文本层，按 Shift + A 给它套一层 Auto Layout。
- 在 Auto Layout 设置里把方向设为水平（Horizontal），对齐设为居中（Center）。
- 把 padding 先设为：左右 16，上下 10；间距（Spacing between items）设为 8（给未来可能的图标预留）。
- 给这个 Auto Layout 的容器加圆角（Radius）例如 10，并给一个临时填充色，确认视觉上是“按钮”。
到这里按钮已经能用，但它还不能切换尺寸、类型、状态。接下来我们用变量把“规则”写进去。
第二步：把按钮做成组件，并规划 Variants
- 选中按钮容器，按 Ctrl/Command + Alt + K 创建组件（Component），命名为 Button。
- 在右侧点击 Add variant，建立 3 个属性：
Size：S / M / L
Type：Primary / Secondary / Ghost
State：Default / Hover / Disabled
- 把组件集（Component set）整理成表格摆放，后面调试会很省时间。
建议：先只把 “M + Primary + Default” 做对，然后再复制扩展到其他组合，避免一开始就陷入 27 个变体的管理地狱。
第三步：用组件变量控制 Padding / 文字样式 / 圆角
- 在 Variables 里创建一个集合（Collection）叫 Button。
- 创建 Number 变量：padX、padY、radius、gap。
- 创建 String 变量：textStyle（或直接用不同文字样式也行，但用变量更统一）。
- 针对 Size 设定变量值：
S：padX=12、padY=8、radius=10、gap=6
M：padX=16、padY=10、radius=12、gap=8
L：padX=20、padY=12、radius=14、gap=10
- 回到组件，把 Auto Layout 的左右/上下 padding、圆角、间距分别绑定到对应变量（右侧会出现小“变量”图标）。
- 把 Label 的文字样式按 Size 切换：
如果你用的是变量驱动的文字样式：让不同 Size 的变体绑定到不同 textStyle；如果不用变量，也可以直接在 S/M/L 三个变体里分别应用 Button/S、Button/M、Button/L 的 Text Style。
第四步：用 Type 控制填充、描边和文字颜色
- Primary：背景填充 Brand/600，文字颜色 Neutral/0；无描边。
- Secondary：背景填充 Neutral/0，描边 Neutral/200，文字颜色 Neutral/900。
- Ghost：背景透明（或 0%），无描边，文字颜色 Brand/600。
技巧：把这些颜色也做成变量（例如 bgColor、textColor、borderColor、borderWidth），之后做主题切换会更顺滑。
第五步：用 State 做交互态（Hover/Disabled）
- Hover：Primary 可以把背景调深一档（Brand/700），Secondary/Ghost 可以加轻微底色（例如 Brand/50）或边框变深。
- Disabled：整体降低不透明度（例如 40%-50%），并把鼠标手势相关的交互（Prototype）去掉或保持默认。
- 如果你有原型需求：在 Prototype 面板给 Default 连接到 Hover（While hovering），Hover 连接回 Default（Mouse leave）。
第六步：可选增强：支持左侧图标 / 右侧图标
- 在 Auto Layout 里加入一个图标层（Icon），放在 Label 左侧，默认隐藏。
- 给组件再加一个 Variant 属性 Icon：None / Left / Right。
- 当 Icon=None：隐藏图标层；当 Left：显示并放左边；当 Right：显示并放右边（可以用“Swap instance”或在不同变体里调整顺序）。
检查清单：发布前 1 分钟自检
- 按钮宽度是否由内容决定（Hug contents），不同文本长度是否不会撑爆布局？
- 不同 Size 是否保持同一套 padding 规则？
- Primary/Secondary/Ghost 三种类型在浅底/深底场景是否都可读？
- Disabled 是否满足可访问性（对比度、识别度）？
- 组件命名是否清晰：Button / Size / Type / State / Icon？
你可以怎么复用这套按钮
把 Button 组件放进团队的 Library：后续做输入框、标签、卡片等组件时，保持同样的变量结构（Size/Type/State）会让整个设计系统更一致。建议在 UI Kit 里补一页“使用规范”，写清楚何时用 Primary、何时用 Ghost，以及禁用态的业务规则。
