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.
First of all, you have to update the Adobe XD to the latest version(188.8.131.52).
Then click the plugin icon in adobe XD and click + sign to download new plugin.
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”.
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.
Then select the shape which you have drawn and click “Copy Selected” button. Then the code will be copied to your clipboard.
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.
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.