How to Convert Adobe XD design to Flutter apps and UI ?

Now Adobe in announcing that their XD to Flutter plugin is now available as early access for broader public testing. 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.

Exporting Flutter code from Adobe XD Using the Flutter plugin in XD is very easy. You can either export an individual drawing or component.

How to do this?

1) Install Flutter exporter plugin. From Adobe XD

2 ) Once you’ve installed it, you can open the export UI Panel in the  Plugin screen, shown in the screenshot below.

 

3 ) Now we can export can either export an individual drawing or component, or an artboard.

XD  image source [https://freebiesui.com/xd-freebies/xd-app-designs/travel-app-strat-screens-ui/]

4 ) Finlay we have to add the adobe_xd package to your Flutter project by including it in your pubspec.yaml app manifest. This package provides helper functions to minimize boilerplate in the generated XD code.

The below screen will explain how will show the exported code. now we can use where the full code or relevant content.

In Adobe XD, to export a single element, select the individual widget you did like to export to Flutter, and choose the Copy Selected button from the UI panel. This will copies the relevant Dart code to your clipboard, which you can use as the basis for a stateless or stateful widget.

Adobe’s Senior Director of Product Ecosystem, Vijay Vachani, say about this new plugin

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.

 

For latest updates & more information, visit Adobe’s page for the XD to Flutter plugin github page.