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.

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…