Adobe XD Design to Flutter Code | Flutter

Hey everyone, today I found an awesome plugin that lets you generate flutter code from your XD design.

Isn’t it awesome?

Yes, you heard it right we will be generating flutter code using Adobe XD. So let's get started and know more about this plugin, without wasting time.

At first, I will like to thanks 🎊 the creator of this plugin 👨🏻‍💻 Giovani Lobato and request him to add more flexibility to this plugin. You can check out this opensource plugin made by Giovani Lobato on GitHub.

Let's move ahead and see what we need to get started.

1. Adobe XD: You can install it from the official website.
2. Flutter: Flutter configured on your system with any IDE like Android Studio or VS Code.

Once you have these two on your system we are good to go.
Follow these steps:
1. Open Adobe XD
2. Go to Plugins
3. Select Discover Plugins.
4. Search for “Flutter” and you will find some plugins in your search list install the plugin named “Generate Flutter Code”

Now you can start designing some shapes or text to generate the code. Let's create a shape and try generating Flutter code.

1. You will have an empty board like this

1.

2. Draw a rectangle shape on it of height 60 and width 250

2.

3. Give this rectangle background color Red and shadow black.

3.

4. Make the edges of this object rounded.

4.

5. Finally, we are ready to get the Flutter code for this object. Go to the plugin section by clicking on the icon at the bottom left of the screen.

Click on this icon to open Plugins

6. Click on Generate Flutter Code Plugin. You will some options listed there let them as it is and click on the “Generate” button.

Generate Flutter Code

7. This will generate the flutter code for the shape we have in Adobe XD and copy code to the clipboard.

8. Navigate to IDE where you want to use this code and paste there.

 Container(
  height: 60.00,
  width: 250.00,
  decoration: BoxDecoration(
    color: Color(0xffff0000),
    boxShadow: [
      BoxShadow(
        offset: Offset(0.00,3.00),
        color: Color(0xff000000).withOpacity(0.16),
        blurRadius: 6,
      ),
    ], borderRadius: BorderRadius.circular(35.00),
  ),
)

8.

9. You can see the output of the code from XD is here as follows:

9.

All done, go ahead and experiment more with this plugin.

Read my articles:

Voice & Video Calling in Flutter | Agora.io | Adding real-time video calling to your application

Flutter Custom Paint Tutorial | Draw a Custom Shape Path in Flutter

Firebase Cloud Messaging API with Python

Did I get something wrong? Mention it in the comments. I would love to improve.

If you liked what you read, please leave some claps!

Follow me:

Twitter: https://twitter.com/imRaviSSingh

Facebook: https://www.facebook.com/itsravishankarsingh

Instagram: https://www.instagram.com/itsravishankarsingh/

Github: https://github.com/ravishankarsingh1996

LinkedIn: https://www.linkedin.com/in/itsravishankarsingh/

About.me:https://about.me/itsravishankarsingh