Announcing XD to Flutter v2.0!

Giving designers a fast path to production Flutter code

Grant Skinner
Apr 29 · 5 min read
XD to Flutter

Flutter is Google’s open-source UI toolkit for building beautiful apps for mobile, desktop, web, and embedded devices from a single codebase. Over the last couple of years, it has become the leading choice for developers who want to build apps for multiple platforms; but designers need a visual tool for prototyping and creating Flutter UI, rather than handcrafting Dart source code. Enter XD to Flutter!

It’s been almost a year since the first preview release of the plugin, and we’ve continued to refine and improve it with a handful of minor updates, a major v1.0 launch last summer, and now a v2.0 release to match with the launch of Flutter 2!

Wait, what is XD to Flutter?

The name probably gives it away, but the XD to Flutter plugin is a powerful, easy-to-use tool to export your stunning Adobe XD designs into clean, functional code for Flutter. You can copy code for specific visual elements from your design, export reusable widgets, or even entire views.

That means that, with the XD to Flutter plugin, you can get your designs running on virtually any device with the click of a button. It’s not going to code your whole app for you, but it’ll give you a head start.

XD to Flutter is built by gskinner in partnership with Adobe, and is published as a plugin for Adobe XD itself, so you can use it with any existing Adobe XD design you’re building.

Awesome! So what’s new?

The initial release of XD to Flutter had great support for outputting all the different visual elements in a design — vector graphics, images, rich text, background blurs, blend modes, shadows, and similar — but the result could be static and inflexible.

While it was handy for grabbing an icon or text style, we wanted it to do more! XD empowers designers to create dynamic UIs, with tools like responsive layout, scrollable areas, stacks, and grids; we want the plugin to support every one of those capabilities, and with v2.0 we’ve made a lot of progress.

Responsive Resize

XD to Flutter supports the responsive layout features of XD, which lets you “pin” elements within their enclosing parent and precisely control how they resize.

Responsive design in Adobe XD
Responsive resize in Flutter

This is achieved in Flutter by using a custom Pinned layout widget in the open-source adobe_xd package that developers can leverage directly in their projects.

Pinned widget code example

Stacks & Scroll Groups

“Stacks” and Scroll Groups provide new ways to lay out content on-screen dynamically in Adobe XD. Stacks in XD let you arrange a bunch of different elements in a horizontal or vertical list, with varying spacing between them; they are more similar to a Flex widget in Flutter than their namesake Stack widget.

Scroll Groups predictably let you define an area to scroll a larger group of content vertically or horizontally, right inside your design.

XD to Flutter v2.0 supports both of these features, converting them into common Flutter widgets (Column, Row, and SingleChildScrollView). You can even put a stack into a scroll group to easily create a scrolling list of items.

Stacks & Scroll Groups in XD (left) and Flutter (right)

Padding & Background Elements

Another new feature is background elements, which let you designate a visual element as the background for a group. This can be paired with padding to space the background’s edges from the content.

The Flutter export uses a Stack widget to layer the background element behind the content, which is placed into a Padding widget.

Padding & Background in XD (left) and Flutter (right)

Flutter 2 & null safety

The layout features described above enable much more responsive UI, complimenting Flutter 2’s increased support for form factors like desktop and web.

Flutter 2 also introduces sound null safety — a language feature that helps developers catch nullability issues before they cause problems in apps. XD to Flutter v2.0 includes a new setting to “Export Null Safe Code”, ensuring that the generated code is future-ready.

“Export Null Safe Code” setting and output

Sounds great! How do I get started?

Whether you’re using it to copy the code for a tricky gradient, or to export fully responsive, parameterized, interactive widgets, it’s simple to join the thousands of creative professionals that are already using the XD to Flutter plugin.

You can install it by selecting “Browse Plugins…” from Adobe XD’s “Plugin” menu and searching for “Flutter” (strangely, searching for “XD to Flutter” doesn’t work), or just visit adobe.com/go/xd_to_flutter.

Once you have it installed, open the XD to Flutter panel from the plugins panel, and tap the “Need help?” link to check out the plugin documentation.

Flutter 2 is an exciting step forward for the framework, with a focus on building beautiful apps that run virtually anywhere. At gskinner, we’re thrilled to be working with Adobe and Google to ensure that XD to Flutter continues to make the process of faithfully translating a delightful design to a working product even easier.

Stay tuned for more exciting updates to the plugin soon!

Flutter

Flutter is Google's mobile UI framework for crafting…

Flutter

Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https://flutter.dev

Grant Skinner

Written by

I run gskinner (gskinner.com), a nimble team of designers, developers, and strategic thinkers building innovative digital solutions for smart clients.

Flutter

Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https://flutter.dev

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store