可配置组件库Fusion Design 了解一下-CSDN博客

前不久那篇爆?的文章阿里重磅开源中后台UI解决方案 Fusion,相信大家很多人都看过。不少同学使用过 Fusion Design。 Fusion Design 整个体系还是比较庞大的。接下来笔者从一个小白的角度科普 Fusion Design.

Fusion Design 体系

Fusion Design 主要就是4个组成部分

组件库 @alifd/next
Fusion站点
FusionCool Sketch插件
Iceworks 客户端

组件库

@alifd/next (后文中简称为 Fusion 组件) 是一套基于 React 的组件库, 我们内部称之为骨架 DPL(Design Pattern Library)。 Github 仓库地址: github.com/alibaba-fus… 文档见: fusion.design/component

简单安利一下 Fusion 组件的基本特性：

组件丰富 50+个组件,覆盖绝大多数场景
体积小 next.min.js 702 KB next.min.css 337 KB
组件单测覆盖率近 90%

当然,拥有以上的特性只能保证 Fusion 组件可以放心地用在生产环境,不输任何现有的主流组件库的体验。另外,Fusion 组件的杀手锏,最强大的一个能力:

主题配置能力，可以通过 Fusion 站点可视化配置主题
主题配置能力，可以通过 Fusion 站点可视化配置主题
主题配置能力，可以通过 Fusion 站点可视化配置主题

重要的事情说三遍。

Fusion 站点

Fusion 站点是 Fusion Design 管理等能力的集散地。

主要提供以下能力:

自有站点管理
主题配置
其他能力,就不在这篇入门文章一一详述

自有站点

简单理解自有站点就是用户自己创造的一个集合，主题、物料都必须依附于站点。一个站点可以有多套主题,多种物料，多个成员。站点管理管理能力包含新建站点、站点成员管理、主题管理、物料管理。这个就不一一细说,本文后续涉及到的会细说。

主题配置

主题这个词用的一看笔者就是一个前端。用设计师领域,这个类似东西叫做 Design System。在 Fusion Design 站点上, 设计师可以基于 Fusion Design 官方的 Design System 改造成自己专属的 Design System。每个Design System 就是一个自有站点。一个自有站点可以拥有多个主题。主题配置可以编辑 Design Token (这也是设计师语言,前端同学可以把这个等价于 SCSS 变量), 生成主题。

编辑完成主题 并且发布,并且发布,并且发布 (重要事情说三遍),设计师可以获得两样东西:

主题代码包,可以直接提供给前端使用
基础设计素材, 可以通过FusionCool插件直接在Sketch中使用

目前Fusion Design提供4套官方主题

对外正式开放短短一个月,新建 2500 个站点,已经沉淀 2800+ 套主题。阿里集团内, 天猫 MUI、淘宝 ICE Design、阿里云 Wind、盒马鲜生 Hippo、菜鸟 Walle 等 Design System 都是基于 Fusion Design 深度定制, 满足各个 BU 不同的业务需求。目前集团内服务 40+ BU、项沉淀主题 1500+ 套,服务 2000+ 项目。

物料管理

即可以管理设计师的物料,也就是设计师自己画的设计素材。也可以管理前端程序员用的代码。

文档

帮助文档无需赘言,主要是站点、Fusion 组件、FusionCool 的文档,以及设计师阐述设计理念的文档。

FusionCool

FusionCool 是一个 Sketch 插件, 辅助设计师做设计稿。 FusionCool 提供以下素材:

基础组件
图标 Icon
图表
模块
模板

其中 1-3 是根据设计师在配置平台完成的 Design System 自动生成的, Design System 中的某个主题发生变动并且发布以后, FusionCool 中的设计素材就会自动跟着变化。 4-5 素材,目前都是 Fusion Design 官方设计师手绘。

后续设计师自己完成的设计素材也支持通过 FusionCool 导入 Design System,可以很方便地复用。

Iceworks 客户端

Fusion 组件库本身是不依赖任何脚手架, 完全可以通过 cdn 引入，或者整合到 create-react-app 。Fusion 组件库为了方便应用到前端项目,需要一个快速帮忙生成工程项目的脚手架。

ICE 团队开源了 ICE 体系的一系列产品,Fusion Design 把 Iceworks 作为 Fusion 官方主推的开发工具。

Fusion Design 完整工作流程

介绍过 Fusion Design 的 4 大部分。再来说说在 Fusion Design 体系下,工程师和设计师配合,简单来说就 4 个步骤。

设计师配置完成一个 Design System,并发布。获得 Sketch Symbol 和 Fusion 组件库主题包
设计师使用 Sketch 创作设计稿。
工程师安装 Fusion 组件库与设计师给予的主题包。
工程师 Coding 实现设计师的稿件

画成简图如下:

上图就是由 FusionCool 辅助创作完成

更详细的步骤见流程图:

常见问题

Fusion 开始大规模推广也有一段时间了,下面选几个FAQ回复一下。

Fusion Design 和 Ant Design 有什么差异?

简单地回答就是 Ant Design 是一套组件库, Fusion Design 是一个组件库生成工厂。

Ant Design 是一款很优秀的组件库,在社区深受欢迎,影响力极大。代码质量优秀,Fusion 组件库在开发过程中也有所借鉴。Fusion Design 也在阿里内部沉淀打磨了三年, 覆盖大量的BU和业务场景。单从组件库的层面而言, Fusion和AntD的体验差异不大。

参与过SEE Conf的同学都会为AntD优秀的设计理念所折服。可是一千个人眼里有一千个哈姆雷特,各个公司(BU/部门/产品线)对于美的认知是由差异的,而且业务形态的不同也对设计风格有着不同的要求,所有各个公司(BU/部门/产品线)对组件库默认的样式进行定制就常常成为刚需。当用户想要定制组件库的时候, AntD就不是特别方便，需要前端工程师大量修改LESS变量,反复与设计师确定设计稿还原的准确性。AntD 定制主题 / Issue: support dark theme

Fusion 组件库由集团多个 BU 的设计师共同参与设计的，目标是帮助每个 BU 都能定制属于自己的 XXXX Design。所以 Fusion Design 会在 UI 的定制能力上比 Antd 设计得更为通用，以满足各业务线的定制能力。设计师通过Fusion Design 的平台,能够可视化编辑 Fusion 组件库的样式，全程无需工程师参与。

阿里集团内, 天猫 MUI、淘宝 ICE Design、阿里云 Wind、盒马鲜生 Hippo、菜鸟 Walle 等 Design System 都是基于 Fusion Design 深度定制, 满足各个 BU 不同的业务需求。目前集团内服务 40+ BU、项沉淀主题 1500+ 套,服务 2000+ 项目。