在 Figma 里从零搭一套手机 App 的小型 UI Kit：用变量管理颜色和间距，用自动布局做会随文字长短自动伸缩的按钮和卡片，用组件属性和变体管理按钮的样式和状态，最后用这些组件拼出一个登录页，并一键切换浅色、深色主题。
先看清成品
成品是一个 Figma 文件，包含三个页面：“变量与样式”展示色板和字号，“组件”里有按钮、输入框、卡片三个组件，“示例页面”是一个用组件拼出的登录页，右侧面板切换模式即可在浅色和深色之间切换。本文是纯设计操作教程，所有步骤需要在 Figma 里手动完成，本文环境无法登录 Figma，没有实际操作截图；功能和套餐限制按 Figma 官方帮助中心核对。
做完之后你会得到什么？
| 成果 | 说明 |
|---|---|
| 基础变量 | 色板、间距、圆角 |
| 主题变量 | 背景、文字、主色，浅色和深色两个模式 |
| 文字样式 | 标题、正文、说明三档 |
| 按钮组件 | 主要、次要两种样式，默认、禁用两种状态 |
| 输入框和卡片 | 自动布局，内容变长自动撑开 |
| 登录页 | 全部由组件拼成，可切换主题 |
需要准备哪些环境？
| 项目 | 要求 | 说明 |
|---|---|---|
| Figma 账号 | 免费的 Starter 计划可以完成大部分步骤 | 网页版或桌面版都可以 |
| 变量模式 | Professional 及以上计划 | 浅色、深色切换需要多个模式 |
| 字体 | 思源黑体（Noto Sans SC）等 | Figma 内置 Google Fonts，可直接选用 |
官方套餐对比显示：Starter 计划没有变量模式功能，每个集合只有一个值；Professional 每个集合最多 10 个模式，Organization 最多 20 个。只有 Starter 计划时，可以先只做浅色主题，跳过第二步的“深色模式”部分。
第一步：怎样建立基础变量？
1. 规划结构
把变量分成两层，这是设计系统的通用做法：
| 集合 | 作用 | 示例 |
|---|---|---|
| Primitives（基础值） | 所有可用的原始值 | blue/500、gray/900、space/4 |
| Theme（主题） | 按用途命名，引用基础值 | color/bg、color/text、color/primary |
组件只使用 Theme 层的变量。以后换品牌色或加深色模式，只改 Theme 的引用，组件不用动。
2. 用 AI 生成一套色板（可选）
我在做一个记账 App 的 UI Kit，品牌主色是蓝色。
请给我一套基础色板：蓝色和灰色各 5 级（100、300、500、700、900），再加白色、红色（错误）、绿色（成功）。
输出表格：变量名（如 blue/500）| 十六进制色值 | 用途建议。
同时给出浅色和深色主题下 color/bg、color/surface、color/text、color/text-muted、color/primary、color/border 应该分别引用哪个基础色，并说明文字和背景对比度是否满足 WCAG AA。
AI 给出的色值要用对比度工具复核，不要直接信任它的对比度结论。
3. 创建 Primitives 集合
在画布空白处点击，右侧面板找到 本地变量，点 打开变量，新建集合 Primitives，添加：
| 变量名 | 类型 | 值（示例） |
|---|---|---|
blue/500 |
颜色 | #3B82F6 |
blue/700 |
颜色 | #1D4ED8 |
gray/100 |
颜色 | #F3F4F6 |
gray/500 |
颜色 | #6B7280 |
gray/900 |
颜色 | #111827 |
white |
颜色 | #FFFFFF |
space/2 |
数字 | 8 |
space/4 |
数字 | 16 |
radius/md |
数字 | 12 |
变量名里的 / 会自动形成分组。色值只是示例，按你的品牌调整。
4. 检查结果
变量面板左侧出现 blue、gray、space、radius 分组，点开能看到各自的值。
第二步：怎样建立主题变量和深色模式？
1. 创建 Theme 集合
新建集合 Theme，添加颜色变量。值不要直接填色值，而是点击色块选择 库 → Primitives 里的变量（创建别名）：
| 变量名 | Light（浅色） | Dark（深色） |
|---|---|---|
color/bg |
white |
gray/900 |
color/surface |
gray/100 |
比背景略亮的深灰 |
color/text |
gray/900 |
white |
color/text-muted |
gray/500 |
gray/100 的较暗级 |
color/primary |
blue/500 |
blue/500 |
color/border |
gray/100 |
gray/500 |
2. 添加深色模式
在 Theme 集合的表头把默认模式改名为 Light，点 + 新增模式 Dark，按上表填写深色列。
3. 设置变量的作用范围
选中每个颜色变量，在编辑面板里把“作用范围”限制为合适的属性，例如 color/text 只勾选“文本填充”。这样设计时下拉列表不会出现一堆不相关的变量。
4. 检查结果
变量面板里 Theme 集合有两列值，每个值显示为对 Primitives 变量的引用，而不是色值。
第三步：怎样做会自动伸缩的按钮？
1. 创建文字样式
先建三个文字样式：标题 24/32、正文 16/24、说明 13/20（字号/行高），字体选思源黑体。
2. 用自动布局搭按钮
- 用文字工具输入“登录”，应用
正文样式，颜色选color/bg变量（主按钮上文字是背景色）。 - 选中文字按
Shift+A添加自动布局。 - 右侧设置：
| 属性 | 值 |
|---|---|
| 内边距 左右 | 绑定变量 space/4 |
| 内边距 上下 | 绑定变量 space/2 的 1.5 倍，或单独建一个 space/3 变量 |
| 圆角 | 绑定变量 radius/md |
| 填充 | color/primary |
| 宽度 | 自适应内容（Hug） |
- 选中后按
Ctrl+Alt+K（macOS 为Cmd+Option+K）创建组件，命名Button。
3. 添加变体和组件属性
| 组件属性 | 类型 | 取值 |
|---|---|---|
| 样式 | 变体 | 主要、次要 |
| 状态 | 变体 | 默认、禁用 |
| 文字 | 文本 | 默认“登录” |
| 显示图标 | 布尔 | 默认关闭 |
“次要”变体：填充去掉，加 1 像素描边 color/border，文字颜色 color/text。“禁用”变体：整体不透明度降低。
4. 检查结果
| 操作 | 期望 |
|---|---|
| 把按钮文字改成“使用手机号验证码登录” | 按钮自动变宽，内边距不变 |
| 在右侧面板切换“样式” | 外观在主要、次要之间切换 |
修改 space/4 的值 |
所有按钮内边距同时变化 |
第四步：怎样做输入框和卡片？
1. 输入框
纵向自动布局，包含“标签”文字（说明 样式）和一个横向自动布局的输入区域：
| 属性 | 值 |
|---|---|
| 输入区域宽度 | 填充容器（Fill） |
| 输入区域描边 | color/border |
| 占位文字颜色 | color/text-muted |
| 组件属性 | 标签（文本）、占位文字（文本）、状态（默认、错误） |
2. 卡片
纵向自动布局，内边距 space/4，间距 space/2，填充 color/surface，圆角 radius/md。里面放标题、正文和一个按钮实例。
3. 检查结果
在卡片正文里粘贴一大段文字，卡片高度自动增加，按钮始终在最下面。
第五步：怎样拼出登录页并切换主题？
1. 搭页面
新建一个手机尺寸的画框，填充 color/bg，添加纵向自动布局，依次放入：
| 元素 | 内容 |
|---|---|
| 标题 | “欢迎回来”，标题 样式 |
| 输入框实例 | 标签“手机号” |
| 输入框实例 | 标签“密码” |
| 按钮实例 | 主要样式，“登录”，宽度改为填充容器 |
| 按钮实例 | 次要样式，“注册新账号” |
2. 切换主题
选中整个画框，在右侧面板 外观 区域找到变量模式切换，把 Theme 从 Light 改为 Dark。
3. 检查结果
| 检查项 | 期望 |
|---|---|
| 切到深色 | 背景、文字、边框全部变化，没有漏掉的元素 |
| 复制一份画框 | 一份浅色一份深色并排对比 |
| 开发模式查看 | 显示的是变量名而不是写死的色值 |
切换后仍然是浅色的元素，说明它用了写死的颜色，改成 Theme 变量即可。
出问题时该怎么调？
1. 找不到新增模式的按钮
当前计划是 Starter。官方套餐对比里 Starter 不提供变量模式。可以先只做一套浅色变量，或升级计划后再添加深色模式。
2. 按钮文字变长后被截断
文字图层的宽度被固定了。选中文字，把宽度改为“自适应内容”；按钮本身也要是“自适应内容”。
3. 修改组件后实例没有更新
检查实例是否被“分离”（Detach）过。分离后就和组件断开了，只能重新放入实例。
4. 下拉列表里变量太多
没有设置作用范围。回到变量面板为每个变量设置合适的作用范围。
常见问题怎么处理？
| 现象 | 原因 | 解决方法 |
|---|---|---|
| 免费计划只能建 3 个文件 | Starter 计划限制 | 把多个练习放在同一个文件的不同页面 |
| 别的文件用不了这些组件 | 发布团队库需要付费计划 | 升级后通过“资源 → 库”发布 |
| 深色下文字看不清 | 对比度不足 | 调整 Dark 列的引用，用对比度插件检查 |
| 自动布局里元素重叠 | 用了绝对定位 | 取消该元素的“忽略自动布局” |
| 变体太多难管理 | 把文字等也做成了变体 | 能用文本、布尔属性的就不要用变体 |
| 想把变量交给开发 | 需要导出代码 | 见本系列的“导出变量为 CSS 插件” |
项目资源
建议先只做一个按钮：建两三个变量，用自动布局做出按钮，改文字确认能自动伸缩。
按钮做顺手之后再建完整的变量体系和其他组件，最后拼页面。