Intro to Figma Make (Tutorial)

Hi, I'm Anna, designer advocate at Figma, and I'm so excited to show you how you can use Figma Make to turn your ideas into highfidelity functioning

prototypes fast with AI. Let's dive into seeing what this looks like in practice.

Here I have a design file with some of my different screens for the World Peas online shopping experience. I want to bring these into Figma make so that I

can create a prototype for some upcoming user research sessions. But before I bring it into Figma Make, I want to first make sure that I'm setting myself up for success. So, because you're

pasting your Figma design frames directly into Make, it's able to reference a lot of the details around how your designs are structured. So, the

first thing I want to check is if I'm utilizing auto layout to make sure that my designs are responsive and well structured. I also want to check that my

structured. I also want to check that my layers are named because that's going to help create a shared language between myself and Figma make. Make sure that I'm removing any unnecessary or hidden

layers that I don't want make to reference when generating my prototype.

So, looking at my design here, uh I notice that this content doesn't have auto layout automatically applied to it.

Um it's pretty much staying static when I'm resizing that screen. So, if I want to quickly apply auto layout, I can refer to the quick actions and utilize

the AI suggest auto layout. So, that

went ahead and already applied auto layout. And you can see it's now

layout. And you can see it's now responsive.

I also know that I have a couple of layers in here that aren't properly named. So, let's go back to actions and

named. So, let's go back to actions and use the rename layers AI feature. And

you can see it's going to go through and rename 11 of my unnamed layers. And then

lastly, looks like I have this frame that's not really serving any purpose.

So I'm going to go ahead and delete that. So now it looks like my design's

that. So now it looks like my design's in a pretty good state. So let's go ahead and create a new make. I'm going

to go to file, new, make. And I'm going to go back to my design and just copy and paste that frame into the prompt box. And let's give it a brief

box. And let's give it a brief description around what I'm trying to build here. So, I'm just going to say um

build here. So, I'm just going to say um implement this design for the produce

product screen for the world peas mobile grocery shopping app and make it interactive. Cool. Before I send my

interactive. Cool. Before I send my prompt, you'll also notice here besides attaching your Figma elements, you can also choose to attach an image. Um

there's also an option here to select a library. So when I click on that I can

library. So when I click on that I can see all the different libraries that I've access to. Um whether it is through libraries being a part of the entire organization or to specific teams that

I'm in. And these are also all libraries

I'm in. And these are also all libraries that have been uh specifically extracted for use in Figma make files whether by myself or by a teammate. So here I'm

just going to pick this foundations um library file. And then to the right here

library file. And then to the right here I can see these options for me to navigate to edit styles or edit guidelines. When I go to edit styles

guidelines. When I go to edit styles that's going to take me to the global CSS file. This is what was generated

CSS file. This is what was generated when that foundations library file was extracted for use in Figma make. And

basically this extraction is going to take my styles for my typography, color, spacing and bring those into this global CSS library file. So if there's any

stylistic changes that I want to make, I can directly make edits in the file here. But I'm going to keep it the way

here. But I'm going to keep it the way it is for now.

In addition, you'll see here there's an option to edit guidelines, which will navigate me to that guidelines file. And

you can think of this as a free form text file where you can add any kinds of guidelines that you want. So here I can

add some guidelines like uh you know add press states to all buttons

and maybe let's um let's say you know optimize for a mobile screen size.

So basically anything that's not covered in your designs that you're pasting into Figma make or anything that's not covered in the style extraction, uh you can add those additional details to the

guidelines file for any kinds of rules that you want Figma Make to reference when generating your prototype.

All right, so I've got my design pasted in. I have my prompt. I've selected

in. I have my prompt. I've selected

which library styles I want to reference. And then I've added a couple

reference. And then I've added a couple of guidelines here. So, let's go ahead and start building with Figma make.

So, while it's working, you can see it's starting to think through um what are all of the things that it needs to include in this design based on all the

information that I've given it and and it's going to start building that by implementing code. Let's fast forward uh

implementing code. Let's fast forward uh to when this is done so we can take a look at what that looks like. All right.

So now that my prototype is done generating on the left side you can see uh Figma make is listing out all the different things that it's built out. So

it's added some interactivity like the ability to add to cart or favorite items. Um we can also see that it referenced my guidelines around making sure that it's sized to fit in a mobile

container. And I can directly interact

container. And I can directly interact with my prototype in that preview. So I

can see here I can add elements to the cart. I can heart. We also have some

cart. I can heart. We also have some sorting capabilities. So I can sort

sorting capabilities. So I can sort things alphabetically or by price. And I

