Convert your Adobe XD design to Flutter codes

Recently, Adobe XD released a new version of their plugin that could export your designs directly to flutter codes. Now, you could create your beautiful design in Adobe XD and could export the created design into widgets. In this way, it’s not just saving your time but it makes you easier to create a UI.

In this article, I will show you a short tutorial on how to export your design from Adobe XD to Flutter Codes.

First thing you need to have is the following below:

1. Flutter [https://flutter.dev/docs/get-started/install](https://flutter.dev/docs/get-started/install)
2. Adobe XD [https://creativecloud.adobe.com/apps/download/xd](https://creativecloud.adobe.com/apps/download/xd)
3. Add-on plugin for Adobe XD — XD to Flutter
4. Flutter Packages for supports the Adobe XD [https://pub.dev/packages/adobe_xd](https://pub.dev/packages/adobe_xd)
5. Flutter Packages for support for SVG (optional) [https://pub.dev/packages/flutter_svg#-installing-tab-](https://pub.dev/packages/flutter_svg#-installing-tab-)

Let’s get started!

1. Install the Adobe XD
2. Open Adobe XD > Select Add-ons > Plugins > Browse > Type in the Field “XD to Flutter” or “Flutter” and hit enter key > Select “XD to Flutter” > and Install it.

3. Create a new Project for your design.

4. Create your Flutter project.

5. Select XD to Flutter > Select “Export All Widgets”

6. Select the Flutter project that you created and pressed the “Open” button

7. Open your Flutter project to your IDE like VS code or Android Studio and you could see the generated file.

You could see that “iPhoneXXS11Pro1.dart is added.

This is the generated file from the Adobe XD to Flutter codes

8. Now, add the adobe_xd package to the pubspec.yaml. Also, I added the SVG package file because of the pyramid shape.

NOTE: If your IDE doesn’t support or not install the auto get packages. Please open the terminal and locate your flutter project > Hit enter> type “flutter pub get” and enter > Wait until the importing of packages is done.

9. Now, open the main.dart and change the code of the “ home: MyHomePage(title: ‘Flutter Demo Home Page’), “ to “ home: iPhoneXXS11Pro1(),”

NOTE: Please don’t forget to import the dart file and the iPhoneXXS11Pro1() will be depending on the title screen design in the Adobe XD. This can be changed depending on the title set.

10. Now, you could run the app by hitting the run button or through the terminal.

Flutter Project and Output

Adobe XD design

Additional information, You could change the design and export. You could see the changes when you go to the flutter projects.

Hope this helps you a lot!

Thank you for reading my article!