background

Today, Google introduces XD to Flutter 2.0, which can directly convert design drawings into Flutter code. For more details, see XD to Flutter 2.0 now available!

Design drawing to code is not a new thing, domestic Meituan Ali and other companies have also done some research on design drawing to code:

Meituan design draft (UI view) automatic code generation scheme exploration

Ali blockbuster series of articles! UI2CODE intelligently generates Flutter code — Overall Design part

Today I will try XD to Flutter by Gskinner’s team

The preparatory work

  1. Download XD: www.adobe.com/cn/products… (XD is paid software and can be downloaded for trial)

  2. After XD has been installed, open the software and search for “Flutter” in the menu bar – Plug-ins. Then download and install XD to Flutter.

  3. Get your XD files ready, you can ask the designer for one, or download one through xdfile.com/

  4. Install the Flutter project plugin:

Dependencies: adobe_xd: ^ 1.0.0Copy the code

Air safety use 2.0.0, see: github.com/AdobeXD/xd-…

To start generating

Click on the menu plugin -xd to Flutter to open the plugin:

Click on the Exprot All Widgets in the lower left corner to automatically convert All of your designs into DART files:

There are other options, such as specifying the location of the project, the directory where the code is generated, whether it is null safe, and so on.

At this point the code is fully generated, so let’s look at how to use the code.

use

< span style = “font-size: 10.5pt; line-height: 20px;

Open a random file:

Widget files are found to be laid out using a Pinned class that we added to Adobe_xd in preparation.

The picture

XD to Flutter does not automatically export images. By default, images are empty, but there is a hint about what Image resources you need to add to the Flutter. This is not helpful:

Pinned. FromPins (Pin(size: 216.0, start: 0.0), Pin(size: 123.0, end: 24.0), child: // Adobe XD layer: 'imgbin_vegetarian - c... ' (shape) Container( decoration: BoxDecoration( image: DecorationImage( image: const AssetImage(''), fit: BoxFit.fill, ), ), ), ),Copy the code

Maybe it was my wrong posture. I wonder if any students know how to automatically associate pictures. We completed several picture references manually.

So we’re done at this point, so let’s run it and see what happens

The effect

The design

Android Mi 10 Youth edition

IOS iPhone 12Pro Max emulator

Web Chrome

It can be seen that the overall style reduction degree is quite high, and the performance is still good on each end.

conclusion

Have a look at its code, it mainly uses Pinned and Pin layout to position and describe the size, and then describes the rest of Flutter via its own controls. The overall experience is good and the degree of restoration is very high.

However, directly generated code is not available, so you need to manually modify the image. Github also mentioned this, in order to optimize the export, so it does not support directly exported image:

In order to optimize export, images are not exported with widgets. Only images with a name assigned in the plugin panel can be exported. Select an image and click "Export Image", or use the "Export All Images" button to export all images with a name to the Image Path.
Copy the code

The two automatic code generation schemes of Meituan and Xianyu focus on the algorithm and principle of generation process as well as AI machine learning, but they are not open source at present.

XD to Flutter currently only supports XD. We can borrow its ideas and support Other design software such as Sketch, PS, etc.

Code warehouse

Github.com/siyehua/xd_…

The resources

The plugin’s website

XD to Flutter 2.0 is now available!

Meituan design draft (UI view) automatic code generation scheme exploration

Ali blockbuster series of articles! UI2CODE intelligently generates Flutter code — Overall Design part