How I built a REAL app using Figma AI in 48 hrs! (ENTIRE UX/UI Process)

ruticker 07.03.2025 23:38:58

Recognized text from YouScriptor channel DesignerUp

Recognized from a YouTube video by YouScriptor.com, For more details, follow the link How I built a REAL app using Figma AI in 48 hrs! (ENTIRE UX/UI Process)

**I am going to show you the behind-the-scenes entire process of exactly how I use Figma's AI to do user research and analysis to generate my designs, prototype them, and then turn it into a real app—all in 48 hours.** I met with my accountant last week, and he told me that the way I was keeping my books was not the most optimal. I thought, "I wish I had a really easy way to see how my money is coming in and then be able to allocate it to certain accounts or buckets." This would help me get an idea of whether I'm putting enough towards investment, saving for taxes, personal expenses, or an emergency fund. I want to find out if this is a problem that other people are having too. ### Here's what we're going to do: 1. **Conduct some research**: We'll talk to people about their problems and find out what solutions exist. 2. **Plan and strategize**: Based on the weaknesses and opportunities we discover for our solution. 3. **Design the UI**: We'll create a single flow, like a micro app, to test and iterate on. 4. **No-code the app**: Mark it up, create the database model, and the functionality. The first two parts will be done in **FigJam AI**, then we'll move into **Figma AI**, and finally **Buzzy AI**. This is an in-depth tutorial, so make sure to watch to the end and save it if you need to come back later. I'm going to kick this off with some user research by opening up a FigJam file. The first thing I want to do is brainstorm. This button over here is going to help me do that. I want to generate a brainstorm using AI research insights about freelancer budgeting. Let's just go ahead and generate that. So, yes, it wants me to explore the current landscape of budgeting apps. It wants me to think through some of the challenges faced by freelancers, which is great, and then strategies. Now, I am going to have AI generate me a mind map about freelancer budgeting and money allocation. We're just going to explore topics about this. *Generating mind map...* It’s like a second brain here for me, connecting the dots on all of these things that I can explore. They have different income sources, expenses, taxes, and savings. This sounds like the start of my buckets that show what freelancers are doing. I can start to see where my MVP can be. ### Research Plan First, I need a bit of a plan before I go into this user research part. I'm going to have FigJam help me out with that too. Back in here, I'm just going to make a section for my research plan. I can grab a sticky and say, "Create me a research plan." I'm just going to copy this from right here. Next, I will use my favorite little tool, this widget down here called **Jambot**. I'll click on that, grab Jambot, and drag it onto the canvas. Now, I just need to connect any sticky to the Jambot and then use any of these AI features to help me. I will click on the first one, which is **ID8**, and it just made me a full section that gives me a breakdown of the research plans. It says to conduct surveys and interviews, analyze existing budgeting apps, create the interface, develop the app, etc. I'm going to do all of this in this video. ### Interview Questions The next thing I want to do, because I have an interview scheduled in 10 minutes, is write these questions. What am I going to ask in this interview? I'm going to jump back over here into the conducting interview section and drag another sticky in here. I’m going to say, "Write me some interview questions for freelancers about their budgeting needs, habits, and solutions." *Generating interview questions...* Here are the questions: - How do you prioritize spending as a freelancer? - Can you describe a challenge you face related to budgeting? - What tools do you currently use? - How do you adjust your budgeting during low-income periods? These are all really great questions. I'm going to also throw in some open-ended questions, so this is perfect. I'm going to take these questions and jump into my interview right now. ### Interview Insights The interview went really great! I got some amazing feedback that validated the idea of having a simple visualization of what's going on with the right amounts. I took a bunch of notes during the interview and transcribed it. I dumped the whole transcription into a sticky and have a couple of interview insights here. Don't be afraid to get messy on your FigJam canvas because it will all make sense and come together very soon. Now that I've dumped this here, I am going to use my FigJam bot again to help me clean this all up. *Summarizing insights...* I want to focus on organizing and tracking funds, which is the flow I want to work on right now. If I want to clean up this whole space, I can click on this again, go to organize, and sort my stickies by topic. ### Competitor Analysis Now, let's look at solutions that already exist and do a bit of competitor analysis. The first thing I did was head to Reddit to see what everyone's talking about. I explored some popular apps like QuickBooks and found a couple of interesting ones. One that kept coming up was called **Wab**, so I decided to download it and take notes on the user experience, interface, and interactions. This app had a similar concept where you select a bill type and assign an amount to it. This is clearly a design pattern that people enjoy, but it hasn't been applied to the specific freelancer problem space. The last thing I wanted to do was check one of my favorite spots, **Mobin**. They collect thousands of real apps and show you walkthroughs of them, their flows, and their UI elements. I typed in "budget" and explored the results. ### Creating a Flowchart I want to jump back into FigJam and have it generate me a flowchart. I’ll ask AI to create a flowchart with a decision tree for the features of my app. *Generating flowchart...* Now we're going to take all of the research we did in FigJam and have Figma's AI features create the designs and flows for us. Everything is going to happen with this little magic button right here—the Figma AI icon. The first feature is called **First Draft**, which is Figma's generative AI that will create these designs for us. I’m going to start with an app wireframe. *Generating wireframe...* Now we can click on "make changes" and customize it. I can change the main color, the radius of cards and buttons, and tighten up the spacing. ### Prototyping the App Now that we have our designs, we need to build a flow out of this. I’ll select all of the screens, come back down here, and click "make prototype." Just like that, it’s added all of these connections for us. Now we can hit play and click through to see if everything works. ### Turning Designs into a Real App Now, I’m back to do the fun part: turning these designs into a real working app. We’re going to use a plugin and a tool called **Buzzy**. First, we’ll click the auto markup my app button. *Scanning for screens...* It found six screens. I can select the ones I want to mark up. I don’t need the dashboard, just the bucket information. Next, we’ll generate a brief, which is like your product requirements document. *Generating brief...* Now we want to generate the data model. *Data model generated...* Now it’s going to mark up these screens by connecting them to the database and the brief. *Success!* Now we can continue adding more screens or publish our app to see it in action. *Publishing app...* I’ll scan the QR code on my phone to see what this looks like. *Scanning QR code...* This is a real working app! You can manage everything on your Buzzy workspace, and it interacts in real-time with Figma and the app. One of the things I learned is that if you have issues publishing, you can go into the workspace, clear it out, and republish again from Figma. And just like that, I made a complete working app from start to finish that would have taken months otherwise without the magic of Figma's AI! If you like this, go check out **Buzzy** at [dbuzz](https://www.buzzy.com) and check out my course where I teach you how to use techniques and tools like this to be a product designer!

Назад

Залогинтесь, что бы оставить свой комментарий