Convert Adobe XD prototypes to Flutter Widgets [EARLY ACCESS]

Google released their XD to Flutter plugin which is now available as part of a public testing.

Check out the official release here: Announcing Adobe XD support for Flutter Create in XD and export to working Flutter codemedium.com

The article says that any design/prototype you make in Adobe XD can be now converted to a working Flutter widget which is really great for developers who would need to map the exact design by manually coding the widget.

Let us try to export a simple login page in Adobe XD just like this:

Link for the XD file is provided below

Now we will export it in our Flutter project as a widget.

Open Android Studio (my personal choice), or VS Code, and Create a New Flutter Project

(If you haven’t installed plugins please check out the documentation which will get you started)

Open Adobe XD and in it open the PLUGINS panel. Click on Discover Plugins.

Search for “flutter” in the Browse section and you should get a screen like this:

Install the XD to Flutter Plugin.

Search and Click on this plugin from your PLUGINS panel

Now select “UI Panel ->Export All Widgets” after selecting your art board. Also don’t forget to include your Flutter Project location like this:

Once you have exported you need to add a dependency in your Flutter project in the pubspec.yaml file like this:

dependencies:
  **adobe_xd: ^0.1.3**

Head over to flutter package page to know more.

Now simply change the home in your MyApp class to the imported dart file class name like this: (This is my dart file’s class name, it can be different for every project)

home: Login(),

Run your Flutter on an emulator or press Hot Restart and you should have an UI like this:

With DEBUG Banner

As this plugin is still in early access many modules such as cards won’t be imported as it looks in our XD file. So we can hope to get a stable release soon which will be well documented and efficient to use.

NOTE: If you want to remove the DEBUG Banner from the top left of your test app just add

debugShowCheckedModeBanner: false

Without DEBUG Banner

Resources:

Flutter App: Maddoxx88/xd2flutter A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

Adobe XD file: xd2flutter.xd Edit descriptiondrive.google.com