Figma 一键做出可复用的按钮组件：Auto Layout + Variants 实战

你将做出什么

目标是做出一套可复用的「按钮组件」：支持尺寸（S/M/L）、层级（Primary/Secondary/Ghost）、状态（Default/Hover/Pressed/Disabled）、以及可选图标（无/左图标/右图标）。整套按钮用 一个组件集（Variants） 管理，后续在项目里可以一键切换，不用复制粘贴改样式。

准备：新建按钮基础样式（Auto Layout）

新建一个 Frame（快捷键 F），命名为 Button/ 。
对 Frame 开启 Auto layout（Shift + A）。方向选水平（Horizontal）。
Padding 建议：左右 16，上下 10；Item spacing 8。
对齐：垂直居中（Center）；横向居中（Center）。
给 Frame 设置圆角 8（或与你的设计系统一致）。
在 Frame 内放一个 Text，内容写 “Button”，命名为 Label。

提示：把按钮做成 Auto Layout 的好处是，当你切换文案、字体或是否带图标时，按钮宽度会自动适配，不会出现手动拉伸的维护成本。

建立三档尺寸（S/M/L）

复制 Button/ 三次，分别命名为 Size/S、Size/M、Size/L（先做普通 Frame 也行，后面会统一变成组件变体）。

Size/S：左右 12，上下 8；字体 12 或 13。
Size/M：左右 16，上下 10；字体 14。
Size/L：左右 20，上下 12；字体 16。

建议把这些数值写成你团队的规则：同一套按钮，只要改尺寸属性，就能保证整体节奏一致。

建立三种层级（Primary/Secondary/Ghost）

以 Size/M 为例先做三种视觉层级（后面会扩展到所有尺寸）。

Primary：填充色用品牌主色；文字白色；可加轻微阴影（可选）。
Secondary：浅色填充或白底 + 边框；文字用主色或深色；边框 1px。
Ghost：无填充；文字用主色；hover 时出现淡底或描边。

技巧：如果你有 Color Styles（例如 Primary/500、Gray/900），优先用 Style 绑定颜色，后续换品牌色会省掉大量手工替换。

建立四种状态（Default/Hover/Pressed/Disabled）

每个层级都建议至少有 4 个状态。你可以先只做 Primary 的 4 个状态，确认节奏后再复制到 Secondary/Ghost。

Default：正常颜色。
Hover：背景略变深（或加 4%~8% 的覆盖），文字不变。
Pressed：再深一点，或减少阴影/增加内阴影，让“按下去”的感觉更明显。
Disabled：降低不透明度（例如 40%~60%），并把鼠标语义留给开发（你只管视觉即可）。

加入可选图标（无/左/右）

在按钮 Auto Layout 里，图标最稳的做法是用一个固定命名的占位层，例如 Icon。

准备一个 16x16 或 20x20 的图标（随尺寸而定），放在 Label 左侧，命名为 Icon。
设置 Icon 的约束为固定大小；不要让它自动拉伸。
需要右图标时，把 Icon 移到 Label 右侧即可。
没有图标时，可以用 Variants 切换到“none”，直接隐藏 Icon 图层（而不是删除）。

关键点：通过隐藏/显示 Icon，而不是新增不同结构的按钮，能减少变体数量爆炸。

把它们变成一个组件集（Variants）

选中你要作为变体的按钮（建议先做 Size=M + Primary 四状态 + 图标 3 种）。
点击右侧面板的 Create component（Ctrl+Alt+K），再点 Combine as variants。
在 Variants 属性里命名：size（S/M/L）、type（primary/secondary/ghost）、state（default/hover/pressed/disabled）、icon（none/left/right）。
统一命名规则：全小写、短词、避免中文；这样开发也更容易对齐。

如果你已经有交互原型需求，还可以在组件集里给不同 state 做交互连接（Prototype），例如 Hover 触发到 hover 变体、Mouse down 触发到 pressed 变体。