UICode Low-code: A Figma Plugin That Generates Flutter Code
Low-code Solutions Are Spreading
📅 2021.03.22 - 👤 Borbély Viktor
Attractive slogan: everyone does what they understand!
UICode is a low-code Figma plugin that can generate quite good Flutter code. Today’s UI designers use the Figma online tool, which is excellent for prototype building and wireframe building. Further refined, we can put a presentable application into the hands of our target group. UICode went beyond this and created a plugin for the popular Flutter framework with which we can already generate code. I looked at what it is sufficient for.
Flutter 2.0 debuted just a few weeks ago, on March 3rd. The community was really waiting for it, as it received such fantastic features that Web is finally stable, meaning it can also be used in production. In addition, it also received the same status for 3 desktop OSes: Linux, Windows, macOS.
Preparations
It’s not my goal now to discuss Figma’s possibilities. We know them well. Personally, I really like it because you can progress quickly with it. With its excellent intuitive functionality, the free version more than satisfies my needs. But the monthly $12 USD isn’t expensive either if someone is serious about it.
I created the following two simple screens to test the possibilities. I deliberately didn’t go overboard, as I wanted to see basic things with UICode’s low-code capabilities.
Two simple screens in Figma
What can the UICode Low-code plugin do?
Let’s install the UICode low-code plugin. This can be installed from here into Figma. For me, it worked well in Google Chrome, for example in Firefox it didn’t even speak up.
Then, to create a real application feel, I set up a few clickable buttons and added transitions.
Navigation between screens
After that, it can be accessed and opened in Figma at Menu -> Plugins -> UICode. It first asks which screens we want to use from our design. Checking these, it performs some automatic grouping.
On the UI Elements tab, selecting Frame 1, it finds the texts and buttons. It lists buttons there based on whether there is interaction with them. But if it doesn’t recognize it, this happens, then I could add another with the Edit button.
In Assets, we can list images with it. It usually finds them the first time.
The UICode low-code plugin performs the systematization for us
If we’re done with these, then code generation can come! On the Frames tab, click the Download project button. It creates the files. We need to click the Download button again to actually download it. Incidentally, it gives an estimate of how many hours we saved with this. Even if it’s not accurate, it’s thought-provoking anyway. Not to mention with much more complex appearances.
Creating and downloading project files
We get a ZIP file that we just pop into Android Studio and can start the build. Since Web is already available, I preferred to view it in Chrome.
It reproduces the designed appearance well
The final result
Looking through the code, my feeling is mixed. Unfortunately, it operates with Stack and Padding elements. This is not very fortunate for different screen sizes. It specifies widths and distances from the top of the screen in concrete pixels.
Looking more closely at the packages used, for responsive sizing it uses the Flutter ScreenUtil package. This is already a better solution. The package creators say no less than that it creates a reasonable layout for our screen and fonts. Indeed, when the screen is resized, the appearance remains acceptable with it. Of course, if we stay close to the original screen proportions.
The resulting code is not sufficiently structured. It recognizes the screens and names them appropriately. However, it creates individual components in bulk in the code. (I’ve seen a much worse solution in Adobe XD, where everything was SVG. The code is sufficiently opaque because of this.)
The question is whether this can be used as a starting point? I think it’s worth a try, although perhaps not in this version. Promising for a start, but Flutter is very good precisely because relatively complex interfaces (widgets) can be created quickly in it.
Downloadable examples:
The web example unpacked can be easily run in a browser on a Python web server:
Python 2 — python -m SimpleHTTPServer 8000
Python 3 — python -m http.server 8000
We can open it in the browser at http://localhost:8000.
Conclusion
UICode brought a low-code solution, but it’s not perfect yet.
If it succeeds in solving:
- introducing basic architectural solutions for organizing elements
- being able to render buttons and complex components (Component)
- outsourcing color codes
- using the latest version of packages and framework
this will be a good initiative.
Productivity is greatly increased if a developer can continue as faithfully as possible with a designer’s artistic solution. You don’t have to throw away or restart work, but where one finished, the other continues from there.
If you have further questions about this tool or mobile app development itself, I’m available on my contact page or on LinkedIn.
I’m interested in the possibilities
If you liked my writing, I recommend other interesting things to your attention: