How I Designed and Built a Working Mobile App in 48 hrs using Figma’s New AI

This week, I challenged myself to use Figma’s new AI features to do as much of my product design and development process as I could — from user research and analysis to generating my UI designs, prototyping them, and then turning it all into a real working app — and I attempted to do it all in just 48 hours. Here’s what happened…

The Problem

Last week, I met with my accountant, and he pointed out that the way I was keeping my books wasn’t ‘optimal’. I thought to myself, “I wish I had an easy way to see how my money is coming in and to allocate it to certain accounts or buckets.” This way, I could clearly see if I’m putting enough toward investments, savings, taxes, personal expenses, or an emergency fund. Now I want to find out if this is a problem others are having too.

The Plan

Here’s the plan:

1. Conduct research by talking to actual people about their problems and exploring existing solutions.
2. Plan and strategize based on the insights we uncover.
3. Design the UI and create a single flow or micro-app to test and iterate on.
4. Build the app without code by creating the database and functionality.

And we’re going to do this all in Figma. I’m going to use FigJam AI for the first two steps, then Figma AI, and finally Buzzy AI plugin for Figma.

Brainstorming

To start, I opened up a FigJam file for user research. My first step was brainstorming. I used the AI feature button in FigJam to generate a brainstorm using AI insights on…