can also see here in the code panel, this is all the generated code that is powering that prototype that I can preview to make any kinds of edits to my

prototype. I can do this a couple of

prototype. I can do this a couple of ways. You can always continue to write

ways. You can always continue to write additional prompts. Uh but those

additional prompts. Uh but those generally take a bit longer. So for

anything that is a smaller tweak, I recommend utilizing this point and ededit tool. So I can select an element.

ededit tool. So I can select an element.

Uh maybe it's the text here for instance. And let's just unbold that.

instance. And let's just unbold that.

And you can see it's not only edited the specific text layer that I've selected, but also all the other corresponding text layers with all my different product cards.

If I want to adjust something else like maybe um spacing, I can do that as well.

So you can see I can adjust my color background, my corner radius. And here's

where I can access spacing. Um and you know, maybe let's just update the padding a bit here. Let's make that 8 pixels. And pretty much any edits that I

pixels. And pretty much any edits that I make with the point andit tool is going to be instantaneous.

Looking back at my prototype, I notice that when I'm hovering over these hearts, they increase in size. But

because we're designing for mobile, that kind of interaction doesn't really make sense. So, because I can't edit this

sense. So, because I can't edit this with the toolbar that pops up with pointand edit, I can still select the element and then navigate to this go to

source button, which is going to take me to where that design element lives within the code. So, let's check this

out here. And then we've got this hover

out here. And then we've got this hover scale. I just want to go ahead and get

scale. I just want to go ahead and get rid of that because I want to remove that hover

animation. Go back to preview.

animation. Go back to preview.

And now the hearts don't change size when I'm hovering over them. So yeah,

any kinds of quick edits you want to make to instantaneously change your prototype, utilize the point andit tool or make those direct edits in code. Now

that we've made a couple of tweaks, besides just previewing my prototype in the preview up in the corner here, you can see that I can also switch the

different device sizes if I want to see what this looks like across different mobile sizes.

Let's just keep it in custom for now. So

far, I only have the first screen of my entire app implemented. So, let's go ahead and add an additional screen to my prototype. So, I'm going to go back to

prototype. So, I'm going to go back to my design file and let's next implement this product screen. So I'm just going

to take that copy paste it in and then I will say um

implement this design for the product detail screen

uh which users can navigate to after clicking on the product card in the

produce screen.

All right, let's go ahead let that cook and then I will fast forward again. All

right, so it's done generating. Let's

see if it's implemented those product detail screens. I'm going to click on

detail screens. I'm going to click on the garlic clove page and yep, it's gone ahead and implemented the new screen.

One thing I want to make sure I also point out is if there's anything that you can't edit through the point andit tool or through editing the code panel,

you can still use the point andit tool to select the particular elements that you want to change in a follow-up prompt. So that's just another way to

prompt. So that's just another way to specify the specific thing that you want make to focus on. And if you do generate while referencing the styles of a

library, you can't change which library styles you're referencing. If for

whatever reason you ever want to switch it, you'll have to make a new Figma make file uh and select that different library there.

So yeah, that's kind of the gist of how you go about building a prototype. In

cases where you want to build prototypes with multiple screens, I definitely recommend that you take the approach that I did where you start one screen at a time. It really helps make sure that

a time. It really helps make sure that you are uh not confusing make with too much information. It also helps make

much information. It also helps make your generations faster and more accurate to the designs that you are attaching. And you'll also notice that

attaching. And you'll also notice that within version history, if for whatever reason you're not satisfied with the generation, you can always choose to go

back to prior versions by clicking on the restore to this version button. With

that, I'm going to quickly fast forward to us taking a look at the final prototype. All right, so here we are at

prototype. All right, so here we are at my full prototype. I've got all of my different interactivity, different screens. I've got my cart. There's micro

screens. I've got my cart. There's micro

interactions and there's also logic built in. Like I can have my little

built in. Like I can have my little interactive input fields where I put in information.

And now I feel like this is ready for me to share with my teammates. So if I want to do that, I can go ahead click the share button and invite others on my

team to view this prototype. And when

I'm ready to use that in those user research sessions to make it easier to share with participants, I can also go ahead and publish my prototype to a

website for others to visit as well.

With Viva Makeake, you can go from an idea to interactive prototype faster than ever before. Whether it's just testing out some different micro animation transitions, building a

full-fledged prototype, or just seeing if an idea that you have makes sense, it's so much easier for you to bring your ideas to life with Figma Make. We

look forward to seeing all the different things that you guys build and hearing your feedback and are so excited for some of the upcoming updates that we'll be launching in the coming weeks.