XD to Flutter

Hiroshi Matsunaga
2 min readJan 8, 2021

--

Can we use XD to Flutter in production environment?

This is motivation to check features of XD to Flutter.

Adobe announced that we can use plugin for flutter.

You can use XD to Flutter by following README https://github.com/AdobeXD/xd-to-flutter-plugin#installation--setup

I am not comfortable with Adobe UI tools. But I could use sample file

When you export all widget, you will see popup dialog to choose directory.

In that time, you need to choose Flutter project.

I replaced Widget in Scafold to Home. I could see exported result.

It was easy to see exported result with sample file. But I feel it was difficult to use production environment.

Flexible screen size is not supported

Almost of all widgets that are exported by XD to Flutter is Pinned.
It seems that Pinned supports flexible screen size.
But when I rotated screen, I saw a problem.

Exported Widgets are not parameterized.

Text and colors were specified in source code directly.

In the workflow in development,

Designer create design -> Designer export widgets -> Developer modify widgets to customize texts and colors -> Designer modify the design -> Designer export widgets -> Developer will faced a lot of diff because they already modified the widgets to customize texts and colors.

Sometime, I lost UI panel..

In PoC step, I feel this plugin is very powerful tool for us.

Sign up to discover human stories that deepen your understanding of the world.

--

--

Hiroshi Matsunaga
Hiroshi Matsunaga

No responses yet

Write a response