Fusion Design 框架调研
本文最后更新于：2026年3月29日 中午
Fusion Design 框架调研
这篇是对 Fusion Design 做的一轮调研，主要想弄清楚两件事：
- 这套体系到底包含什么。
- 它的主题能力值不值得在项目里落地。
如果只把 Fusion Design 理解成一个 React 组件库，其实会低估它。它更像是一套围绕“设计系统”展开的工具链。
Fusion Design 到底包含什么
Fusion Design 大致可以拆成下面四块：
1. 组件库 @alifd/next
仓库：
https://github.com/alibaba-fusion/next
文档：
https://fusion.design/pc/doc/component/102?themeid=1
这部分最容易理解，就是组件库本身。它提供了 50 多个常用组件，整体能力和 Element、Ant Design 这类成熟组件库相比，没有本质差距，常规业务开发基本够用。
2. Fusion 站点
Fusion 站点更像是这套体系的“主题中心”。
在这里可以配置组件的颜色、大小、圆角等主题参数，调整完成后发布出去，最后生成一套可安装的主题包。前端 React 项目再去安装这个主题包，就能把整套视觉风格统一起来。
从设计系统的角度看，这一步是 Fusion 跟普通组件库拉开差距的地方。它不只是提供组件，还试图把“主题”也平台化。
3. FusionCool Sketch 插件
这个插件的作用是把设计侧也纳入同一套体系里。
设计师在 Sketch 里安装插件之后，Fusion 站点里配置好的组件样式可以同步过去。这样做的好处很直接：设计稿里用的组件和前端开发时用的组件尽量保持一致，减少设计稿和实现之间的偏差。
4. Iceworks 客户端
Iceworks 也是 Fusion Design 生态的一部分，我主要看了它的两个能力：
- 通过模板快速创建项目。
- 通过拖拽组件快速生成页面。
模板创建项目这件事，方向其实挺好。它不仅帮你把项目结构搭好，还顺手生成了一批页面。
不过现实里大多数项目的页面结构差异都很大，所以更理想的做法，往往是只帮忙创建项目骨架、装好必要依赖，具体页面还是按业务自己来。对于一些赶工的临时项目，这套模板方案会比较有吸引力。
拖拽组件生成页面我也试了一下，但是成熟度还不够高，实际使用体验一般，暂时还不到能拿来做主力方案的程度。
我重点关注的：主题体系
其他组件库一般怎么处理主题
先拿大家更熟悉的组件库做个对比：
- Element 的主题大致有两种做法。第一种是在项目里直接覆盖样式变量；第二种是通过在线工具调整颜色等参数，再把生成后的主题下载到本地引入，本质上仍然是变量覆盖。
- Ant Design 的思路更接近第一种方式，也是通过自定义变量去覆盖默认值。
这类方式的优点是简单直接，改起来快；缺点是设计侧和开发侧往往还是两套东西，主题更多是前端工程上的一层覆盖。
Fusion 的主题使用链路
Fusion 的想法要再往前走一步，它想把“主题”变成一条完整链路：
- 先在 Fusion 站点里配置组件主题，比如颜色、大小、圆角等。
- 配置完成后把主题发布成 npm 包。
- UI 在 Sketch 里安装 Fusion 插件，使用同一套主题组件去设计页面。
- 前端在项目里安装主题包，直接消费这套主题。
这套链路最大的价值，是设计和开发理论上可以围绕同一套组件体系协作，而不是设计稿一套、前端实现一套。
这套方案的优点和限制
优点
如果团队本身就是 React 技术栈，而且对设计系统投入比较重，那 Fusion Design 确实有几个明显优势：
- 统一组件库和主题规范，减少页面还原成本。
- 设计稿和开发组件尽量保持一致，沟通成本会低一些。
- 对中后台这类页面结构相对稳定的系统，标准化收益会更明显。
从前端开发流程来看，很多时候真正花时间的并不只是“拼页面”，而是把组件的大小、颜色、圆角、间距这些视觉细节一点点还原出来。Fusion Design 主要就是在优化这一步。
限制
但它的问题也很明显：
- 它是基于 React 的，Vue 项目没法直接复用这套体系。
- 它的主题能力要真正发挥作用，设计工具、主题平台、组件库、项目工程最好是一起配合的，接入成本并不低。
- Iceworks 的拖拽生成页面能力还不够成熟，不太适合直接拿来做核心生产力工具。
所以这套方案不是“装个组件库就能立刻起飞”的类型，它更适合已经有设计系统意识、并且愿意投入整套流程建设的团队。
最后的结论
站在公司的技术背景下看，这套方案最后没有继续推进，原因：
- 公司主力技术栈是 Vue，不是 React。
- 现有项目大多已经成型，迁移成本很高。
- Fusion Design 的优势更适合从新项目、尤其是 React 中后台项目开始。
如果团队本身就是 React 技术栈，而且希望把设计系统、主题管理、设计协作一起收进同一套体系里，Fusion Design 其实是值得继续深入看的；但如果现状是 Vue 项目为主，那短期内确实没有太大必要强行引入。