From Figma to Flutter
How Low-Code Impacts Mobile Development
In the ever-evolving world of software development, one buzzword that has taken center stage is “low-code-development“.
It’s like the magic wand every developer wishes they had, promising efficient mobile application creation with minimal programming effort. If you’ve been in the mobile development game for a while, you’ll know that such promises should not be taken lightly.
But the kicker is that we recently stumbled upon something that could potentially turn this magic into reality: a low-code plugin designed to convert Figma designs into source code. Yes, you read that right!
Enter DhiWise’s low-code plugin, a promising solution made to transform your Figma designs into Flutter applications. This sounds like a dream come true, right? No more lengthy discussions about design specifications or painstaking coding sessions to recreate what you’ve already designed.
What have we investigated for you?
We’ve taken the task upon ourselves and turned the low-code plugin inside out for you.
To examine the plugin, we borrowed the design from one of our recent Figma projects. Based on this design, we initially implemented a Flutter project ourselves. The plugin was then used to create another app with the same design.
After taking a closer look at the plugin, we wondered: “Does using the described low-code plugin meet the quality requirements of conventional development in Flutter?”
What exactly did we examine?
To approach the question, we compared the two applications in terms of their quality. Our evaluation method considers these three dimensions of quality: software quality, design quality, and software architecture quality.
These dimensions involve a comprehensive examination of different requirements selected to cover all facets of software development.
Let’s dive into…
- Software quality
We carried out a source code analysis according to software quality principles (e.g. Clean-Code) to determine the quality of the code generated by the low-code plugin. - Design quality
For example, to assess the design quality, we compared the pixel variations and loading times between the conventionally developed and the plugin-generated Flutter project. - Software architecture quality
We scrutinized the architectural structure of the generated project to evaluate its adherence to sound architectural principles.
This is what the results looked like:
What do the results tell us?
Despite the promising aspects of using the low-code plugin from DhiWise for quickly turning a given design into a functional Flutter application, a crucial deficiency has emerged in meeting quality requirements. The evaluation revealed the following totals:
OK Stop! Let’s dive into some results to understand what went wrong.
When the converter misunderstands the “Reusability” of widgets!
Widgets, widgets, widgets! In the realm of app development with Flutter, they’re like the LEGO bricks we use to build our apps. But what happens when the generated code of the converter looks more like a chaotic pile of colorful blocks than reusable components?
Well, let’s talk about the result. Instead of a cleanly structured collection of reusable widgets, we found ourselves in a jungle of cryptic, one-time-use widget creations. The generated code resembled a painting more than a well-organized code library.
To illustrate this failed widget structure, let’s look at the ScreenWidget comparison (see the image below).
- Left Image: This is the work of a developer who understood the requirement and employed reusable widgets in an innovative way.
- Right Image: Here, the code takes an “I’ll do as I please” approach, ignoring any attempts at reusability.
When Pixel Precision Goes Offbeat: The Quest for Consistency
The requirement was clear: “Minimize pixel discrepancies between our own creations and what the low-code wizard conjured up.” But what we experienced felt more like a little pixel party!
However, what we uncovered was a bit of a design debacle. The generated code turned out to be a bit far from pixel-perfect. Instead of achieving the expected pixel perfection, the generated code presented some design discrepancies. Rather than seamless alignment between our self-developed creations and the low-code-generated ones, we found some inconsistencies. To illustrate this, look at a simple cutout of both apps (see the image below).
Conclusion
Overall, DhiWise’s Figma-to-Flutter Generator is useful for converting basic designs quickly and easily into an app. This offers us significant benefits when we must swiftly create a working prototype to test novel ideas or use cases early on.
But still, some requirements were not met in the three quality categories. The insights gained from comparing the conversion process with conventional development methods underline the essential role of
manual developer work in the generated Flutter project.
For this reason, we can’t unconditionally recommend productive use but are very enthusiastic about the tool’s upcoming improvements.
(by Tobias Rump).
