From UX/UI Design to No-Code Development: A Designer’s Dev Log

Hi, I’m Jian from ARCOA. 👋

I’m a UX/UI designer with 15 years of experience, now building my own products through no-code and low-code tools.

This “Designer’s Dev Log” is where I document that journey — the shift from designing experiences to engineering them, and the lessons learned as design sensibility meets development reality.

My tools of choice are FlutterFlow and Firebase, and this blog captures the practical insights, mistakes, and discoveries I encounter while building real mobile apps as a solo creator.

Why This Blog? Bridging Design and Development

As a designer, I found that traditional development often creates a gap between the desired user experience (UX) and the final technical implementation. No-code tools like FlutterFlow finally offer the speed and flexibility to bridge this gap.

This log is not just about my journey, but about providing practical, manual-style guides for others who are also trying to leap from design tools (like Figma, Sketch) into functional applications.

My goal is to provide content that is:

• Practical: Focused on real-world use cases, not just basic tutorials.

• Detailed: Featuring step-by-step screen captures and code/widget configurations.

• Designer-Centric: Solving development problems with a strong focus on UI/UX optimization.

Our Immediate Development Plan (What You Can Expect)

This blog will function as a growing manual, focusing on the essential building blocks of app development using FlutterFlow and Firebase. Here is a sneak peek at the topics we will dive into first:

1. How to use FlutterFlow: Implement Android and iOS apps with no-code development.

2. Firebase Connection Guide: Step-by-step setup for connecting FlutterFlow with Firebase, covering Authentication and basic database rules.

3. Real-Time Database Implementation: Using Firebase Realtime Database for dynamic, responsive data display within FlutterFlow widgets.

4. Advanced Widget Customization: Techniques for customizing standard FlutterFlow widgets to match specific brand design systems.

Let's Build Together!

Thank you for visiting. I look forward to sharing my struggles, breakthroughs, and hard-earned knowledge with the global no-code community.

If you are a designer looking to ship apps, or a developer interested in FlutterFlow's capabilities, I hope you find this log insightful!