Adobe XD Design to Flutter Code in 100 Seconds

Converting Design to Actual Flutter code was a kind of Dream for Flutter Developers. Adobe recently released the plugin for Adobe XD which allow converting entire design or part of your design to Flutter code by a simple click.

Install Plugin

First of all, you have to update the Adobe XD to the latest version(

Then click the plugin icon in adobe XD and click + sign to download new plugin.

XD to flutter plugin install
XD to flutter plugin install

Then type Flutter and press enter to search the Plugin.

It will load a few Flutter related plugin and You have to install “XD to Flutter plugin”.

XD to flutter plugin install

After installed, create a new Artboard and draw a simple shape.

Then click the “XD to Flutter Plugin” and Select the UI Panel from the options.

Adobe XD design

Then select the shape which you have drawn and click “Copy Selected” button. Then the code will be copied to your clipboard.

Adobe XD to Flutter

Then open the Flutter app and paste where you want to show that container.

Finally, run the app and you will see the shape shows beautifully in your app.

Adobe XD to Flutter

Is this Adobe XD to Flutter plugin good for complex UI ?

At the moment of writing this post, this plugin will not work seamlessly with complex UI. You can use the plugin to generate complex UI. But the code generated by the plugin is not much good as a code written by yourself.

Those issues will be fixed in future release and hope will be able to export the whole app to code properly.

You Will Like Also