[Updated] Adobe XD plugin for Flutter with CodePen Tutorial

Recently Adobe XD releases a new version of the plugin that you can use to export designs directly into flutter widgets or screens. Yes, you read it right, now you can make and export your favorite design in Adobe XD and export all the design in the widget form or as a full-screen design, this can save you a lot of time required in designing.

What we will do?

I will make a simple design of a dialogue box with a card design with text over it as shown below.  After you complete this exercise you can experiment with the UI. You can make your own components or import UI kits available with the Adobe XD.

So I am myself knows just basics of Adobe XD design, and I am making a simple card design for the dialog box and exporting into a flutter widget, which didn’t take much time.

So here are the steps :

1. Install Adobe XD from the official site, and Yes it’s free to use it.

2. Install Flutter plugin from the official site or you can visit in Adobe XD app Menu->Discover Plugins

3. Search Flutter there and click install

4. Select Menu->New, Choose iPhone Template

5. Select Rectangle Tool and draw a rectangle and then on right side properties panel fill parameters as mentioned on screenshots i.e mention rectangles curves radius, fill color, shadow color, and shadow direction.

6. Select the Text tool and click on rectangle where you can enter the new text for the title here I have written the title as New Update on Adobe XD!

7. Again select the Text tool and add a new text component as a subtext or description, New Flutter plugin in Adobe XD released, make the font smaller than the title, and the color little lighter than the title’s color.

8. Add a new text over the rectangle as a text Read More… make this text align by drag and drop as shown in the image and change the font color as shown so text looks to the user as clickable.

Now your full component i.e a dialogue box UI, is ready to be exported.

9. Now go to the plugin section select XD to Flutter and choose UI panel option as shown in the screenshot.

10. Select your Export Path at this for the update file will be created with the widget code. It will look for a flutter project, but even if there is no pubsec.yaml dart file it will export correctly.

11. Now select all the components that you made. Select Export All Widget button, it will still export the dart code from where you can copy the code and paste in your project or test it on  CodePen editor. The sample is given below.

See the Pen oNjQMRV by Shivam (@theshivamlko) on CodePen.