可配置组件库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 仓库地址: 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 提供如下素材:

1. 基础组件
2. 图标 Icon
3. 图表
4. 模块
5. 模板

其中 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 个步骤。

1. 设计师配置完成一个 Design System,并发布。得到 Sketch Symbol 和 Fusion 组件库主题包
2. 设计师使用 Sketch 创做设计稿。
3. 工程师安装 Fusion 组件库 与 设计师给予的 主题包。
4. 工程师 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 的合做主要体如今如下几点:

1. ICE 使用fusion组件库做为基础组件库
2. Fusion 推荐使用 ICE 的 GUI 客户端 Iceworks 做为首选开发工具
3. ICE 官方 React 物料和 Fusion官方物料是互通的,双方共同丰富物料生态,推进区块/模板物料的开发模式落地。

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

FusionCool 导出的 HTMl,是带标注的设计稿。

设计稿想要转换成代码,"路漫漫其修远兮,吾将上下而求索"。想要直接导出代码,短时间内还作不到。Fusion 团队目前在这方面也有投入和摸索。能够期待一下。

Vue 用户能够用 Fusion Design 么?

Fusion 组件库是基于 React 技术栈实现的。可是 Fusion Design 的组件配置能力和组件的技术栈是无关的。 只要一套组件库按照 Fusion Design 组件开发规范进行开发,就能够接入到 Fusion Design, 获取配置能力。

目前尚未vue组件库接入Fusion Design设计体系，若是你想让你的vue组件库接入进来，欢迎联系讨论~

移动端能够用 Fusion Design 么?

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