Figma 实战：用变量 + 组件集做一套可切换的浅深色按钮系统（从 0 到交付）

你会得到什么

做完这套教程，你会在一个 Figma 文件里搭好「可交付」的按钮组件系统：主按钮/次按钮/危险按钮，默认/悬停/按下/禁用状态，并且可以通过变量一键切换浅色/深色主题。后续做新页面时，直接拖组件就能统一样式与交互。

准备工作（3 分钟）

建议版本：Figma Desktop + 已开启 Variables 功能。

创建页面结构：在文件里建 3 个 Page：Tokens / Components / Demo。

命名约定（越早统一越省事）：

color.bg.primary color.bg.secondary color.bg.danger color.text.onPrimary radius.button space.buttonX space.buttonY

第 1 步：用 Variables 建一层“设计 Token”

进入 Tokens 页，新建一个 Variables Collection，名字叫 Theme，并创建两个 Mode：Light / Dark。

先从按钮最关键的颜色开始做（后面可扩展）：

color.bg.primary：Light 设为 #2563EB；Dark 设为 #3B82F6
color.bg.secondary：Light #E5E7EB；Dark #374151
color.bg.danger：Light #DC2626；Dark #EF4444
color.text.onPrimary：Light #FFFFFF；Dark #0B1220（或保持白色，按你的品牌来）
color.text.onSecondary：Light #111827；Dark #F9FAFB

然后再补齐尺寸类 Token（Number 类型变量）：

radius.button：8
space.buttonX：16
space.buttonY：10
font.button（可选）：14

第 2 步：先做“单个按钮母版”（Auto Layout + 约束）

进入 Components 页，画一个按钮容器 Frame，开启 Auto Layout：

方向：Horizontal
Padding：左右绑定 space.buttonX，上下绑定 space.buttonY
Spacing：8（用于图标 + 文案）
Hug contents

放一个文字层，命名为 Label，字重建议 500/600。按钮圆角绑定 radius.button。

第 3 步：创建 Component Set（Variant 结构建议）

把按钮母版做成组件，然后做 Component Set，Variant 属性建议这样拆：

这样拆的好处是：以后加新状态/新类型都不会打乱命名；开发也更容易对齐。

第 4 步：把样式全部绑定到变量（关键）

分别选中不同 Variant，把填充与文字颜色绑定到对应的变量：

primary/default：背景绑定 color.bg.primary；文字绑定 color.text.onPrimary
secondary/default：背景绑定 color.bg.secondary；文字绑定 color.text.onSecondary
danger/default：背景绑定 color.bg.danger；文字绑定 color.text.onPrimary

状态怎么做？ hover/pressed 可以用同一变量 + 调整不透明度（例如 hover 90%、pressed 80%），或者为每种状态再加变量（更严谨，适合设计系统）。disabled 建议：背景/文字用灰阶变量，并降低对比。

第 5 步：一键切换浅色/深色主题（验证成果）

进入 Demo 页，拖几颗按钮出来。选中画板或组件实例，在右侧找到 Variables 的 Mode 切换：从 Light 切到 Dark。只要你绑定正确，按钮应该会“整体换肤”，而不是逐个手改颜色。

第 6 步：交付给开发的“最小说明”模板

在组件旁边放一块说明（Text），复制下面模板，开发拿到就能快速落地：

按钮组件：Button Variants: - type: primary | secondary | danger - state: default | hover | pressed | disabled Tokens: - color.bg.primary / secondary / danger - color.text.onPrimary / onSecondary - radius.button - space.buttonX / space.buttonY 交互：hover/pressed 仅改变视觉（opacity 或 token）