XD to Flutter 2.0 is now released!

Flutter is Google's open source UI toolkit. Using it, you can develop exquisite applications suitable for multiple platforms such as mobile devices, desktop devices, embedded devices, and web with just one set of code base. In the past few years, Flutter has become the first choice for developers who want to build multi-platform applications. But what designers need is a visual tool to prototype and build Flutter UI, rather than Dart source code, so 160a49b5c87989 XD to Flutter came into being!

It has been nearly a year since the first preview version of this plug-in was launched. During this period, we have been optimizing and improving it through some small updates; now, following the major release of version 1.0 last summer, we have launched version 2.0 of this plug-in to coincide with the release of Flutter 2.

Wait, what is XD to Flutter?

As the name suggests, the XD to Flutter plugin is a powerful and easy-to-use tool that can export your Adobe XD design into concise and effective Flutter code. You can copy the code of specific visual elements from your own design, export various reusable Widgets, and even export some views as a whole.

This means that with the XD to Flutter plug-in, you can make your design run on any device with the click of a button. Although this plug-in cannot complete the coding of the entire application for you, it can give you an excellent start.

XD to Flutter was gskinner and Adobe and released as a plug-in of Adobe XD itself, so you can use it for any existing Adobe XD design you are building.

great! What are the new features?

The original version of XD to Flutter is very helpful in outputting all the different visual elements in the design, such as vector graphics, pictures, rich text, background blur effects, blending modes, shadows and other similar elements, but the output result is static. And not flexible enough.

Although it doesn’t take much effort to grab icons or text styles, we still hope it can be more effective. XD not only allows designers to create dynamic UIs, but also provides tools such as adaptive layouts, scrollable areas, stacks and grids; we hope this plugin can support each of the above features, and in version 2.0, we get A lot of progress has been made.

Responsive resizing

XD to Flutter supports XD's responsive layout function. You can "fix" an element within its parent element and precisely control how it adjusts its size.

Responsive design in Adobe XD

Responsive design in Flutter

Flutter uses the adobe_xd open source software package to achieve this function, and developers can directly use it in their projects.

Pinned Widget code example

stack and scroll group

"Stack" and "Scroll Group" allow developers to use some new ways to dynamically layout screen content in Adobe XD. Through the "stack" in XD, you can arrange a bunch of various elements in a horizontal or vertical list, with different spacing between the elements; compared to the Stack Widget of the same name, the "stack" is more similar to the one in Flutter Flex Widget.

As you might expect, with "scroll group", you can directly define an area in your design to scroll a large group of content horizontally or vertically.

XD to Flutter version 2.0 supports these functions and can convert them into common Flutter Widgets ( Column , Row and SingleChildScrollView ). You can even put a stack into a scroll group to easily create a list of scroll items.

Stack and scroll groups in XD (left) and Flutter (right)

and background elements

Another new feature is background elements, that is, you can specify a visual element as the background of another group of elements. Background elements can be paired with padding to define the distance between the edge of the background and its content.

The Flutter export tool uses Stack Widget to layer the background elements behind the content, while the latter is placed in a Padding Widget.

Padding and background in XD (left) and Flutter

Flutter 2 and empty safety mechanism

It is with the above layout functions that a more responsive UI can be achieved, and Flutter 2's support for platforms such as desktop devices and the web has also been enhanced.

Flutter 2 also introduces a sound empty safety mechanism. This language feature can help developers catch the problem of non-nullable variables but empty, and avoid them from causing problems in applications. XD to Flutter version 2.0 includes a new setting "Export Null Safe Code"; selecting this setting when exporting ensures that the generated code will be available in the future.

"Export Null Safe Code" setting and output

sounds great! How to get started?

Whether you want to use it to replicate the code of a delicately conceived gradient effect, or to export a fully responsive, parameterized, interactive Widget, it is very simple, but it is added to thousands of XD to It's just an army of creative professionals for Flutter plugins.

All you need to do is select "Browse Plugins…" from the "Plugin" menu of Adobe XD, then search for "Flutter" (strangely, searching for "XD to Flutter" does not work), or go to adobe .com/go/xd_to_flutter , you can install this plug-in.

After installation, open the XD to Flutter panel from the plugin panel and click the "Need help" link, you can check plugin documentation (plugin help documentation).

We have always focused on creating beautiful applications that can actually run on any platform, and Flutter 2 is a gratifying step we have taken on this framework. gskinner teams are very happy to be able to work with Adobe and Google to ensure that XD to Flutter further simplifies the process of converting designs into operational products.