工程思维的组件化革新

前期调研

背景分析

企业级产品和系统的复杂度持续增强，组件搭建的瓶颈开始显现：它更关注组件本身，却难以回答协作效率的问题。我们希望将其升级为基于工程化思维的组件协作流程，让设计团队释放更多价值。借由这次组件库改版，我们尝试通过搭建工程化的设计系统，协助设计团队从「支持型团队」转变为「业务驱动型团队」。

组件库现状问题

各家设计团队都投入大量精力整理自家设计规范，但「设计系统」重在统一体验而非设计提效。安心筑旧版组件设计系统也有同样的问题：

问题	详情
组件库质量不高	分类与变体不全、使用场景不清、维护困难，拖慢设计效率，落地后一致性问题频出
组件管理混乱	更新与反馈滞后、组件难寻、同一场景多种方案，沟通与设计成本反复增加，协作效率低下
跨部门协作困难	组件抽象脱离业务，研发认为不值得开发、产品认为覆盖不全，组件库难以落地，浪费产研成本

这些问题长期得不到解决：旧版开源组件库只能反复打补丁，组件体量持续膨胀，设计自由度与拓展性严重受限。

解决策略

调研后我们发现：以 Figma 为载体构建工程化组件协作流程，既能搭建设计系统，又能推动团队分工转型，提升产研协作效率。

设计工程化的最终成果，是将这套标准分类管理，通过前后端一体化完成从组件库到设计语言的结构化体系，从容应对持续变化的迭代需求。

汲取旧版经验后，我们决定从「组件搭建、设计资产管理、团队协作」三个维度针对性实现：

步骤	方案
组件搭建	搭建可装配的组件，沉淀业务场景模板，提升组件质量
资产管理	通过 Figma 工具制定组件管理规范，规范文档管理流程，降低设计研发沟通成本
团队协作	将设计、研发和产品三方均纳入组件库使用流程，统一组件认知与标准，提升跨部门协作效率

更改后的组件库工程化管理清晰有条理：这些资产大幅减少了设计师的「搬砖时间」，让团队把精力转向业务洞察与深入思考，真正为业务创造价值。

构建组件库工程

Design Token 与组件工程

传统设计系统由规范与资产组成，难以与上下游协作管理。我们需要重新梳理组件库要素，搭建更合适的组件库框架，在提效的同时降低沟通成本。

如何完成设计系统到设计工程化的转变？Design Token 是打通设计研发链路的钥匙：引入后，设计与研发基于同一套 Token「同频」协作，设计效果更有保障。

新设计系统基于 Figma 搭建：组件的各类交互形态通过 Variants 定义，由设计师直接把控；颜色、文本、图层样式统一沉淀为可复用样式，系统的维护与资产的共享都在 Figma 内完成。

最终，组件库将以 Variables 承载 Design Token，并逐级落地到组件与资产，达到工程化的目的。

搭建组件库

基于上述策略，我们从头梳理组件库要素，搭建了一套六层框架：从底层的 Design Token 到顶层的工程化工作流，每一层职责清晰、可独立迭代，为设计提效与跨团队协作打好地基。

框架层	方案	实例
Design Token	为颜色、间距、字体、圆角、阴影等基础参数赋予 Design Token，统一 iOS、安卓、H5 三端体验，为设计提供行为准则与交互指导。
Variables 变量库	所有 Design Token 录入 Variables 变量库，无需其他文档维护。调色盘、间距、圆角、阴影等参数统一创建，供设计与研发按场景调用。
原子组件	全部由 Design Token 拼接而成：按钮除宽高外均引用 Token。原子组件更灵活、高效、可扩展
可装配的复杂组件	按业务诉求拆解为插槽，可自由填充、置换原子组件。如导航栏拆为左、中、右三个插槽，按需替换，实现工程化与场景化
业务场景模板	将高频复用的功能抽象为场景级解决方案，含信息架构、交互规范与响应模式，大幅提升产研协同效率。使用时需遵守业务场景约定，如下图人员选择器所示
工程化工作流	以规范搭建工程化设计系统，与研发协作实现前后端一体化；业务诉求可被快速响应，方案快速迭代并落地客户端。

