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 to

prototype them for me and then I'm going to even take it further and show you how we turn it into a real app and I'm going to do this all in 48

hours so I met with my accountant last week and he told me basically that the way that I was keeping my books was not

the most optimal and I just 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 to get an idea of if I'm putting enough in towards investment saving towards taxes or personal or emergency fund and I want to find out is this a

problem that other people are having too so here's what we're going to do first we're going to conduct some research we're going to talk to people about their problem and we're going to find out what Solutions exist then we're going to plan and strategize based on

the weaknesses and opportunities we discover for our solution then we'll design the UI we'll create a single flow like a micro app to test and iterate on and finally we'll no code the app mark it up create the database model in the

functionality the first two parts will be done in fig Jam AI then we'll move into figma Ai and then Buzzy AI this is an in-depth tutorial so make sure to watch to the end and save if you need to

come back later so I'm going to kick this off with some user research and opening up a fig Jam file so the first thing I want to do is kind of brainstorm

this button over here is going to help me do that so I want to generate a brainstorm using AI research insights about freelancer budgeting and let's

just go ahead and generate that let's just see what it did so yes it wants me to kind of explore the current landscape of what budgeting apps are out there it

wants me to think through some of the challeng faced by Freelancers which is great and then strategies so now I am going to have ai generate me a mind map

and this mind map is going to be all about freelancer budgeting and money allocation we're just going to explore topics about this oh I'll put that here

and then generate it's like a second brain here for me and it's going to connect the dots on all of these things that I can explore they have these different income sources right they

might have expenses taxes savings so this right here sounds like the start of my buckets that show what Freelancers are doing so this goes really deep I can

start to see where my MVP can be okay so first I need a bit of a plan before I go into this user research part so I'm going to have fig Jam help me out with

that too back in here I'm just going to make a section and this is going to just be like my research plan I can grab a sticky say create me a research plan and

I'm just going to copy this from right here and then I'm going to use my favorite little tool and that's this widget down here called jambot so I'll click on that I will grab jambot and

drag it onto the canvas now all I need to do is connect any sticky to the jambot and then I can use any of these AI features to help me so I'm going to

click on the first one which is id8 and it just made me this full section that gives me a breakdown of the research plans it says to conduct surveys and interviews analyze existing budgeting

app create the interface develop the app Etc so I'm going to do all of this in this video the next thing I want to do because I have an interview scheduled in 10 minutes is I need to write these questions like what am I going to ask in

this interview so I'm going to jump back over here into the conducting interview section and I'm going to drag another sticky in here and I'm going to say write me some

interview questions for Freelancers about their budgeting uh needs habits and solutions I'm going to come back over here I need to grab

another Jam bot and put it over here going to connect to this and then hit ID 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 lowincome period 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 I'm going to

jump into my interview right now how do you kind of allocate money to paying your taxes and like your self-employment tax and all the things that have to come out of that like um do and how do you

manage like okay how much goes to personal spending versus business expenses so I have my own spreadsheet that I calculate essentially how much I

need per quarter given my um income that I anticipate so I get paid every weeks depends on how frequently I submit the invoice but usually within two weeks of when I submit the invoice when I know

I'll get paid for each month how much monthly income I'll calculate to budget how do you kind of decide how much you want to allocate to that investment fund every month H actually I still have to

decide on that so that interview went really great I got some amazing feedback and it kind of validated this idea that it would be really cool to just have a

really simple visualization of what's going on in the right amount so I took a bunch of notes during the interview I also have transcribed it and

I basically just dumped the whole transcription into a sticky and I have a couple of interview insights here now don't be afraid to get messy on your fig

Jam canvas because it will all make sense and come together very soon so now that I've dumped this here I am going to use my fig Jam bot again to do a couple

of things for me and help me clean this all up up so one of the things that I want to do is connect this again to this and then I want it to like summarize this for me and I want it to do it as

bullet points if I want to run this Jam bot again I can drag another one over here and I can say rabbit hole and then it's going to give me a couple of other

areas here handling unexpected lowincome months percentage breakdown for budgeting now I know that there is this approach of the 30 40 10 10 Rule now I

can build these suggestions into my solution I can take all of this stuff I'm just going to grab all of these things I'm going to put it into this section right here and you'll notice when you're in a section and you click

on it there's a feature called organize and you can sort these stickies by topics or color or whatever it is I'm going to use summarize it's going to take this whole mess of stuff and create

some actionable insights here and I think I'm going to focus on this bottom one here which is organizing and tracking funds that's the flow that I want to work on right now and then of course if I want to clean up this whole

space I click on this again I go to organize and then I sort my stickies by topic so that's going to make another board for me here and look at that I

