Figma Make Tutorial - Create an AI-Powered Prototype

Key Takeaways

What is up everybody? This right here is a package of Cheezits and we are going to make a app in record time that will allow us to use our phone camera to take a picture of the nutritional elements of this Cheezits bag and it will use AI in order to analyze the macronutrients, extract them and provide us with an AI analysis insights. And we're going to do this all 100% within Figma, meaning we're going to first design the little UI we created in Figma design. And then we're going to import that into Figma make. And Figma make is what this video is all about. I'm going to show you a workflow from start to finish, from design to Figma make, and in order to create an app like this at record speed. All right. So to get started, we're going to click on the design option right here. here. These are the different products that we can use. Design is for the UIUX process. And what we want to do is hit the F key, the frame tool. And we want to use something around a mobile size. Obviously, since we are um you know creating something for mobile specifically. So, I'm just going to left click and drag out. And then I'm just going to right over here specify around 360 by 600. So, right here, what we're going to do is give it a background color. And I'm going to use something I don't know maybe in the green. Yeah, kind of like a health. I don't know. This this speaks helps health to me rather. So E9 F2D. And then I'm going to use a plugin called Econify. And you can just get real quick icons here in this regard. And so I'm going to throw just like three or four different ones out onto the canvas area and then we'll add it to our frame. So, the first thing I'm going to search for is banana. I'm going to drag this one right over here. Barcode. All right. I think I like this one right here. Um, an add button or icon rather. I'm going to choose this one right here. And then a burger. We're going to have a burger icon for a logo. I think this one right there is fine. So, now we have a four different icons. So, the first one I'm going to throw on here is just this banana one. And this is going to be a watermarkbased background. Now, I know it looks a little silly like line art. So, I'm going to increase the size of this quite considerably, maybe to right around there. And we'll just position position it off to the side. And for the stroke color, we'll grab the background. And then just make it slightly darker like that. Just barely noticeable. Then I'm going to take our burger icon. We're going to put it up here. And I'm going to put some text. I'm going to hit T. and we're going to put in macro cam. And then we're going to choose Nidato, which is a rounded font, which will work well with our icons here. And we'll make it bold. Increase the size here. And I think we'll put it right there. Hold shift. We will select both of them. And then over here, we're going to create auto layout. And then we're going to add a fill. All right. The fill is white currently, but we're going to use like this color right there from the banana. Then we'll go ahead and just give us a pill container right there. What I'll do temporarily is take this and lock it. And then we will take our barcode, increase this size. Again, it's real tiny, so we have to increase this roughly right around there. Around eight will work well. Okay. And then we will have a plus button right here which we can grab this text up here. So I'll just double click into it. Copy. Come out here. Paste it. There we go. I'll take both of those. Holding shift and select. Auto layout. Add a background. For now, let's make the color white though. Now we can add a background. Make it black. Again, add some more white space on the left and right and top and bottom. and slight rounded corners. Right around there is good. And this text, we're going to say add food. Okay, there we go. Now, next up, before we add any type of auto layout, I'm just going to duplicate this and we're going to call this I'm going to double click up here, call it results. And now we're going to have to design a results page down here. And so we'll delete this. And in the center, we're just gonna have a white content section in a frame. So hit F on your keyboard and we'll give it a fill. We'll give it some rounded corners as well. And then inside of it, we're going to have some more type. So the first piece of type, we'll do uh we'll say protein. And again, I'm just kind of looking at the size. Kind of just using again, I'm not paying crazy attention and amounts of, you know, just trying to focus here on creating something really quick and easy. Over here, I'll duplicate this. We'll just say 23 g like that. And then we'll take both of these holding shift add auto layout. And again, [snorts] we'll have to adjust this uh make some finer adjustments here in a bit. Then I'm just going to duplicate this. Control D. Move it down holding shift. This one will be um carbs. All right. Take both of these. With those selected, hold shift, select auto layout. Then we can double click into the bottom one. duplicate it again so we have nice consistent spacing. And then this one will be fats. All right. And then we're going to increase this just a bit like that. Maybe a little bit less than that. Okay. And then we'll have some type uh like a paragraph up here. Just hold T and left click and drag to uh write a box here. And then what we'll say is just like that. And what I'll do is change this to regular. [snorts] And I think we'll go down a little bit smaller. And then what we'll do is come out here to the actions. Rewrite this. All right. So I'm going to tell it to re just write one sentence about macro nutrients. That way I don't have to sit there typing anything. I just want a single sentence. And again, this isn't important. This just kind of gives it context for the AI once we get to that section. And then at the bottom of this, I think we'll take one of these rows, just copy those, and then paste that row. Ctrl +V. And we'll put it like right here. Um, we'll make this a little bit larger. So, we'll grab our primary color in the background. There we go. So, this is going to say total or calories rather. and we'll just say I don't know 582 whatever something like that. So once you have your very quick design the next step requires you to set up your auto layout because right now we don't have auto layout added to anything and if you try to port this over to Figma make or any other tool for that matter uh and you don't have auto layout ready it's going to screw up the layout massively. So auto layout gives it instructions in terms of how to structure the HTML and CSS. So we'll start on this one first. So, we're going to take our home. And what we'll do is for now, we're going to take our home and we're going to hide the banana group. Okay? Just hide it completely because it's going to screw it up and throw it off. And you'll see why in a second. So, what we'll do is add a layout there. And this is fine as is the different um values here as I see them. I we might want to change this to auto. There we go. And when we move this in and out. Yeah, I kind of don't like how this is separated so much. Actually, it might be fine just to leave it like that. Yeah. Okay, that's what we're going to do. Sorry. Um, another thing that we could do is increase the container size here or reduce the padding rather. And then we could take like our button for instance and we can make it fill container. I We can also center it. There we go. Maybe add a little bit of height there. Same thing with the top logo section. Again, we can change this from hug to fill container. And then center that as well. Again, a little bit of height there. Okay, that works fine. It looks fine to me. Now, let's bring back that banana. And when we bring it back, we'll toggle the visibility. And it's going to get screwed up. Um, and so what we need to do is we need to grab that banana element right there. And we need to change this so that it is position absolute essentially by clicking up here. So when we do this, we can now move it free form. And also we want to make sure that this is behind everything. So you hit your left bracket key. And I'm just going to push it right there. There we go. So now we're ready to rock for this particular frame. And what you want to do is zoom it in and out in this context and also pull it down like this. Now, this element right here, this group for the banana, I'm going to rename this to banana. And we want to make sure though that the constraints are not on. So, we're just going to choose center and center. So, if we scale this, there we go. It just it doesn't distort the image like it was before. All right. So now let's go ahead and test it. It is behaving like we would want it to. Very good. Okay. So now that we have that done, we can take both of these holding shift and hit copy. All right. So we hit control C. Now we're going to kick plus and we're going to click on right over here to make. All right. So this is the important part now or it's all important but you get what I mean. Now I'm going to get plus and choose attach design and just paste both of those in there. All right. So I'm going to paste in a prompt that I already created and we are going to take a look at it specifically. The prompt is let's create an app that allows the user to take a picture of a nutritional food label in which the AI will analyze the text and return only the macronutrient carbs, fats, proteins, calories breakdown from that food item. There's a home screen here for the starting screen and a result screen for the result screen when they're ready. So, this means you will need to gain camera access from the user. This will be a web app. Use web Gemini 2.5 flash, which is Gemini 2.5 flash to analyze and extract the data from the picture taken. It's important that you use Gemini 2.5's flash for this. I really iterated that because sometimes it might revert to something else and it may not work as well. So, I also have like a flow right here. you can pause and read what that flow is, but essentially it's just giving it specific instructions about the flow of the app. Um, so then we hit right here, which will send it and it will start building out the project. Oh, now one thing that's important here is sometimes it will default to creating a database. Since this is just a prototype, we don't need to store loginins or anything like that. I don't want it to create a Superbase database. So all I have to do is just down here in this follow-up prompt I will say I this is just a prototype we don't need any type of database like from supabbase. All right send that and it will acknowledge that. All right. And now it's going to go ahead and start working. Okay. So, if it looks like this, [laughter] clearly incorrect. I we click on mobile preview. It's still screwed up. So, what we want to do is a couple things. I noticed that this time it did not prompt me to specify the Gemini API key, which it did the first time, but not this time. So, what we'll do is just I'm going to paste in the API key directly into the text box and also tell it to fix this issue up here. Um, now I understand what's happening here because I've been a front-end developer, but what we could do is take a screenshot and you can paste it over here. As you can see, it showed up right there. And then also, uh, you want to use Gemini right here. If you go to a studio.google.com google.com and then you click on get API key after creating your free account. Um you can create click create API key here and set it up and then click your actual API key. I'm not going to paste it in because you'll see the full thing and I don't want it getting leaked. But right down here I'm going to specify uh the UI is incorrect because everything is squashed up top. Make sure the main content container slash layout I is 100% height. Okay. And then additionally here here is my Gemini API key. Please integrate this for me. Okay, much better. So as you can see it just requires a follow-up prompt uh to get things working correctly. So now at this point, I really don't know if it's going to work. If I click this, you need to enable camera access. And unfortunately, I don't have a camera connected right now. So what I'll do is publish this so that I can test it on my phone as I'm developing. So what we could do is click on publish. And then we'll right up here, we can give it a name. We'll just call this macro cam actual. And go ahead. Do we don't want to feature it on the community? Just hit publish. All right. So now I could take this and copy this URL and I can send it to my phone and then we'll open it up on my phone. All right. So it's up on my phone. I'm going to come over there to the to the actual camera and we're going to try this for the first time. I don't even know if it's going to work. Ah, yes. Okay. So here is the actual app. I'm going to click add food. Give it access to the camera. And there we go. So that is the studio. As you can see, I can kind of look around here and that part works. Now, here is the Cheezits package. So, basically, I'm going to take this over to the desk and take a picture of the nutritional facts section right there where it says calories 210. All right. So, taking a picture here. It is analyzing. And there we go. It works. It has extracted the information. The protein, carbs, and calories, those are all consistent with the package. It does say NA up there because I forgot to tell it to create a summary. So, we will do that next. Another thing that I wanted to have it do is kind of animate in all the uh textbased UI elements for the results screen. So, to create like a nice little animation where all this stuff comes in after it analyzes. Above the macronutrients is a place for a single sentence. I want you to use Gemini to create a simple summary of the macro nutrient profile. And I guess maybe to make this like give it a little bit of a purpose. Um we'll tell it to suggest if this is a healthy food for somebody who wants to be a bodybuilder. Okay. um summarize it in the context as to whether or not this is a good food good healthy food item for a bodybuilder who wants to lose fat. Okay. Um then we can add another feature request. And for this one, I'm going to say also create a sequence animation where the summary text and then each of the three macronutrients texts as well as the total calories text. animates into position on the Y axis with a zero no coming from a coming from a zero opacity. All right, so we can integrate cool animations as well. This thing is very capable. So, um we'll go ahead and send that. Actually, I I'll probably specify um make sure that the delay between these animations is very minimal, such as 0.3 seconds. Okay, so let's send that and see what it does. All right, so it is done. Now, to check this out, I'm going to hit publish and update. And then I can just go back and retest the whole flow on my phone and see if it works. And let's go ahead and click add food. Take a picture. Wait for it to focus. There we go. Analyzing. Analyzing. And there we go. Check out the subtle animations where each of those lines came in. And it works. So what we've essentially been able to do is to create a super quick very fast prototype that kind of validates the idea that yes you can actually have a app web app that requests phone access and you can take a picture of any food label and it will extract key data from it and then provide AI based insights. This is huge. And the fact that we can stay within the ecosystem of Figma where you design and you can actually make an app and like a nice prototype like this is pretty crazy. So definitely check out Figma make. I'm going to be creating many more tutorials um and courses in the future because Figma make is going to be you know a staple in terms of these type of AI based coders, code builders essentially. So, um, make sure to subscribe and I will see you all very soon.