可配置组件库 Fusion Design 了解一下

前不久那篇爆🔥的文章阿里重磅开源中后台 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 仓库地址: https://github.com/alibaba-fusion/next 文档见: https://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+ 项目。

Fusion Design 和飞冰 (ICE) 是什么关系？

ICE 是 Fusion 的好基友。 Fusion 解决的是前端与设计师的协同问题。 ICE 解决的是前端开发的效率问题。通过海量可复用物料，配套桌面工具极速构建前端应用，提升开发效率。 Fusion 与 ICE 的合作主要体现在以下几点:

ICE 官方 react 物料使用fusion 组件库作为默认组件库
Fusion 推荐使用 ICE 的 GUI 客户端 Iceworks 作为首选开发工具
ICE 官方 React 物料和 Fusion 官方物料是互通的(春节前完成)，双方共同丰富物料生态,推动区块 /模板物料的开发模式落地。

设计师使用 FusionCool 创作的设计稿能不能导出成代码?

FusionCool 导出的 HTMl,是带标注的设计稿。设计稿想要转换成代码, "路漫漫其修远兮,吾将上下而求索"。想要直接导出代码,短期内还做不到。Fusion 团队目前在这方面也有投入和摸索。可以期待一下。

Vue 用户可以用 Fusion Design 么?

Fusion 组件库是基于 React 技术栈实现的。但是 Fusion Design 的组件配置能力和组件的技术栈是无关的。只要一套组件库按照 Fusion Design 组件开发规范进行开发,就可以接入到 Fusion Design, 获取配置能力。 ElementUI 团队已经开始 Fusion Design 配置能力的对接工作，敬请期待....

移动端可以用 Fusion Design 么?

Fusion Design Mobile Web 组件正在开发中，React Native、Weex、flutter 以及小程序用的组件暂无排期......