A Design Flirt with Flutter
By: Stefan Ivanov
Tags: Adobe Xd, Design Systems, UX Design, UI, Flutter

With a goal to create a simple UI with a Navbar and a couple of Cards, I set off to add components from my cloud libraries. Next, I did a bit of customization, adding images and descriptions, as well as tweaking the layout in a way that made my design complete. Trying to export the design at this stage reports an error because the symbols I use are not being recognized, as they come from an external file living on the cloud. This brings my first realization that the plugin will probably work only for simple shapes and text elements.

To confirm that, I am opening one of the demo projects I had downloaded and it seems to support symbols as long as they are local to the file from which you try to generate code. Our design process, however, relies on UI Kit libraries and shared cloud assets that the XD to Flutter plugin is not able to leverage yet. This is a big bummer because for our organization it is a must that we are able to share and reuse assets across projects with fellow designers in North and South America.

Having a single source of truth, which in this case is the Adobe Asset Cloud, and in other cases could be shared design system space in OneDrive or Dropbox, is key to keeping a team aligned and truly delivering on all the promises of Design Systems.

Having to pay the price of unlinking my components so early on comes with a bitter taste, but I remain optimistic and for the sake of having a Flutter app without writing code, I go ahead and do it. I also tweak the color and text styles of the elements that resulted from unlinking my components to polish the final look of the app.

Trying to export my design at this stage throws a different type of error related to the names of layers prefixed with an emoji symbol. While renaming these, I am having mixed feelings of getting closer, but at the same time, further away from my goal. An export, for sanity check after I am done renaming, shows no more errors, but I look at the warnings just in case.

Among them, one finds that the service does not support styles, such as shadows and some of the borders. Another compromise that I have to make, but this time it will affect the final look of the app and I am quite disappointed. Nevertheless, I am overwhelmed by an eagerness to see how closely the output will resemble my design as I seem to be only two words away from success…

FLUTTER RUN

The export was successful! I saw files being updated and created in the empty project, but the app is not there yet, as there are two more things that I have to take care of inside the app project (thank you Google Search). First, I have to add the dependency on Adobe XD in the pubspec.yaml file. This is something that the Indigo.Design code generation automatically does for me and even more than that, it takes care of all dependencies automatically, so that I never have to worry. Second, I have to copy all the generated code from the newly created dart file into the main.dart. So one more time, two words to success…

FLUTTER RUN

…almost nailed it, the app opens in the simulator showing my UI but the images are not there. This time I will roll up my sleeves and try to figure it out on my own. I remember that upon exporting my screen, something that the plugin calls a widget, there was a second button for exporting images. Let’s go back to XD, export the images, and then in VS Code I can see the two assets added to my project. I copy their paths and scan the generated UI code for image scaffolds where I will paste them.

After a hot reload (I am a big fan of this feature because it affords for quick tweak-and-update iterations) the app shines in front of me in all its fidelity. My job is done and I am happy and satisfied. But there is one thing that makes me nervous: Are the buttons in my cards real interactive buttons or dummy ones? Playing with the app in the simulator shows that they are the latter, which is no surprise but I was secretly hoping for the opposite.

So, yes there is code generation on the Adobe XD — Flutter front but, I’d much rather stick to Sketch with Indigo.Design and Ignite UI for Angular. At least with those, there is a process outputting real apps with functional UI components (and nothing besides the quality and fidelity of your design to think about) that truly turns a design into runnable code.

I invite you to try for yourself. You can download and browse my sample project or use it to follow the steps outlined above and create a Flutter app from here: Lakehouses.xd