Select Page

Adobe XD to Flutter code

Adobe XD to Flutter code

I’m happy to share with you a totally new feature to make your frontend work in Flutter much faster. Adobe XD have just released a new plugin that makes it possible for you to export your Adobe XD design to Flutter code, with a simple press of a button. It’s pretty cool!

Let’s check out how it works. 

Install Adobe XD to Flutter

Go to where you can get direct access to download XD to Flutter. Follow their direction and install the plugin. When installed you will find the plugin under Plugins and you will be able to see a new panel as shown below.

adobe XD to Flutter plugin

Create a new Flutter project

When you export your design you need a project to export it to. So let us start be creating a new Flutter project. Check out my post on how to create a new Flutter project if you are new to Flutter.

In your pubspec.yaml file add adobe_xd to your dependencies.

adobe_xd: "^0.1.3"

You are now ready to export you design to Flutter. 

Export all widgets to Flutter

Now to the magic part exporting your Adobe XD design to Flutter code. Go back to Adobe XD and in the plugin panel choose UI Panel. Here you can choose your newly created Flutter project. When you are ready press Export All Widgets.

If you go to your lib folder in your Flutter project, you will now see a new file. You can rename it to what ever you want.

To see you results go to main.dart and change you home to be the new widget you have imported.

home: Stats(),

And run Flutter run.

Adobe XD Design

Adobe xd layout

Flutter layout

adobe XD to Flutter app view

That’s a really easy and fast way to export your design to functional code.

Let me know what you experience is with this new plugin. I personally look forward to working with it and seeing what difference it can make to my day to day work.

Happy coding 👩🏽‍💻

About The Author

Nanna Bach Munkholm

Hi my name is Nanna and I'm the Co-founder and CTO of DecorRaid. I love to learn and share my knowledge with everyone interested in becoming an entrepreneur or just wanna learn one of the many skills you acquire as starting a company.