Adobe XD to Flutter code

Written by Nanna Bach Munkholm

Founder & CTO Roccai

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 https://xd.adobelanding.com/xd-to-flutter/ 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 👩🏽‍💻

Adobe XD to Flutter

You May Also Like…

An Elegant Puzzle: Systems of Engineering Management  – Book review

An Elegant Puzzle: Systems of Engineering Management – Book review

Gain invaluable insights into engineering management with Will Larson’s comprehensive guide. Learn practical tools and strategies for leading teams effectively, from small groups to scaling up. Discover the wisdom of stacking small wins over chasing silver bullets. An essential read for tech leaders at any level

Building an MVP for your Startup

Building an MVP for your Startup

Do you have an entrepreneur within you and want to bring it to life? Creating a business plan and building an MVP (Minimal Viable Product) is the place to start.