Figma 自动布局 + 变量：从 0 搭一套可复用按钮组件（可直接照做）

你将做出什么

这篇教程会带你用 Figma 的 Auto Layout（自动布局）+ Variables（变量）从 0 搭一套“可复用、可扩展、可交付”的按钮组件：包含尺寸（S/M/L）、圆角、颜色主题（Primary/Secondary）、状态（Default/Hover/Pressed/Disabled/Loading），并用组件属性（Component Properties）控制一切。你照着做完，基本就能直接搬进团队的设计系统。

准备：建一个按钮 Playground 页面

1）新建一个 Page，命名为 Button Playground。
2）在页面里建 3 个 Frame：Tokens / Components / Examples，后面分别放变量、组件和示例。
3）确认你使用的 Figma 版本支持 Variables（菜单：右侧面板 Variables 或 Assets 里能看到）。

第 1 步：先定义变量（最小可用的一套）

在 Tokens 区域创建一个 Variables Collection（例如：Design Tokens）。建议先做“能跑起来”的最小集，避免一上来变量爆炸。

1）尺寸相关变量

创建 Number 类型变量（单位按 px 理解）：

btn_height_s = 32 btn_height_m = 40 btn_height_l = 48 btn_padding_x_s = 12 btn_padding_x_m = 16 btn_padding_x_l = 20 btn_gap = 8 btn_radius = 10

2）颜色相关变量

创建 Color 类型变量（示例值你可以换成自己的品牌色）：

color_primary_bg = #1677FF color_primary_bg_hover = #3C8CFF color_primary_bg_pressed = #0E5BD8 color_primary_text = #FFFFFF color_secondary_bg = #F2F3F5 color_secondary_bg_hover = #E8EAED color_secondary_bg_pressed = #DDE0E5 color_secondary_text = #1F2329 color_disabled_bg = #F5F6F7 color_disabled_text = #B8BCC3

这一步的关键不是“颜色做得多”，而是后面按钮样式都从变量来，改品牌色时只改变量即可。

第 2 步：做按钮基础结构（Auto Layout）

在 Components 区域新建一个 Frame 作为按钮骨架：

1）新建 Frame，命名：Button/ 。
2）打开 Auto Layout：方向设为 Horizontal。
3）对齐：Center（垂直居中）。
4）Padding：左右用变量（先手动填一个值，等会儿用属性/变量替换），上下设为 0。
5）Item spacing（间距）：使用变量 btn_gap。
6）Corner radius：使用变量 btn_radius。

内容区建议放 3 个子层：

[Icon/Left] (可选) [Label] (必选，Text) [Icon/Right] (可选)

把 Icon 层先放一个 16x16 的占位矢量（或简单矩形），方便后面做属性切换。

第 3 步：把“尺寸”做成组件属性（S/M/L）

把 Button/ 变成组件（Create component）。然后建立一个“Size”属性：

1）做 3 个变体（Variants）：Size=S / Size=M / Size=L。
2）对每个变体设置高度与 padding：
- S：高度绑定 btn_height_s，左右 padding 绑定 btn_padding_x_s
- M：高度绑定 btn_height_m，左右 padding 绑定 btn_padding_x_m
- L：高度绑定 btn_height_l，左右 padding 绑定 btn_padding_x_l

如果你希望高度也能随着内容自适应，可以保持 Auto Layout 的 Hug 内容，但按钮高度建议固定更利于工程落地。

第 4 步：把“主题”做成属性（Primary/Secondary）

在现有组件集上再加一个维度：Theme=Primary / Theme=Secondary。

1）Primary：背景填充绑定 color_primary_bg，文字颜色绑定 color_primary_text。
2）Secondary：背景填充绑定 color_secondary_bg，文字颜色绑定 color_secondary_text。

注意：文字颜色不要手填，必须绑定到变量，这样后面做 Dark/Light 或品牌切换会很轻松。

第 5 步：做状态（Default/Hover/Pressed/Disabled/Loading）

再加一维属性：State=Default/Hover/Pressed/Disabled/Loading。

1）Default/Hover/Pressed

以 Primary 为例：
- Default：bg=color_primary_bg
- Hover：bg=color_primary_bg_hover
- Pressed：bg=color_primary_bg_pressed

Secondary 同理，用对应的 secondary 变量。

2）Disabled

- 背景：color_disabled_bg
- 文字：color_disabled_text
并且把按钮整体透明度设置为 100%（不靠透明度“糊掉”，这样更可控）。

3）Loading

Loading 的常见做法：Label 文案换成“加载中”，左侧 Icon 替换为一个 Spinner（可以用一个简单圆环）。如果你不想维护 Spinner 的旋转动画，至少把图形占位做出来，方便研发对齐。

第 6 步：Icon 显示做成布尔属性

在组件里把 Icon/Left 和 Icon/Right 都设置为“可开关”的 Component property（Boolean）。

建议：
1）Icon/Left 默认隐藏（false），需要时打开。
2）当 Icon 关闭时，确保间距不会残留：Icon 层要么设置为 Auto Layout 的“忽略”逻辑（用隐藏即可），要么用一个 0 宽度的占位策略（不推荐）。

第 7 步：在 Examples 区域做落地示例（给自己验收）

在 Examples 区域拉出一排按钮实例，至少覆盖：

Primary: S/M/L + Default/Hover/Pressed/Disabled Secondary: S/M/L + Default/Hover/Pressed/Disabled 有无 Icon 的组合 Loading 状态

验收点：换 Theme/Size/State 时，布局不跳、圆角一致、文字永远居中、Icon 不出现奇怪的空隙。

常见坑与排查清单

1）按钮高度不一致：检查每个变体是否都用了对应的 btn_height_* 变量。
2）文字对不齐：Label 的 line-height 可能不一致，建议统一字体与行高并锁定。
3）Icon 打开后间距异常：确认 Auto Layout spacing 只由 btn_gap 控制，Icon 关闭时是真隐藏。
4）Disabled 看起来“脏”：不要用整体透明度糊掉，直接用 disabled 颜色变量。
5）主题换色很痛苦：说明你有地方还在用手填颜色，回去把它全部绑定到变量。

交付建议（给研发更省事）

1）把属性命名成工程友好的格式：Theme / Size / State / IconLeft / IconRight。
2）把组件名固定：Button。变体属性决定展示。
3）在组件说明（De ion）写清：字号、圆角、padding、状态对应的颜色变量名称。
4）如果团队有多端（Web/iOS/Android），把 Token 命名保持一致，后续做自动映射会更顺。

做到这里，你就拥有一套“可以扩展”的按钮组件：后面想加 Danger/Success、加 Outline 版本、加圆角大小级别，都只是在变量与属性维度上扩展，不需要推翻重做。