A Design Flirt with Flutter
Generating a Flutter app from Adobe XD using Indigo.Design
Last year Adobe announced their plans for an XD to Flutter plugin that would let us export our designs to runnable code in Flutter. Being a product designer and having worked on an Angular UI Framework and Design System for Sketch, Figma, and Adobe XD, I was curious and excited to try it out. However, it wasn’t until a few months and betas later, that I finally decided to give it a try myself. In this article, I will share my initial impressions from my early access to the XD to Flutter plugin v 0.1.1.
Before I begin, I have to say that my familiarity with Angular is mainly through the help of CLI, plugins, and other helper tools. I also don’t consider myself a web developer, but I follow the trends, and lately, I am hearing about Flutter more frequently. To me, this is a sign of product maturity and gave me confidence that the time had come for a noob like myself to get my hands dirty with this new technology.
However, compared to setting up Angular, I find Flutter to be much more demanding. You have to install the Android SDK and XCode, as well as some additional plugins for VS Code. Not that it is so complex, but it sucks up an additional 5GB from your SSD, which could be a barrier for some. However, for the rest of my story, I will only focus on my experience as a designer and, as I see it, the promised land of generating apps from high-fidelity designs.
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
