How to use the “XD to Flutter” plugin?

XD to Flutter plugin generate code for building apps with Flutter based on your designs in Adobe XD. Thanks to the XD to Flutter plugin, you can easily transfer the design you create in Adobe XD to widgets and save time.

Let’s see how we can use “XD to Flutter” plugin in an existing Flutter project.

Step 1

Open Adobe XD, choose Plugins then go Browse section and install the plugin called XD to Flutter.

Finding the plugin

Installing the plugin

Step 2

Go to pub.dev and find the package by typing XD to Flutter in the search field.

Readme

To learn how to install the package go to the installation section.

Installing

Step 3

Open Adobe XD and create your design. After completing your design, choose XD to Flutter and choose Export All Widgets. Then select the Flutter project you created and press the Open button.

testingPlugin design

Step 4

Open your Flutter project in your IDE(Here used VS Code as IDE). You can see that your design has been added to your flutter project as İPhoneXXS11Pro1.dart.

iPhoneXXS11Pro1.dart

Open Main.dart, import the dart file and change the code home: MyHomePage(title: 'Flutter Demo Home Page'), to home: iPhoneXXS11Pro1(),.

Step 5

Run the application.

xd_to_flutter project output

To access the finished project on GitHub:

emineinan/XDtoFlutter