Adobe Tech Blog
Published in

Adobe Tech Blog

Announcing XD to Flutter v2.0

Giving designers a fast path to production Flutter code.

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.

XD to Flutter intro video

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. Flutter developers can even use the Pinned Widget in the open-source adobe_xd package to leverage this layout model directly in their projects.

Responsive design in XD
Responsive design running in Flutter

Stacks & Scroll Groups

Stacks and Scroll Groups provide new ways to lay out content on-screen dynamically in Adobe XD. Stacks let you arrange a bunch of different elements in a horizontal or vertical list, with varying spacing between them. Scroll Groups let you define an area to scroll a larger group of content vertically or horizontally.

XD to Flutter v2.0 supports both of these features, converting them into common Flutter widgets (rows, columns, and scroll views). 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 lets 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.

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.

Install XD to Flutter via the Plugin menu

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!

Grant Skinner is the lead developer of “XD to Flutter” and runs gskinner, a nimble team of designers, developers, and strategic thinkers building innovative digital solutions for smart clients, using processes honed by 20 years of successful deliveries and happy stakeholders.

--

--

--

News, updates, and thoughts related to Adobe, developers, and technology.

Recommended from Medium

How to create DigitalOcean droplet using Terraform. A-Z guide.

Algorithms III

Resources vs. RPC semantic

From prototype to a work of Art!

Off-the-Shelf or Custom Software: What’s Best for Your Business?

CCN Ale Wallet Release

Unable To Download Docker Images Behind A Proxy

Learn Flutter & Dart like a pro — Dart Basics

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
Demian Borba

Demian Borba

Principal Product Manager @Intuit. CEO and founder @_pactto. Previously @Adobe @PayPal @BlackBerry @UCSDextDAC. Surfer, father and husband. Opinions are mine.

More from Medium

Widgets Widgets Everywhere!

Building a Tinder-like swiping interface in Flutter

Bringing Life To Your Flutter Application

How much does flutter app development cost?