工程化管理设计资产

框架搭建完成后，需要对资产分类管理——整洁的「办公区」让设计师身心愉悦，更方便后续查询与维护。我们按使用场景将设计资产分为以下几类：

范围	方案
基础样式	约定基础样式、间距布局和文案表达等基础规范，规定设计系统基础标准
组件集合	将组件分为通用、导航、控制、数据展示、数据输入、反馈，快捷调用组件
场景模板	抽象产品中高度复用的功能模块，设置为场景模板，提升设计效率
其他资产	包含团队内的字体资源、插图资源，丰富设计质量

回望旧版：近两年只能对开源组件库反复打补丁，组件体量持续膨胀，设计自由度受限、难以灵活拓展，严重阻碍产品创新与升级。

打造跨部门协作流程

组件库就位后，协作流程随之升级：从底层逻辑到管理方法，全面遵循软件开发的标准流程：

范围	方案
产品团队	负责定义业务问题与优先级，基于组件库快速拼装原型验证方案，将核心场景沉淀为可复用的产品功能
设计团队	主导组件规范与体验标准，维护 Design Token 与组件库的日常迭代，为业务需求提供设计策略
研发团队	负责组件库的工程实现与前后端一体化封装，保障组件的性能、可用性与版本管理

产研团队均从组件库中获益，跨部门协作更顺畅，整体产研效率显著提升。

过去所有需求都从 0 到 1，效率低下，设计资源被琐碎需求占用；现在业务诉求被拆分为日常需求与核心业务：

目标	描述
快速迭代日常需求	常规需求直接调用组件与场景模板完成拼装，从需求评审到设计交付的平均耗时由 3 天缩短至 1 天
设计自驱提升价值	设计师从重复绘图中释放，投入业务洞察与体验创新，自驱方案可直接沉淀为新的组件资产

改版结果

成果与收益

改版落地后，这套组件库支撑了 3 条产品线的业务迭代，沉淀组件 200+，页面组件复用率达到 80%，设计交付效率提升约 40%——过去「每个需求从 0 到 1」的局面不再出现。

同时，设计师凭借高质量组件快速走查存量业务，统一旧版页面中不合理、不一致的设计。以新增记工优化为例：旧版组件库不适配业务，页面场景模糊、流程难懂；如今基于新组件库快速梳理场景、模块化信息，实现高效迭代：

另一种情况是深入业务后的探索式设计。以记工详情为例：旧设计用卡片列表堆砌全部字段；新组件库不仅统一了组件规范，更通过卡片分类与排版凸显「派发人到接受人」这一用户真正关心的关系，大幅提升设计质量。

随着组件库持续完善，设计团队将更快交付基础业务，把精力投入业务探索与价值挖掘，驱动商业增长，最终实现：

成果	收益
团队效率大幅提升	设计师聚焦业务增长，研发敏捷开发，产品直接拼接组件输出策略，品牌运营也能自助获取素材——高效协作已成常态。
跨部门、跨产品线统一	组件库不仅是效率提升，更为产品内循环提供统一基准，支撑多产品线规范整合，快速孵化新产品、新业务。

结语

这次组件库工程化改版由我独立负责：从现状调研、策略制定，到 Design Token 体系与六层框架的搭建，再到组件库在业务中的落地推进。感谢一路并肩配合的产品与研发同事们——正是大家的信任与支持，让这套体系从方案走进了真实业务，也让我对「以工程化思维做设计」有了更深的理解。

参考文献

• 组件化框架简介
• 前端工程化详解
• 从组件化角度聊聊设计工程化
• 组件化思维—— 适应并推动业务及产品变革的设计案例
• 用 Figma 搭建可装配设计系统
• 全面解析 Design token 在设计系统的运用
• Getting started with native design tokens in Figma
• Material Design 3