have enough about the actual problems some opportunities here now let's look at solutions that already exist and let's do a bit of competitor analysis so

the first thing I did was head to Reddit to see what everyone's talking about I already went through and explored and have been using some of the more popular ones like QuickBooks there were a couple of really interesting apps here that

people talked a lot about and one that kept coming up was called wab so I decided to download that one and walk through it and just take notes of the user experience the interface the

interactions and it had a similar concept to where you select a bill type and then you assign an amount to it so this is clearly a design pattern that

people enjoy and that's working for them but it hasn't been necessarily A applied to the specific freelancer problem space so this is all headed in a pretty good direction so the last thing that I

wanted to do is check one of my favorite spots and that's mobin they do what I just did manually automatically for you by collecting thousands and thousands of

real apps and showing you walkthroughs of them their flows their screens their UI elements all I'm going to type in budget and let's see what we have here and you can just go through all of these

if you have a pro account you can watch the videos of people actually using the apps and going through all of the flows and you should check the description for a link to this because it is a must have

for any uxui designer I want to jump back into fig jam and have it generate me a flowchart so I know all of the screens I need to create so I'm just going to ask AI to create me this

flowchart with a decision tree for the features of my app and it came up with this a start screen add balance create a bucket allocate money to the bucket update the balance if it needs more

funds we go back to allocate show the recommended percentages the end okay so now we're going to take all of the research we did in fig jam and

have figma's ai features actually create the designs and the flows for us everything is going to happen with this little magic button right here this is the figma AI icon and this is where you

can control a bunch of different features that this AI offers the first one is called first draft and that is really figma's generative AI that is

going to create these designs for us so I'm going to start with this one this button here allows you to toggle between a basic app an app wireframe or a

desktop site or wireframe and so I am going to start with a app wireframe for example so we can generate out a bunch of wireframes and I'm going to create

the prompt for this so we kind of have our problem statement right we want to um create a Financial app spelled

Financial right okay let's go ahead and make a wireframe okay so it's building this wireframe in real time just like that

we've got our first screen and that looks pretty good it pretty much did exactly what I asked it to do so now we can click on make changes and there are

lots of little customizations here we can make it dark mode we can change the main color we can change the radius of

all of these cards and buttons I love that you can just do that all at once then I can come over to the title text and change that and then the spacing is

really nice because I can kind of tighten things up or give it more white space or breathing room already with just a few clicks we took it from what looked like a wire frame and we already

increased the Fidelity a bit now you'll also notice that the name of this screen becomes the prompt that you use so that's where it stores The Prompt so what I like to do is just copy that and

then make a comment and paste that in there just so that I have a reference for the prompt that I used and that way I can actually rename this to something um more appropriate let's see what it

looks like now if we used not the wireframe but the actual basic app so I'm just going to take the same exact prompt that I had here and I'm going to

paste it into the first draft into the basic app version add a back button to the top okay let's make it okay just

about 5 seconds and oh that's so much better so much cleaner and just look at that it has everything we need so this is great something I noticed is it

generates very strange looking icons for the status bar and since I'm going to be turning this into a real app I don't really need that so I'm just going to go ahead and delete that the best part

about this is actually for me in the layers panel how neatly organized and named everything is and that it's already done in Auto layout now we kind of have to build a flow out of this and

we're just going to build out this really simple MVP so that we can get it into the hands of our users so I'm going to take out a few things here and then these are buttons but maybe a slider

would be cooler I'm also going to make these cards a little bit more visible so I'm going to change the fill here something like that the other thing that's so great I'm going to just take

this and paste it over here so that you can see what I'm doing but with this bar um let's say that I have this moving down instead of duplicating things I can

hover over this and just drag and it's going to do it for me it's going to make all of those then I can you know choose to wrap and then it will wrap it for me and then I can drop this back in here

okay so here we are all cleaned up a bit as you can see we have this bucket the dashboard and I've done a slider instead of a button and now the other cool thing that AI is going to do for us is it's

going to prototype this whole thing all I have to do is select all of the screens come back down over here and click make prototype and just like that

it's added all of these noodles here for us so now we can come up to hit play and click through and see if everything

works it connected it perfectly I'm back now to do the really fun part and that is turning these designs into a real working app so in

order to do this we're going to use a plugin and a tool called Buzzy you need to set up an account with Buzzy and then install the Buzzy plugin so normally we

would have to do this all manually but Buzzy's amazing Auto markup does this for us so first we're going to click the auto markup my app button now this says

no screens are defined so we can select the screens from our c or we can just scan for screens automatically so I'm going to choose that one okay so it's found six screens

