Figma 零基础做出可交付的组件库：颜色、文字、按钮到变体一条龙

你将得到什么

做“组件库”不是把按钮画得好看就结束，而是要让它能被复用、能表达状态、能被多人协作维护，并且输出给开发时不含糊。这篇教程用一套可直接照做的流程，帮你在 Figma 从 0 搭建一个小而完整的组件库：颜色与文字样式 → 按钮基础组件 → 变体与状态 → 命名与发布 → 交付检查。

准备：新建库文件与页面结构

1) 新建一个专门的 Figma 文件，命名为“Project DS / Components”。

2) 建 3 个页面（Page）：01 Foundations、02 Components、03 Templates。以后基础规范和组件不要混在业务稿里，避免被误改。

3) 打开右侧面板的 Libraries（资源库），确认后续可以发布（Publish）成团队可用的库。

第 1 步：建立颜色样式（Color Styles）

目标：让所有颜色都“从样式来”，不要在组件里随手挑色。

1) 在“01 Foundations”页面创建一块色板区域，放几个矩形作为色样例。

2) 选中矩形填充色，在右侧 Fill 旁点“样式”图标 → Create style。

3) 推荐命名法（可直接照抄）：

Color/Primary/500、Color/Primary/600、Color/Neutral/0、Color/Neutral/900、Color/Success/500、Color/Danger/500。

4) 规则：层级越深越具体；同一语义只保留一套主色，不要出现“蓝1、蓝2、蓝3”的随意命名。

第 2 步：建立文字样式（Text Styles）

目标：标题、正文、辅助文案各有归属，减少“每次都改字号/行高”。

1) 创建几行文本示例，分别设置字号与行高。

2) 右侧 Text → Styles → Create style。

3) 推荐最小集合（够用且易维护）：

Text/ /24（24/32，Semibold）

Text/Body/14（14/22，Regular）

Text/Caption/12（12/18，Regular）

4) 小技巧：行高尽量用 4 的倍数（例如 20、24、28、32），排版更稳定。

第 3 步：做按钮基础组件（ Button）

目标：先做一个“最小正确”的按钮，再扩展。

1) 在“02 Components”页面新建一个 Frame，命名为 Button。

2) 放一个文本层（Label），把按钮容器和文本一起选中 → Shift + A（Auto Layout）。

3) Auto Layout 建议：Padding 左右 16、上下 10；Spacing 8；对齐 Center。

4) 给容器添加 Fill（使用 Color Styles），圆角 8；给文字应用 Text Styles。

5) 把这个按钮创建为组件：Create component（Ctrl/Cmd + Alt + K）。

第 4 步：用变体表达尺寸与状态（Variants）

目标：把“大小/类型/状态”从手工复制变成可选参数。

1) 选中按钮组件 → 右侧点 Add variant，让它成为组件集（Component set）。

2) 建议的属性（Properties）命名：

Type：Primary / Secondary / Ghost

Size：S / M / L

State：Default / Hover / Pressed / Disabled

3) 尺寸规则示例：

S：左右 12 上下 8；M：左右 16 上下 10；L：左右 20 上下 12。

4) 状态规则示例：

Hover：主色加深一档；Pressed：再加深一档；Disabled：降低不透明度并禁用阴影。

5) 重要：不要用“复制一个按钮改个颜色”来表示 Hover/Pressed，统一收敛到 State 属性。

第 5 步：补齐图标与加载（可选但很实用）

1) 在按钮 Auto Layout 里增加一个 Icon 容器（可放入 SVG 图标），并用布尔属性控制是否显示：HasIcon true/false。

2) 加载态可用一个小的旋转图标或点点动画的静态占位：用 State=Loading 也可以，但建议保持状态数量可控，避免组合爆炸。

第 6 步：命名与发布（让团队“找得到、用得对”）

1) 组件命名建议：

Button、Input、Tag、Modal 等用单数名词；子层命名清晰：Label、Icon、Container。

2) 在 Assets 面板检查组件是否归类正确（可用 / 分组：Controls/Button）。

3) 发布库：Assets → Library → Publish，写清版本说明（例如“新增 Button 变体：Type/Size/State”）。

第 7 步：交付给开发前的 8 项检查清单

1) 颜色全部来自 Color Styles；2) 字体全部来自 Text Styles；3) 组件层级命名清晰；4) Auto Layout 不会因文案变长而崩；5) 变体属性名一致且可读；6) Disabled 状态对比度可用；7) 示例用法（Do/Don't）至少 1 组；8) 发布说明包含改动点与影响范围。