可配置組件庫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 以及小程序用的組件暫無排期......