Apr 29, 2021
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.
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.
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.
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.
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.
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!
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.
