On December 16, 2018, Fusion was opened to the public at the year-end ceremony of OSC Shenzhen Originator Conference. This product, which has been running inside Ali for three years, was finally officially opened to the public.
Some students in the industry may have heard about Ali’s Fusion Design from some channels
-
For example, this article about Ali’s latest artifact, Fusion Design, has been very popular since 2016
-
For example, how does Alibaba’s Fusion Design operate, which has been hotly discussed on Zhihu for 17 years?
-
It may also come from zhou Yuan’s sharing on d2 forum in 2016
It has been two years since our last announcement, and we have made some breakthroughs in the field of technology. Let’s focus on our breakthrough this time. But before introducing, I would like to mention what Fusion does. After all, many of you have heard it for the first time.
1. What does Fusion do
1.1 Solve the problem of coordination between designers and front-end work
Generally, the on-line process of a project has to go through the following stages: review, design, development and test.
And each stage can be further into the split, roughly as follows:
-
Review: Business interaction (product functional interaction), review of business logic
-
Design: Design specification (designer’s definition of the whole product in the visual specification), visual design (drawing visual draft), annotation draft (output annotation to the front end)
-
Development: The front end typically has a component library; However, the component library may not correspond to the brand of its own business line (for example, Ali Orange, Sky Blue, almost any business line will have its own brand), so the first step needs to do UI customization at the component level, and then the development of business logic.
-
Testing: The most common scenario is that the designer sits down with the front end for two days to do a UI reduction review; Business logic testing is a must-do process.
Here we highlight two problems in the process.
Problem 1: Rework
The parts of this that are highlighted in yellow may indicate duplication of work between lines of business
-
For example, the interaction between the middle and background UI is determined;
-
For example, design specifications can be inherited and extended from a base specification.
-
For example, annotations can be standardized uniformly through plug-ins, while visual restoration and reducibility review are the most important parts for designers. However, after finishing the design draft, it is only the first step, and we still need to find the front-end to adjust the real page again.
Problem 2: Synergy problem
Synergetic problems, the above zhihu link inside Zhou Yuan’s answer has been very clear, I will summarize the next.
-
The perception of the concept is different because of the tools used
The understanding of shadow is different
-
The difference between the designer’s ideal and the reality of the front end
Margin-top :12px but the resulting spacing is inconsistent
-
Every once in a while the brand will be upgraded and the basic UI will be revamped, which brings a lot of work
-
The norms agreed between designers are not well implemented, and the design drafts already designed are shared by everyone
-
Developed components and modules are not well shared and reused within the team.
Fusion workflow
Eliminate repetitive processes and focus only on the business
-
Designers are more convenient to do design
-
The front end only cares about the business logic
From the abstract skeleton DPL -> Components and templates customized to the UI through platform customization output -> drag and drop into the designer’s tools -> Use the customized components directly in the front end (no need to focus on the component UI)
-
Designers use the same set of specifications of components, the output of the design draft is the same set of specifications. (The name of the sketch plugin is FusionCool.)
-
The front end does not need to focus on component UI reducibility. (Restore degree problem = design configuration problem)
1.2 No longer need to do things from 0 to 1
-
On the design side, the FusionCool plug-in is used to design pages and precipitate templates that have been designed
-
The development side uses the development tool (Iceworks) in the project can use the ready-made modules, and can precipitate the completed modules
In the future, when Fusion module templates are extremely rich, it will be convenient to find module templates in various fields to use, and there is no need to build from 0
2. Fusion ability points
One platform, two ends
One platform: Fusion.design
Two tools: Iceworks for developers and FusionCool for designers
2.1 A Platform
https://fusion.design can customize your own Design System (hereinafter referred to as DS)
Create your own Design System
Everyone can through https://fusion.design/sites/new or team can create your own site
To create the site
The site offers three capabilities: document editing, topic management, and material hosting
Document editing
Store designer documents and development documents
Design/development documentation
Topic Configuration Management
Integrates the ability to manage, customize, and publish topics for components (hereafter referred to as the configuration platform)
Materials are managed
Developed blocks and templates can be used
Block – code snippet
Formwork scaffold
2.2 Two toolends
2.2.1 Designer Tool – FusionCool
After the theme is published, the Plugin FusionCool of Sketch is available. Designers can search all iconFONT materials, use the configured components, and use the module templates of the site in FusionCool.
2.2.2 Developer tool – Iceworks
Iceworks is a GUI tool developed by Taobao Feibing team for front-end developers. Developers do not need to pay attention to environmental problems and have a large number of materials available. At present, it has been connected with the material system of Fusion and can easily use the materials of Fusion site.
Each site has its own material source
You can configure the material source address directly in Iceworks
Project development
3. Technical implementation of Fusion
Next component
Fusion Next is a PC component library implemented based on React, which has been in alibaba’s internal service for three years.
Making address: https://github.com/alibaba-fusion/next
This open source version has been reorganized and optimized in the last year based on the experience and feedback of the previous two years. Has the following features
Ease of use
Compared with the previous version of 80 + features, 300+ optimization, the overall code volume of the component is reduced by 30%
-
next.min.js 910KB -> 702KB
-
next.min.css 428KB -> 337KB
A total of 50+ components, packaged only 700 K, which is currently one of the few components in the industry capable of doing this. Clear dependencies between components and high reuse are also reasons for the small size.
The stability of
The single-test coverage rate of the components is nearly 90%, and there has been no online accident since the service was provided.
Ability to enhance
Full support for internationalization, RTL and accessibility.
In addition, a lot of performance optimization has been made for the scene of large data volume of middle and background forms. For example, the render of common table will be slower and slower with the continuous increase of data, which is roughly as follows:
Next introduced virtual-list, currently used in table and SELECT, two of the most frequently used components. Due to the large amount of data (1W nodes tested), only the nodes that need to be displayed are rendered (say 20 nodes), so the rendering time can always be controlled within
0.3 sWithin.
0.3 sWithin.
FusionCool
Lossless restoration of code to visual draft
Break through the drawback of HTML2SVG and achieve lossless reduction
A year ago we were able to convert components from the theme configuration platform directly to SVG files using HTML2SVG technology, allowing designers to use them directly in Sketch. However, the drawback of this scheme is that the reduction degree is not enough (about 95% reduction degree).
Html2svg reduction degree problem
The main reason is that there is no one-to-one correspondence between the HTML box model and the SVG transformation, so there are always bugs to fix. While 95% is good, it’s totally intolerable on the design side.
Therefore, the Fusion project team finally broke through the reduction degree problem after nearly half a year’s efforts. The flow chart is as follows
Instead of exporting HTML from the configuration platform, FusionCool exports DesignToken. The underlying component of FusionCool uses The React-Sketch capability provided by Airbnb to write a Next component, overwriting the default variables directly through DesignToken. Finally render in Sketch in real time.
Component types, sizes, and contents can be configured directly in the panel
The chart configuration can directly evoke the configuration panel
Any click on the Sketch side can be generated in the FusionCool configuration panel via an Event.
4. The Fusion of the future
-
We will make the material warehouse of Fusion extremely rich in the next six months, which can cover various fields. So designers and developers don’t have to do 0-1 anymore.
-
We hope to break through the technical difficulties of converting visual artwork to code and make it possible to convert visual artwork to usable code.
A link to the
-
Fusion site: fusion.design/
-
Next Github Repository: github.com/alibaba-fus…