now you can select the ones that you want to mark up you don't have to select them all I don't need that dashboard updated so I just need the bucket information add a bucket allocate

dashboard and slide finish and it also lets you define what type of screen it is whether it's the starting point of the flow or it's a basic screen or it's an overlay next we're going to click

continue shows that five Buzzy screens are defined we're going to click continue again and now we want to generate a brief now this is like your product requirements document and it's going to Define all of the functions of

this app so let's click generate my brief great our brief is generated and this is amazing it's got our app name we can change this the app description is a budgeting app that allows users to

allocate funds into customizable buckets for better Financial organization it's got the functions listed here as add a bucket view buckets allocate funds edit bucket user roles and even data

requirements so now we're going to click continue there's no data model so this is the part where it creates the database for you so we're going to go ahead and click generate my data model

OKAY the data model has been generated and we can see here the data tables and this is the database here so we have our users our buckets with name description

icon allocated amount and the amounts that we're going to allocate to those buckets perfect now let's continue so now it's going to mark up these screens by connecting all of the ones that I

select to the database and to the brief and all of the functional requirements okay that was a success our screens are marked up so now we can continue adding more screens or we can publish our app

to see it in action now it's not going to have any data in it because the user hasn't interacted with it yet and added anything to it they're just going to generate some sample data for right now there's still some manual work to be

done and for that we're going to switch to expert mode and once we do that we'll see these four tabs up here where most of our work will happen there's that brief that it generated the data model and now with

the designs we may need to connect a few things so it was right about here that I ran into some snags publishing and getting stuck on getting things to

render the way I wanted them to look thankfully Buzzy has really great documentation and a wonderfully supportive Discord group that I leaned on a lot so the trick to doing um any

input like this this and making it interactive for the user is that we need to start with this container being a

form so we've got this main content here and we want Buzzy to know that this is an input form and it's got Fields so this big component right here is one big form that contains all of the fields and

the button so when I assign this interface Dr I'm going to choose component and then the component type is going to be form and then this is going to be the add a bucket for form I'm

going to name it that and this will connect to the database that's bucket because we want to store all of these things in that table and then I'm going to select capture so there are three you

can either edit something that's existing you can just have it read an value that's already there or you can have it capture something and that's what we want we want the user to be able to type into this field and we want to

make sure that this button is now submitting that information so we're going to use uh an action interface right because we want that action to be submit and then we want it after it's

submitted to navigate to the dashboard screen and that's exactly what we've told it to do here and again Buzzy is going to do most of this for you but I'm just giving you a peek under the hood in case something goes wrong so the other

thing that I want to do is make sure that this text field actually has a label inside of it otherwise it's just going to show blank inside of the app I'm going to edit this field and I'm

going to go to advanced settings and that's where you can find the place placeholder now to set up these buckets correctly again we're going to want to

click into the design here and we're going to have this text here be a field so we want to assign that to the role of field and we're going to select the

bucket name from the database and again that refers to whatever bucket name was entered here by the user and then all we want to do is just display that so that's going to be the summary of whatever has been inputed there and for

the amount here because we want to show the amount that inputed we want this to be dynamic we're going to also make it a field and this will be the allocated amount and then it would be a summary of

that amount as well okay so let's see what it's looking like so far I'm going to make sure that we have the plug-in open so we're going to go ahead and publish that app and I'm just going to

scan this QR code on my phone as well so that you can see what this looks like so over on my phone I'm going to go ahead and scan this QR

code and we're going to open up the Buzzy app and this is what it looks like add a bucket and you can see that it's

added a personal bucket right there and now I can click on the slider now the slider functionality is going to take a little while to implement there are a few steps there so we'll get into that

in a more advanced tutorial and that's it this is a real working app it's crazy so the other great thing that you can do here is manage all of this on your Buzzy

workspace as well so you'll be able to communicate back and forth between figma and this app that you're creating and the database so if I go ahead and click manage on Buzzy workspace it looks a

little something like this and you can see all of the database tables that are created you can see the designs so the screens you can view the brief that was

created as well so if I go ahead and enter in a bucket here and I call that travel expenses and I hit save boom

you'll see that added right to that database so it's interacting all within figma and inside of the app in real time it's amazing one of the things I learned

is that when you do have issues publishing you can go into the workspace and just clear it out and republish again from figma I was pretty scared to

do that but thankfully Dave was there to reassure me and confirmed that figma is the source of Truth and I wouldn't lose the work that I'd done and just like that I made a complete working out from

start to finish that would have taken months otherwise without the magic of [Music] AI if you like this go check out Buzzy dbuzz and check out my course where I

teach you how to use techniques and tools like this to be a product designer [Music]