Flutter

You can now use Adobe XD to create Flutter apps and UI

Kyle Bradshaw | May 13 2020 - 8:00 am PT

Back in December, at the Flutter Interact event, one of the more hotly anticipated announcements was a collaboration between Google and Adobe XD to benefit Flutter developers. Starting today, it’s now possible to use the Adobe XD design tool to create UI for Flutter apps.

While Google’s Flutter SDK offers a variety of tools to make designing the app you’ve envisioned as easy as possible, including ways to create Flutter applets directly from the web browser via CodePen, some designers may prefer to use the tools they’re already familiar with.

To that end, Google and Adobe worked together to make it possible, in early access, to take designs from Adobe XD and export them directly into your project as Flutter widgets written in Dart. To help achieve this goal without using too much repetitive “boilerplate” code, you’ll need to add a new “adobe_xd” library to your Flutter project.

Once you’ve got your project set up correctly, it’s easy to see your changes in Adobe XD immediately reflected in your live app thanks to Flutter’s hot reload. That said, Google notes that not everything Adobe XD can do is supported by the Flutter plugin yet, but the early access should at least be enough to give developers a taste of what’s to come.

Adobe’s Senior Director of Product Ecosystem, Vijay Vachani, shared his excitement for developers to get their hands on what they’ve been working on.

At Adobe, we’re always looking to simplify the designer-to-developer workflow that pains so many teams designing and building apps. Today, we’re excited to release an early access preview of the work that’s come out of our partnership with Flutter to remove guesswork, accelerate decision making, and help teams bring new experiences to market faster.