Adobe XD Plugin for Flutter [Export design as code]
Can you find any difference in designer and developer. Yes! designer designs the UI/UX of application and developer develops the real application that could be used.
But there is a huge gap between understandings of designer and developer. And to reduce this gap, to increase productivity of both, to reduce production cost…. we got a new plugin for flutter by Adobe XD.
Adobe XD (adobe_xd) plugin for flutter is a plugin (tool) that converts designs from XD to dart (flutter).
Find out installation and detailed information in PRO Coach yotube video.
Tim Sneath posted a medium article with announcement of adobe_xd plugin availability for flutter. You can find that below.
Get all necessary urls at the bottom of article.
Have a look at this image. Left image is a screen in iphone and right image is a design in Adobe Xd. Right screen is exported as dart file from Adobe Xd by using adobe_xd plugin.
Output is almost same as the design. We can say that that now designs can be exported with 70–90% of accuracy.
Let’s have a look at code generated from this plugin
We can easily spot that this plugin uses Transform.transalate, Stack, and Container to put the things on screen. It is using SvgPicture to display svgs. It uses AssetImage() to display image in to screen.
Advantages of adobe_xd:
It helps developer to understand positions of each component on screen.
It helps developer to take out basic widgets from design thus saves time.
Sometimes we can export complete screen and use it in app.
It help designer to understand how developers do code.
Designer can participate in development.
What should not expect from exported code for now?
- We shouldn’t expect resposiveness of apps
- We shouldn’t expect that we directly use exported codes (Codes need modifications for produce correct output.
- We shouldn’t expected good performance nor good code quality.
I hope we will get more updates with more feature in this plugin.
Necessary URLs:
- Plugin for flutter: https://pub.dev/packages/adobe_xd
- Github repository: https://github.com/AdobeXD/xd-to-flutter-plugin/
- Plugin for Adobe Xd: https://xd.adobelanding.com/en/xd-plugin-download/?pluginId=6eaf77ea
- PRO Coach Youtube video: https://www.youtube.com/watch?v=fCJqBeb5Eo4
- Announcement article: https://medium.com/flutter/announcing-adobe-xd-support-for-flutter-4b3dd55ff40e
If you enjoyed this blog, let me know in the comments below how much useful this blog was to you. I’d be very grateful if you’d help it spread by emailing it to a friend or sharing it on Twitter or Facebook. Thank you!
#HappyCoding #flutter #widgets #crossplatform #tutorial #adobexd #plugin #viveky259 #procoach
