From Figma to FlutterFlow: A UI/UX Designer’s Transition into Low-Code Development
What is low code development?
Low code development is a visual approach to development using a visual editor (like Figma) as opposed to traditional development using a text editor (like Visual Studio Code). You are doing the same thing just that you’re doing it visually and there’s a lot of code that’s been hidden from you to make things simpler. So for example, instead of typing the code to make some text a certain font size, you input that font size into a visual text field. The technicality of the code has been abstracted for you, but there’s code being implemented in the background.
Why FlutterFlow?
There are so many low code development tools and it was quite overwhelming to settle on one. FlutterFlow was the one that I decided to settle on. Why?
1. It’s built on Flutter, a powerful framework of the Dart programming language, made by Google.
2. Flutter is used to build cross platform apps and for the web, from a single codebase.
3. FlutterFlow has a vibrant community and they are constantly improving their product.
4. You can also export the fully functional Flutter code of your product if you want to, not just styling snippets, like most of the other low code platforms I interacted with.
Insights from my learning journey
I have been learning low code development on FlutterFlow for the past four months. In the process of learning through tutorials on YouTube, I bumped into a bootcamp by NoCode Africa/eelspace which has really helped me in terms of structure, support and community. I graduated about a week ago🥳
So now let me tell you about the insights I’ve gained, from the POV of a UI/UX Designer learning to be a FlutterFlow Developer.
1. My understanding of the principles of programming has greatly improved
Figma allows you to drag around elements freely. Of course, as a designer there are design principles and patterns you adhere to, but you still have the freedom to move stuff around free hand. Now on FlutterFlow, you are limited.
There is very minimal allowance for moving elements around freehand. In order to manipulate and move around elements, you are constrained to using programming concepts like rows, columns, margins, padding, alignment, justification etc. It was really a struggle at first but now it’s easier and I have a solid understanding of these concepts.
2. Following the proper design process is still important
Low code platforms like FlutterFlow are visual and simpler than traditional programming and one might be tempted to jump into building your product directly. This is a recipe for disaster friend. You still need to go through the design cycle (user research, competitive analysis, design system, low fidelity and high fidelity prototypes).
If you want to make the best possible product possible in the least amount of time possible, you want to avoid trialing and erroring on FlutterFlow because it is more time consuming. Ideating the product on Figma is much easier and less time consuming. So start working on FlutterFlow when the chances of change are low to none.
3. Helped me have a developer friendly approach to designing on Figma
I think we as designers really do the most sometimes lol, especially due to the freedom Figma gives you to create anything. I mean, I bet any design is possible to code, but there’s a way to design when you understand the principles of programming that makes it easier for a developer to implement your designs. For example, nowadays I find myself thinking, “This is a row, and this will be in a column, these two images are in a stack…”
This way I can even explain my designs to the developer in a language that they understand, giving them an easier time and ensuring what I design is exactly what is implemented.
4. My perspective of coding has changed: It doesn’t feel scary or hard anymore
Back in my university days when everyone around me was taking up coding, I found it so intimidating. I tried several languages and eventually just gave up. I came to realize that I am a visual person, thus why UI/UX Design worked for me and why low code development on FlutterFlow felt less intimidating to take on.
I have thoroughly enjoyed learning complex back-end concepts like app states, querying and filtering databases, document references, conditional visibility and parameters, all because of the visual nature of FlutterFlow. And now that I have learned the basics, I even feel like there’s a chance that I could advance to traditional coding using Flutter.
5. Better Figma handoff knowledge
While developing on FlutterFlow I spent a lot of time inspecting designs on Figma. This gave me tons of insight on the POV of a developer when inspecting Figma designs, which include:
i. Tips and tricks on how to inspect more efficiently
— You can click once to copy styling information like text, color codes, font size, font weight, on the inspect tab. You don't have to highlight then copy.
ii. Challenges faced during inspecting
— Having to switch between the design and inspect tab when you need to export an asset while inspecting it (POV : when you’re an editor on the file)
— Having to click multiple times to reach an item that is grouped or framed.
At the time I was drafting this article, I was to suggest solutions for these challenges, but Figma gave us Dev Mode ✨ which is a new feature that has eliminated both the challenges I pointed out above. Now one can:
1. Export an asset faster as the export option is now within the inspect tab. No more switching between tabs.
2. Inspect items individually even if they are grouped, without having to click multiple times to get to the item. No more rage clicking.
I’ve also been posting videos on my FlutterFlow learning journey on my LinkedIn. You can connect with me there to chat about UI/UX Design and Low Code Development or see the cool stuff I've been building with FlutterFlow. Thanks for reading (:
