XD to Flutter Plugin: Convert XD Designs into Working Code to Build Native Apps with Google’s Flutter

XD to Flutter Plugin: Convert XD Designs into Working Code to Build Native Apps with Google’s Flutter
Adobe Products Featured

Product teams today need to design for more devices and platforms than ever before. The expectation that software products work seamlessly and consistently across mobile, web, and desktop means design and development teams often need to create for each of these platforms individually. As products evolve, time is wasted in the frustrating back and forth between designers and developers trying to make final products match pixel-perfect designs.

That’s why, as part of Flutter Interact, we’re excited to announce XD to Flutter, a new XD plugin that generates code for creating apps with Flutter based on your designs in Adobe XD. XD to Flutter is a collaboration between Adobe and Google that will be available in early 2020. When it is released, the plugin will be open source, just as Flutter is. You can sign up for early access to the XD to Flutter plugin.

An artboard in Adobe XD is converted into an app UI on an iPhone 11 Pro, using dart code generated by the XD to Flutter plugin.

Flutter is Google’s UI toolkit for developers to create native applications for mobile, web, and desktop, all from a single codebase. With Flutter, developers can work with a set of customizable widgets to quickly build interfaces and get full native performance across platforms. Flutter is used by millions of developers all around the world to create expressive, beautiful UIs for their applications.

Generate working code based on your designs

XD to Flutter simplifies the designer-to-developer workflow for teams that build with Flutter; it removes guesswork and discrepancies between a user experience design and the final software product.

The plugin generates Dart code for design elements in XD that can be placed directly into your application’s codebase. The plugin generates code for any selected element in XD, either for individual objects on your design canvas or for an entire artboard. As you make changes to your designs in XD, you can simply run the plugin and instantly update your app’s code. Plus, if you’re using an IDE that supports Flutter, like the Flutter extension for Visual Studio Code, you can run and reload your Flutter app and preview changes to your application on a real device simulator with Flutter’s hot reload capabilities. With XD to Flutter, you and your team can go from design to a real, working product in just a few minutes and accelerate any decisions you need to make in real time.

Sign up for early access

XD to Flutter will be available soon in the Adobe XD Plugin Manager, which includes dozens of plugins and integrations for XD, and made available open source on Github. To receive updates and be one of the first to gain access to this new XD plugin, you can sign up for early access here.

Recommended Articles