B 端设计设计系统组件库

企业级设计系统 DesignKit

为内部产品线构建的统一设计系统，包含 200+ 组件、完整的设计 Token 与开发对接文档。

01 · 项目背景

项目背景

为内部 5+ 产品线构建统一的设计系统，解决多产品间视觉不一致、设计资产重复建设、设计-开发协作效率低的问题。

目标用户

内部设计师团队（8 人）、前端开发团队（15 人）

业务需求

统一视觉语言、提升组件复用率、缩短设计-开发交付周期

200+组件数
85%复用率
95%还原度
×3效率提升
02 · 痛点分析

痛点分析

  • 5 个产品线各自维护设计规范，风格不一
  • 组件复用率不足 20%
  • 设计-开发还原度仅 70%
  • 新项目启动需重复造轮子，效率低

改版前

每个产品各自为战，相同功能组件被重复设计 3-5 次，视觉风格各异。

改版后

建立统一的 Token 体系与组件库，一套设计资产服务全部产品线。

03 · 设计目标

设计目标

建立统一的设计语言、可复用的组件库与规范化的协作流程，将设计效率提升 3 倍。

200+ 组件覆盖全部业务场景
Design Token 驱动多主题切换
Figma → Code 自动化工作流
组件复用率达 85%+
设计-开发还原度 95%
04 · 前期调研

前期调研

设计师 小林

3 年经验，每个项目都要重建基础组件

前端开发 老周

5 年经验，设计稿和实现经常不一致

产品经理 小刘

关注交付速度，希望减少设计评审轮次

竞品分析

审计 Ant Design、Material Design、Carbon Design System 的架构策略。

核心洞察

核心发现：Token 分层命名（Global → Alias → Component）是跨产品一致性的关键。

05 · 规范输出

规范输出

色彩体系

Brand
Brand-L
Brand-D
Success
Warning
Error
BG
Text

字体层级

DisplayDesignKit
Heading组件文档
Body按钮用于触发一个操作...
Code<Button type="primary" />

组件库

  • 按钮系列
  • 表单控件
  • 导航组件
  • 反馈组件
  • 数据展示
  • 布局容器

间距 Token

2px
4px
8px
16px
24px
32px
48px
06 · 方案展示

方案展示

设计系统核心产出物 — 从 Token 到组件到文档的完整体系架构。

组件库全景与 Token 体系
Button
Input
Card
Avatar
Tabs
✓
Badge
Progress
Toggle
组件库全景：200+ 组件按原子设计方法论分层组织。左侧树形导航，中部组件预览，右侧属性面板。每个组件均标注使用场景、状态变体与代码引用。
Design Tokens
COLOR
--color-primary-{50..900}
SPACING
4px · xs
8px · sm
16px · md
24px · lg
--space-{xs..2xl}
TYPOGRAPHY
Heading Subtitle Body text caption / mono
--font-{display..mono}
Token 变量体系：颜色、间距、字体三大 Token 类别，从基础变量到语义变量两级映射。修改一个 Token 值即可全局更新，实现多主题切换。
组件文档与主题系统
Button
▸ Primary
▸ Secondary
▸ Ghost
▸ Danger
Primary
Secondary
Ghost
<Button variant="primary">
  Click me
</Button>
组件文档 — 预览 + 代码
Light Mode
Dark Mode
主题切换 — Light / Dark
🎨
{}
</>
Figma Token JSON React Code
Figma → Token → Code 工作流
85%
复用率
95%
还原度
×3
效率
核心指标达成

原子设计方法论

Token → 原子 → 分子 → 有机体 → 模版 → 页面，五层架构确保每个组件可独立复用，新项目直接搭积木。

设计-开发对齐

Figma Variants 1:1 映射 React Props，组件文档同时展示视觉预览和代码用法，消除沟通成本。

自动化交付

Figma Token Studio → Style Dictionary → CSS Variables / JS Constants，修改设计 Token 后自动同步到代码仓库。

07 · 交互/动效

交互 / 动效

构建流程

01
定义 Token
02
构建原子组件
03
组合分子组件
04
编写文档
05
团队培训

动效演示

主题切换
组件状态变化
文档导航
08 · 落地成果

落地成果

200+组件数
85%复用率
95%还原度
×3效率提升

组件复用率提升至 85%；设计-开发还原度达 95%；新项目启动设计效率提升 3 倍。

迭代优化历程

  • 一期覆盖 60 个基础组件，被 2 个产品线率先采纳
  • 二期扩展到 200+ 组件，增加暗色主题支持
  • 三期建立自动化 Figma-to-Code 工作流，还原度达 95%
09 · 个人职责

个人职责

设计系统负责人 — 与前端架构师、2 名设计师协作

系统架构设计 Token 定义 组件规范制定 文档体系搭建 团队培训
← 返回作品集
组件库全景概览
200+ 组件按原子设计方法论分层组织，覆盖全部业务场景。
Button
Input
Card
Avatar
Tab 1
Tab 2
Tabs
✓
Badge
Progress
Toggle
原子设计：Token → 原子(Button/Input) → 分子(SearchBar/FormField) → 有机体(Header/Sidebar) → 模板 → 页面，五层架构确保一致性。
Design Token 变量体系
颜色、间距、字体三大Token类别，基础变量到语义变量两级映射。
COLOR TOKENS
--color-primary-{50..900}
SPACING TOKENS
4px · xs
8px · sm
16px · md
24px · lg
32px · xl
TYPOGRAPHY
Heading 1 Heading 2 Subtitle Body text Caption / Mono
两级映射：基础Token (--blue-500) → 语义Token (--color-primary)，修改一个语义Token即可全局更新，支撑多品牌/多主题切换。
组件文档页
左侧变体导航 + 右侧实时预览 + 代码示例，设计与开发一站对齐。
Button
▸ Primary ▸ Secondary ▸ Ghost ▸ Danger ▸ Disabled
Primary
Secondary
Ghost
<Button variant="primary">
  Click me
</Button>
设计-开发对齐：Figma Variants 1:1映射React Props，文档同时展示视觉预览和代码用法，消除跨职能沟通成本。
主题切换 · Light / Dark
基于Token体系的一键主题切换，所有组件自动适配。
Light Mode
Dark Mode
Token驱动：主题切换仅替换语义Token值（如 --bg: white → --bg: #1a1a1a），所有组件自动继承，无需逐一修改。
Figma → Token → Code 自动化工作流
从设计稿到生产代码的全自动化交付管线。
🎨
Figma 设计源文件
{ }
Token JSON Style Dictionary
</>
React Code CSS Variables
Step 1 · 设计

在 Figma 中使用 Token Studio 管理设计变量，所有组件绑定Token。

Step 2 · 转换

Token JSON 通过 Style Dictionary 自动转换为 CSS Variables 和 JS Constants。

Step 3 · 集成

CI/CD 自动同步到代码仓库，开发侧直接引用，还原度达 95%。

核心指标达成
设计系统的三大核心指标全部达标，验证系统价值。
85%
组件复用率
95%
设计还原度
×3
设计效率
价值验证：组件复用率85%意味着新项目启动只需搭积木；95%还原度消除设计-开发反复返工；效率×3让团队可以将精力投入创新而非重复工作。