May 16, 2020

How to export Adobe xd designs directly to flutter widgets.

By Mohit Agrawal
flutter adobe

Does this new plugin really write code for you?

Overview

Flutter has recently announced its support for adobe xd. Now you can import your adobe design directly to flutter widgets. Yes, you heard it right. Now, no need to do coding for the UI design. This new plugin will do everything for you. But does it really work? Let’s see how to use this new feature by developing a small UI design on adobe xd. Later I will use flutter plugin to import widgets to a flutter project.

Setting up adobe xd

You can download the adobe xd from here. It is a free tool for designing UI and wireframes. Open the adobe once you are done with installation. Go to the plugin section and search for the flutter. Download the official flutter plugin as shown in the GIF below.

flutter plugin adobe
Flutter plugin for adobe

We are done with adobe setup for the flutter.

Exporting adobe design to flutter

Create a new flutter project in the android studio and add the adobe plugin to pubpsec.yaml. You can check the latest version of the adobe plugin here.

adobe_xd: ^0.1.3

Now let’s design some UI. If you have some adobe wireframe and you want to export then open it otherwise let’s create a new one. To be honest I do not know much about designing UI on adobe so I will be just drawing a few circles (No fancy UI) and will try to export them as flutter widgets.

A simple adobe design.

Once you are ready with your design then go to the flutter plugin. First, you need to set up your flutter project location as shown in the image above then give a nice name to your widget and finally click on the export button.

Now your widgets must have exported to your flutter project, so let’s check it there. Open your flutter project and try to find your new widget under the lib folder. For me, it came like this.

flutter adobe widget

To run this newly created widget, go to your main.dart replace home widget with the new one like this.

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //Your newly created widget will come here.
      home: XD_PracticeiPhoneXXS11Pro1(), 
    );
  }
}

Run the code and see the magic. Check out this tutorial in video.

Conclusion

It will not come exactly because this plugin is in a very early stage. Developers are working on it to get a stable version very soon. But in my opinion, this plugin will be a game-changer in the mobile app development process.

Help me to grow our YouTube Channel: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!