Figma 组件库搭建清单（含命名规范+常用组件模板）

文章目录

• • 一、组件库搭建核心清单（5大阶段）
  • • 阶段1：前期准备（1天）
    • 阶段2：设计变量（Tokens）搭建（优先做，全局复用）
    • • [1. 颜色样式（Color Styles）](#1. 颜色样式（Color Styles）)
      • [2. 文字样式（Text Styles）](#2. 文字样式（Text Styles）)
      • [3. 效果样式（Effect Styles）](#3. 效果样式（Effect Styles）)
      • [4. 间距/圆角变量（Variables）](#4. 间距/圆角变量（Variables）)
    • 阶段3：组件命名规范（核心！决定检索效率）
    • • [1. 通用命名公式（官方推荐）](#1. 通用命名公式（官方推荐）)
      • [2. 高频组件命名示例](#2. 高频组件命名示例)
      • [3. 避坑规则](#3. 避坑规则)
    • 阶段4：常用组件模板（直接复制创建，覆盖90%场景）
    • • 一、基础组件（Base，优先搭建）
      • • [1. 按钮（Button）- 变体组件](#1. 按钮（Button）- 变体组件)
        • [2. 输入框（Input）- 变体组件](#2. 输入框（Input）- 变体组件)
        • [3. 图标（Icon）- 组件集](#3. 图标（Icon）- 组件集)
        • [4. 标签（Tag）- 变体组件](#4. 标签（Tag）- 变体组件)
        • [5. 复选框（Checkbox）/单选框（Radio）](#5. 复选框（Checkbox）/单选框（Radio）)
      • 二、复合组件（Composite，高频复用）
      • • [1. 基础卡片（Card/Basic）](#1. 基础卡片（Card/Basic）)
        • [2. 弹窗（Modal/Small）](#2. 弹窗（Modal/Small）)
        • [3. 导航栏（Navbar）](#3. 导航栏（Navbar）)
        • [4. 列表项（ListItem）](#4. 列表项（ListItem）)
    • 阶段5：组件库发布与维护（团队协作必备）
    • • [1. 发布组件库](#1. 发布组件库)
      • [2. 启用组件库](#2. 启用组件库)
      • [3. 维护规则](#3. 维护规则)

一、组件库搭建核心清单（5大阶段）

阶段1：前期准备（1天）

• ✅ 新建独立库文件：命名「DesignSystem_通用组件库_v1.0」（版本号便于迭代）
• ✅ 规划页面结构（4大核心页）：
  • 00_DesignTokens（设计变量：颜色/文字/间距/圆角）
  • 01_BaseComponents（基础组件：按钮/输入框/图标等）
  • 02_CompositeComponents（复合组件：卡片/弹窗/导航栏等）
  • 99_Docs（使用说明：命名规则/组件用法/更新日志）
• ✅ 统一基础规范：
  • 基准单位：8px（间距/圆角/尺寸均为8的倍数，如4/8/16/24）
  • 布局栅格：移动端375px（4列）、桌面端1440px（12列）
  • 颜色体系：品牌色（主/辅）、功能色（成功/警告/错误/中性）

阶段2：设计变量（Tokens）搭建（优先做，全局复用）

1. 颜色样式（Color Styles）

• 命名规范：/类别/用途/层级（用斜杠分组，便于检索）
  • 品牌色：color/brand/primary（主色）、color/brand/secondary（辅色）
  • 功能色：color/func/success（成功）、color/func/warning（警告）、color/func/error（错误）、color/func/neutral（中性）
  • 文本色：color/text/primary（主文本）、color/text/secondary（次文本）、color/text/tertiary（弱文本）
  • 背景色：color/bg/primary（主背景）、color/bg/secondary（次背景）
• 操作：选图层→右侧Fill→点4个点→新建样式→按规范命名

2. 文字样式（Text Styles）

• 命名规范：/层级/字重/字号（适配多端）
  • 标题：text/heading/700/24（H1，粗体24px）、text/heading/600/20（H2）
  • 正文：text/body/400/16（常规16px）、text/body/400/14（小正文）
  • 辅助：text/caption/400/12（注释）、text/link/400/16（链接）
• 操作：选文字→右侧Text→点4个点→新建样式→绑定颜色变量

3. 效果样式（Effect Styles）

• 命名规范：/类型/层级/强度
  • 阴影：shadow/layer/1（浅阴影）、shadow/layer/2（中阴影）、shadow/layer/3（深阴影）
  • 模糊：blur/light（轻模糊）、blur/medium（中模糊）
• 操作：加阴影/模糊→右侧Effects→点4个点→新建样式

4. 间距/圆角变量（Variables）

• 间距：space/4、space/8、space/16、space/24、space/32
• 圆角：radius/4、radius/8、radius/12、radius/16、radius/24
• 操作：右侧Variables→新建Collection（命名Spacing/Radius）→添加数值变量

阶段3：组件命名规范（核心！决定检索效率）

1. 通用命名公式（官方推荐）

组件类别/组件名称/变体/状态（斜杠分隔，层级清晰）

• 类别：Base（基础）、Composite（复合）、Icon（图标）、Layout（布局）
• 变体：尺寸（S/M/L）、主题（Primary/Secondary）、类型（Outline/Filled）
• 状态：Default/Hover/Active/Disabled/Loading

2. 高频组件命名示例

• 按钮：
  • 基础：Base/Button/Primary/M/Default、Base/Button/Primary/M/Hover
  • 轮廓：Base/Button/Outline/S/Disabled
• 输入框：Base/Input/Text/M/Default、Base/Input/Password/L/Focus
• 卡片：Composite/Card/Basic/Default、Composite/Card/Product/Hover
• 图标：Icon/24/Home、Icon/16/Close（尺寸+名称）
• 弹窗：Composite/Modal/Small/Default

3. 避坑规则

• ❌ 禁止中文/空格/特殊符号（仅用字母、数字、斜杠）
• ❌ 禁止大小写混用（统一首字母大写或全小写）
• ✅ 同组件命名完全一致（Smart Animate动画必备）
• ✅ 用变体（Variants）替代多文件组件（如按钮多状态合并为1个变体组件）

阶段4：常用组件模板（直接复制创建，覆盖90%场景）

一、基础组件（Base，优先搭建）

1. 按钮（Button）- 变体组件

• 结构：Frame（按钮）+ Text（文字）+ Icon（可选，左/右）
• 变体属性：
  • 尺寸：S（32px高）、M（40px高）、L（48px高）
  • 主题：Primary（填充）、Secondary（浅灰）、Outline（描边）、Danger（红色）
  • 状态：Default、Hover、Active、Disabled、Loading
• 样式绑定：背景色/文字色绑定颜色变量，圆角绑定radius/8，间距绑定space/16

2. 输入框（Input）- 变体组件

• 结构：Frame（输入框）+ Text（占位符/输入文字）+ Icon（左图标/右清除）
• 变体属性：
  • 类型：Text、Password、Search、Number
  • 尺寸：M（40px高）、L（48px高）
  • 状态：Default、Focus、Error、Disabled
• 样式绑定：描边色绑定颜色变量，圆角radius/8，内边距space/12

3. 图标（Icon）- 组件集

• 尺寸：16px、24px、32px（常用）
• 命名：Icon/24/xxx（xxx为图标名，如Home、Search、User）
• 样式：统一描边2px，颜色绑定color/text/primary

4. 标签（Tag）- 变体组件

• 结构：Frame + Text
• 变体：
  • 主题：Default、Success、Warning、Error
  • 尺寸：S（24px高）、M（28px高）
• 样式：圆角radius/16（胶囊形），内边距space/8

5. 复选框（Checkbox）/单选框（Radio）

• 结构：Frame（选中框）+ Icon（对勾/圆点）+ Text（选项文字）
• 状态：Default、Checked、Disabled
• 样式：尺寸20px，圆角radius/4（复选框）/radius/10（单选框）

二、复合组件（Composite，高频复用）

1. 基础卡片（Card/Basic）

• 结构：Frame（卡片）+ 图片（可选）+ 标题 + 描述 + 按钮（可选）
• 样式：圆角radius/12，阴影shadow/layer/1，内边距space/16
• 变体：Default、Hover（阴影加深）

2. 弹窗（Modal/Small）

• 结构：遮罩（半透明黑）+ 弹窗容器 + 标题 + 内容 + 按钮组
• 样式：弹窗圆角radius/16，阴影shadow/layer/3，内边距space/24
• 状态：Default（显示）、Hidden（隐藏，用于动画）

3. 导航栏（Navbar）

• 结构：Frame（导航栏）+ Logo + 导航链接 + 按钮（可选）
• 样式：高度64px，背景白/透明，底部阴影shadow/layer/1
• 适配：桌面端（横向）、移动端（折叠菜单）

4. 列表项（ListItem）

• 结构：Frame + 图标/头像 + 主文案 + 次文案 + 操作按钮（可选）
• 样式：高度56px，内边距space/16，底部1px分割线
• 变体：Default、Hover、Active

阶段5：组件库发布与维护（团队协作必备）

1. 发布组件库

• 操作：顶部Assets→Publish→选择团队/项目→填写版本号（如v1.0）→发布

• 权限：专业版可发布团队库，免费版仅个人库

2. 启用组件库

• 操作：业务文件→左侧Assets→搜索组件库→启用→拖拽组件使用

3. 维护规则

• ✅ 主组件修改后重新发布（版本号递增，如v1.1）
• ✅ 禁止直接修改实例（用变体/属性调整，避免覆盖）
• ✅ 定期清理冗余组件（删除未使用、重复组件）
• ✅ 文档同步更新（记录组件新增/修改/删除）