Figma Make tutorial: Getting started

We are going to get started in just a

few moments with get started with Figma

make. Welcome to our webinar today. My

name is Megan Olinger and I'm a member

of Figma's onboarding team. It's a

pleasure to be here with you today. I

also have a wonderful team of Figma

experts on the chat with me here today.

Uh I have Tatiana, Ellie, and Talia who

all work with some of our largest

customers and are going to be here to

assist with Q&A and chat as we go

through our webinar today. So, thank you

Tatiana, Ellie, and Tia.

Now, before we dive in for today, I want

to share our goals for this session so

that you know exactly what to expect and

what you'll take away from our time here

today. This is a getting started section

or Figma Make. So, we're going to be

pretty hands-on walking through Figma

Make in Figma together. We're going to

start by talking about Figma Make and

what it does and how to actually use it.

And as we go through a demo of make

today, we're going to highlight some

essential tips and tricks and best

practices that will help you get the

best output as you start adopting make

for yourself. Finally, we will explore

some new use cases and show you how

customers are actually using Figma Make

in practice with some examples for how

it might fit in at different stages of

your product development process.

Couple of quick housekeeping items

before we begin. First, if you have

general comments or conversation you'd

like to share during the webinar, please

use the chat window and set the drop

down to everyone. Now, if you have

questions that you would like to submit

for Q&A, please use that Q&A button in

Zoom instead. It's either Q&A or

questions. Um, and that button is going

to help us track those questions a

little better. That way, we can follow

up with you later via email if need be.

Um, third, this webinar is recorded, so

you will receive a copy via email in the

next day or two. And finally, in all of

your communications today, please

remember to be kind and respectful per

the Figma code of conduct.

All right, with that said, we're going

to go ahead and jump right into a quick

introduction.

Figma make is a prompt to app tool

inside Figma that allows anyone to turn

their ideas and their designs into live

working prototypes through natural

language prompting. So with Figma make

you can quickly build codepowered

prototypes and apps no dev skills

required in order to share your ideas

with teammates to validate and refine

your designs to communicate with your

engineers and even more.

And that ability to really quickly

create these live prototypes is so

important because without it, the

standard process of going from an idea

to a live shipped product takes a ton of

time and effort. And you all know that

better than anyone. But it is costly and

labor intensive to take an idea, to

explore it fully, and to progressively

get higher in fidelity. And because it

takes so much time and alignment, you

can often only explore a few ideas. You

can't explore the full option space

because it requires a certain degree of

fidelity and often you just don't have

the bandwidth. I'm going to pause here

really quickly because I'm noticing the

conversation in the chat around audio

issues. Um, if you are having audio

issues, make sure that you have clicked

to join the audio in the Zoom. There

should have been a button when you

joined. and also make sure that your

browser is up todate. If all else fails,

we definitely will be sending out our

copy of this recording via email. I'm so

sorry if you're having issues with that

today. Um, but we'll make sure to get

you a copy of that recording as we

proceed.

Okay, so with Figma make that ability to

rapidly prototype and visualize those

ideas, you can get much closer to a true

culture of prototyping instead of

picking a couple of ideas and really

being limited to just exploring those

ones. With Figma Make, everyone can

validate their ideas quickly and just as

importantly, quickly pivot to new ones.

Now, because Figma Make is so deeply

integrated into the Figma platform, it

lives right alongside all of the rest of

your design work, and we're going to

show you how to do several things today

that really capitalize on this

integration and make your makes better.

For example, you aren't confined to just

prompting via text in Figma Make. Your

team can easily copy and paste in Figma

design files that Make can use as a

reference, which we believe provides

much better outputs than linking to

something static like a screenshot.

Going even further, Figma Make can also

reference styling context from your

design libraries. So you can essentially

publish your libraries to Figma make to

begin referencing styles like colors,

typography, and more to ensure that what

you're generating in make is close to

the patterns that your team has already

established.

Now, addition to referencing those

patterns, your team can also guide Figma

make through what's called a guidelines

file. You can think of it as a free form

text file that provides rules and

instructions to the LLM model. We'll

show you how to do this in a little bit,

but guidelines are a great way to ensure

that the outputs in make explicitly

adhere to your design language and any

standards you have that might not be

easy to reference in that design file.

We also have pointandedit functionality

which brings some of the powerful visual

manipulation tools that you're used to

in Figma design over into make. This

means that once you've created a

prototype, your team can go in and

refine the outputs in a way that's

really fast and targeted.

Lastly, you will notice that this

experience is multiplayer just like the

rest of Figma. So that means your team

can go in and prompt together, make

changes to the design, and even edit

code all together in Figma Make.

All right, now that we've toured through

the basics here, let's go ahead and show

you how to get started.

First things first, there are a few

prerequisites for using Figma Make. So,

we'll start with seat type. All seats on

paid Figma plans can try make in their

drafts, but a full seat is required for

full access to Figma make. So, full

access includes the ability to share

your makes, to collaborate with others,

and to publish those makes if you choose

to do so.

Next up, in order to access Figma Make,

AI must be enabled in your Figma or by

an organization admin. And they can

toggle that on under admin settings. Um,

if AI is not enabled for your

organization today and your admin is

interested in more information about uh

Figma's approach to AI or how Figma make

works, we've got some great resources

available to help them out. I'm going to

drop those in the chat now. We'll also

make sure to send them over in the

follow-up email. um that way they can fi

dive into the finer details and get that

toggled on for your org.

And with that said, we're going to go

ahead and jump right into a live demo to

show you all the goodness of Figma Make.

Um so here I am over in my Figma file

browser here. And to get started with

Figma Make, I'm going to click this make

shortcut right up here in the upper

right hand corner to start a new make

file. Now, the screen that you see here

on my screen might look a little

different from the screen that you see,

but all of the functionality is the

exact same. We're rolling out some

different batches here right now, so

bear with us here. Um, once we get to

this page, it's time to get started. We

can either start from scratch and

describe an idea right here using

natural language or we can load up some

inspiration by clicking on one of these

icons from the Figma community or we can

even start from an existing Figma design

simply by pasting in a design frame. And

when we paste in a design frame here,

that allows Make to ingest not only the

visual context of your design, but also

the layers, the layer names, the

responsive settings that you've

carefully crafted in that design over in

Figma. Um, so I'm going to go ahead and

hop into a design file here and choose

one of these uh designs that I would

like to turn into a prototype. So here's

my frame. This is what I would like to

bring into Figma Make. Um, as a tip and

trick here, there are a couple of things

that you can do in your Figma design

file to prep this and make sure you get

really great output in Figma make. So,

the first thing that you want to do for

your frame is make sure that all of your

layers are named. When you name your

layers, that creates a shared language

between Figma Design and Figma Make.

Now, you can totally do that manually if

you'd like to, or once you have AI

enabled in your org, you can use the

actions menu down here and choose rename

layers. And that's going to have the AI

run through. Whoops. Let me go ahead and

do this. Rename layers. It's going to

run through and rename all the layers in

your design to make sure that everything

is formatted properly for Figma make.

Now, the next thing that you want to do

is make sure that you have auto layout

applied. Um, auto layout, if you're

unfamiliar, is what makes your Figma

designs responsive. We have it here

toggled on already. I can kind of show

you. Keep grabbing the wrong frame. Here

we go.

There we go. We can see how that adapts

as we change the size of the frame.

That's because we have auto layout

applied. Um, so you can enable this and

fine-tune it any way you'd like, but you

also again have access to an AI tool

that can help you out here. So, if you

come back down to your actions menu, you

can choose suggest auto layout. Figma is

going to run that for you and get all

the basics there taken care of. So, now

that my design is prepped, I'm simply

going to click on the design I want,

copy and paste it into make. So, to

copy, I'm going to go ahead and do

command C. Then I'll jump back over into

make and just paste it right into that

prompt box.

So now make has my design attached. The

next step is I want to tell Make what

library I'd like it to reference as it

builds. Because I've put a ton of time

and effort into styling this design over

here with my library, I want to make

sure make knows how to reference that

information. Down at the bottom of your

prompt window, you will see a button

that says select library. When you click

this, you're going to see a list of all

of the libraries you have access to that

have already been published to make

across your organization. Um, so I'm

going to go ahead and click on that

library, the collab library to attach it

to my design, but I'm also going to go

ahead and take a step back and show you

how to actually push a library here into

this drop down to use it in make. So,

I'm going to jump back to my design file

here. And I've got my designs here, but

I've also got my library components all

baked right in. From my library file, go

up to uh the file menu and go to publish

library. And the first thing you want to

do is just make sure that there haven't

been any changes to your library that

need to be published. Everything's up to

date here already, but if not, you can

publish your library first. Then down

below you have a button that says export

to Figma make. Click on that and it's

going to start up the process. Um, this

process takes a few minutes to go

through, so just be aware of that if it

takes a couple minutes the first time

that you're doing that. The good news is

this is a one-time action. You'll only

need to repeat this step if you make

changes to your library in the future

and you want to push those changes back

over to make. Um, otherwise once we

extract that file, it'll be there ready

to use in Figma Mink ongoing.

Okay. So at this point we have pasted in

our design and we have uh extracted our

library and attached it here for style

context. Now it's time to prompt. So

this is the part whoops I clicked on the

design. Here we go. I'll click in the

text box here. Uh this is the part where

we're going to tell make exactly what we

want it to do. And as a tip for your

very first prompt, especially for your

very first prompt, writing a strong

prompt is going to make a big difference

in the AI output. So the more specific

you are upfront, the better your end

results. Um, I have a colleague who

thinks of this like you are briefing a

designer, right? It's helpful. You

wouldn't just say, "Turn this into a

homepage," right? You're going to share

context and constraints and inspiration

about what you would like to happen. Um,

so I'm going to go ahead and copy and

paste a prompt in here for sake of time

and I'll kind of talk through these

elements as we go so you can learn about

effective first prompt building. Things

that you want to include here. Make sure

you include the task. What should Figma

make do? Next, you want to give it some

context either about u the goal of this

design or if you're in a later stage and

you're building out multi-creen flows,

give it some context about where this

screen fits. Um, beyond that, any key

design elements or expected behavior.

For example, here I want to make um a

page where users can click on the

category tab and filter those. And then

finally, any constraints that you'd like

Figma make to consider. From there,

click go. and we're going to jump right

into that Figma make experience. You can

see over here on the left hand side um

that Figma make is going to start

reasoning and thinking here as it

decides what to build. Um now this again

can take some time. So I have a version

of this ready to go over in my next tab

for you that's going to show you the

final output using this exact same frame

and using that exact same prompt. And we

can see the results here that like Figma

does a pretty good job getting this

design prepped and ready to go. We've

got our search bar. Everything looks

laid out good. Um, but there's there's

an obvious issue here, right? Like some

of these image fills didn't come through

the first time. But I'm in a place where

I'm starting off really strong. I've got

this interactive prototype and now I can

actually go in and make changes and

start to iterate to get this pixel

perfect. Now, before we start looking at

any of those edits, I want to show you

two things that I think are really

helpful. And that's going to be our

styles file and our guidelines file. Um,

so down here, I'm going to make sure

Oops, sorry. Let me pull in my library

here.

Actually, I'm going to jump right over

into code to show you this for for

today. Um, in your code tab, you're

going to have access to two files that

work together to tell make how it should

uh interpret and execute your designs.

So, we'll start with this file styles

file. That's hard to say. Globals.css.

When you publish your library to Figma

make, it created this file for you. And

this is where we've extracted things

like color tokens, typography scales,

uh, spacing, and more into CSS. Now, if

you are code savvy and you would like to

edit these styles in any way, you

absolutely can. You can click in and

make edits to this file right here. Um,

but you don't have to, right? We're

going to extract all the basics over

here for you. Now, on the other hand,

you're going to have this guidelines

file, guidelines empty. And this works

alongside your CSS file to give make

additional context about how you want it

to proceed with every single prompt in

this file. So you can think of it as

like a free form text file where you can

add your own rules or instructions that

you want adhered to throughout the

duration of this file. Um so things you

might want to put in this file. I would

think about any details that should

persist um that might not be immediately

apparent from just pasting in this

frame. So for example, interactivity or

respons responsivity details that make

should consider with every prompt. Um

for example here I might want add

pressed states to all buttons to ensure

that persists every time and that way I

don't have to repeat it in my prompts

every time over and over and over again.

Cool. So we have edited our guidelines

file over in the code tab. I'm going to

jump back into the preview here. I'll

also note that um once you select a

library and attach it to this file, it's

going to persist for all future prompts

as well. So that means you can't remove

the library um or change to another one.

If you wanted to do that, you would need

to start over with a new Figma make

file.

Okay, so now it's time to start editing

this to get my site up and running and

feel really good about the output here.

And in Figma make you have a few

different ways that you can take this

initial output and expand upon it. You

can use something called point andedit.

You could simply reprompt and you can

also always attach images or additional

Figma frames to those prompts to

continue guiding the AI along the way.

Now point and edit is probably my

personal favorite. So we're going to go

ahead and take a look at that here. Now,

the point edit tool right here in your

prompt box allows you to highlight

specific parts of your design and make

direct changes without always needing a

brand new prompt. So, depending on the

element you click, um, if it's, you

know, an image or a text field, etc.,

we're going to pop up a little toolbar

here that lets you adjust things like

color, corner radius, spacing, and

padding, even typography settings. Um,

so this is a great way that you can make

really small visual refinements and even

layout tweaks that are often much faster

to run this way instead of reprompting.

So for starters here, maybe I want to

bump up the size of this location text.

I can come in and change that however

I'd like. I probably wouldn't go that

big. Um, but you can see that it's

already going to go find all of those

matching layers and make sure that it's

applying those changes um, wherever it

should in those repeating places. So

really nice quick efficiency tip there

where Figma's going to recognize what

you're trying to do and help you scale

up those edits.

Now you can also use this point andit

tool to target a specific element for a

prompt driven update. So for example um

maybe I want to add some animation to a

button or swap a component for another

picture or image that I'm pasting into

the chat. For starters, I can show you

here that if I select this button, maybe

I want to give it a cool bounce effect.

So once I've selected the div, it

attaches that right here as context into

my prompt box. And I can ask for

changes. So I can say make this button

bounce when I hover over it with my

mouse.

Now I can send that off, of course. But

again, for sake of time, I'm going to

jump over into that next demo file where

we've done that exact same prompt. And

you can see that Figma make is giving me

a really cool little effect here for

hovering over with my mouse that's

targeted just to that dig that we

selected.

All right. Now, while we are here, I'm

going to go ahead and use pointedit as

well to try and tackle this image issue.

Right? I want to make sure all those

images are coming over as they should.

So, what I'm going to do is select the

section of my design that I'd like to

target. Um, in the box here, I'm going

to go ahead and tell Figma make to

populate each of these browse cards with

an image as per the attached design. And

then I'm going to jump back to my design

just to make sure I give it all of the

help it needs. And I'm going to grab

that frame that I'm interested in again.

Copy it. Command C. And bring it back

over. Here I am. Paste into my chat bar.

Um, so I've got my div selected. I've

pasted in my context. And I can send

that chat off. Sake of time here. Again,

I've got another file. You're used to

this by now, but we've got that same

prompt. And we can see that Figma went

in and updated all of those cards,

bringing in those images. So AI isn't

perfect, but usually you can prompt

exactly where you need to go to get

really targeted and make those updates.

All right. Now, as you start to think

about building this prototype out

further, for example, adding in new

screens or building multi-page flows,

when you're doing this as a general best

practice, it's usually helpful to keep

your follow-up prompts smaller and more

focused as opposed to saying something

like, um, link all designs from

dashboard in my project and pasting

everything all at once. Right? By making

sure that you're working through each

step in a focused way, you're going to

get better results as you continue to

build out this make. Another tip that I

like to give people is to make sure that

you're telling make what you don't want

to change. So, writing something like

link this design and pasting one in, but

change nothing else about the existing

design. AI can have a mind of its own

and that little extra prompt can stop

you from creating problems that maybe

you didn't otherwise plan for. Um, now I

will say that if something happens and

it does make a change that you weren't

expecting or maybe you just don't like

the output and you want to try again

with a new version, um, scrolling back

up in your chat history, you can use

this little return button after every

prompt to restore the previous version.

Um, so you've got a little bit of a a

built-in safety net there for you in the

panel.

Now, we've got this working prototype,

and up until now, we haven't touched a

line of code to generate this other than

just showing you that CSS and guidelines

file. Um, from that same point andit

tool, you can target any element on the

page. And you'll see a little button

here called go to source. And if you

click that, it's going to jump you over

into the code tab and also highlight

exactly where that element lives in your

code base. So here you've got access to

a lightweight code editor. It lives

right inside your project where you can

view the code, modify it, or even write

your own code if you'd like to. Um, you

can also explore all of the files that

have been generated as part of this

project throughout the Figma Make AI

process. Um, so you can bring in your

dev partners in here or if you have

coding knowledge and want to make some

quick changes here in code instead of

going through the prompting tool, um,

you have access to design in all three

of those ways. Prompting, point and

edit, and straight here in the code tab.

I'll also point out two quick tools over

here that are nice little time savers.

Um, this one is a quick formatting tool.

So, if you click this, it's going to

clean up any messy code or spacing or

indentation issues that can arise when

you have AI coding solutions. You also

have a download button that will give

you the full codebase as a zip file for

easy handoff to your devs or if you'd

like to host a live version of this

project somewhere else.

Now, once you are happy with your

prototype and you are ready to start

sharing it with others, there are a

couple of ways that you can do that. Um,

files are really easy to preview and

share. If you're used to Figma design,

it's going to feel a lot like sharing a

standard Figma prototype. So, up in the

right hand corner, you have this play

button here. You can click this and it's

going to open it up in a new tab full

screen view uh interactive preview of

your prototype. Um so this is one way

that you can take a look at this in that

full mode without the distractions of

the the editor and Figma make. From here

you also have access to the share

button. And again it's going to feel

really similar here if you're used to

Figma design. When you click share,

you're going to get options to share

this with other members of your

organization. You can choose if you want

to share with a particular team, for

example. Um, or you can even toggle it

to anyone to create a public link and uh

share this with people who don't have

access to your Figma organization.

Now from there you can either click copy

link or you can even use this button

copy link to full screen view if you

want to default the viewer into that

full screen preview experience.

So that method allows you to share a

link to this prototype or a link to this

file within Figma. You also have access

though back within your um Figma make

interface to publish this file directly

to the web. Um some caveats here. Your

organization admins need to allow

publishing in your org in order to

publish. They can choose to disable

that. So talk to your org admin if you

don't see that option and you think it

might be a good fit for you. Now when

you hit publish, your project will be

assigned a dedicated URL. Um if you are

using a custom domain in Figma,

depending on your plan, you have access

to a certain number of custom domains.

We will publish it to that domain. But

once you go ahead and publish that, that

file is going to be instantly live and

accessible on the public internet. Um,

so consider this option carefully for

any work that you'd rather keep

internal. In that case, it's probably a

better choice to share the file going

through that share route instead of

publishing to push it live to the

internet. Um, now publishing can still

be a great option if you're working on

things that are not top secret or locked

down. you're building fun apps or things

to share with friends and family, then

publish is a great fun option there

because it'll instantly bring it live.

All right,

jumping back over into our slides. Um,

that's the end of our like live demo

piece of Figma Make, but seeing all of

those features in Figma is really only

part of the story, right? like we know

that the real magic is going to happen

when you're able to start applying all

of these things to real challenges in

your workflows. So for the next part of

our webinar here, we're going to talk

through and show you some concrete

examples of how Figma make can fit in to

your product development processes.

Hopefully we are. Let's go slides. There

we go. All right. Kicking off, we're

going to start by talking about

discovery and ideation. So, I think that

Figma really shines here at the front of

your product development life cycle

because it is so effective in helping

you move from totally blank page to a

live concept and doing that really fast.

Um, so kicking off in these early

phases, Figma is great at helping you

think outside of the box. So, you could

prompt make with an open-ended or really

exploratory idea, and that'll allow you

to uncover directions you might not have

otherwise considered. It can help you

get out of your own bias or if you're in

a creative rut during that ideation

phase by just unlocking the power of

that AI expanded thinking.

Next, we've seen that Figma make can

also be really helpful in speeding up

industry research. So, you can prompt

make to reflect on patterns across your

industry or common best practices to

quickly generate a variety of ideas all

at once without spending hours on

personal research. So, this can give you

a fast sense of what's typical and what

you might want to disrupt.

Finally, in this last one here, as

you've seen already, Figma really excels

at that rapid concept validation. So,

you can near instantly turn these

lowfidelity designs or even static

frames into live interactive prototypes.

That makes it easy to explore more ideas

than you could previously, considering

constraints on bandwidth and resources.

It also means that you can collect

feedback earlier on by having something

live to share and quickly pivot to new

ideas and testing alternatives without

investing a ton of time or effort.

Now, let me give you a quick example

here. Let's say that I manage a grocery

app called World Peas. Clever name. I'm

interested in exploring better ways to

call out that these items are on sale

during the browsing experience. Now I

could start by throwing a bunch of ideas

out there and looking into other apps to

see what's standard but that can take a

lot of time right so in this example I

have simply given Figma make a frame for

my design and asked it to give me some

ideas considering best practices and

common approaches found in the industry.

In return make created this great

exploratory resource for me. So, it

allows me to toggle through some common

approaches like a sales badge or a

strikethrough price and better see what

those would look like mocked up live

onto my own design. So, now I've got a a

quick way to accelerate all of that

research and start generating some ideas

pretty quickly.

So, let's say I really like that sales

badge idea and I'd like to see how it

would look live in my mobile application

and start shopping this idea around with

colleagues. What I can do is easily grab

a screenshot of that output from the

idea file and get started. So here I had

an existing make prototype and I told

make use this design as inspiration and

add a sale badge to the ginger and

raspberry components. And in just a few

moments I've got a working prototype

that looks and feels just like my

application. Um so that I can start

exploring what that's really going to

feel like in real life. And if I want to

explore multiple of these ideas, I can

easily rinse and repeat and I've got a

couple of different paths to show people

right away. Another pro tip I like to

point out here, go ahead and create a

few really solid make prototypes of

areas of the product you own or other

hightraic user flows. That way you can

use them kind of like templates and

duplicate those files to quickly explore

new directions anytime you want to get

started with exploring a bunch of ideas

in this highfidelity way. Um it's a

method that I recommend especially

because when you duplicate a make file,

it's going to retain that full chat

history. Um so that you don't have to

start from scratch every single time

you're prototyping one of these up.

All right. Now once you have moved past

that early ideation phase, Figma make

will continue to support your work as

you shift into defining and designing

your experience. Now we have talked at

length already about how make is going

to help you with interactive

prototyping. What I think is worth

double clicking on here is how those

prototypes might differ from what you

can build in Figma design. Now because

your make files are codeepowered, you

can build more complex animations, you

can build input fields, you can build

transitions and other details that

either wouldn't be possible in your

Figma design prototypes or they would be

very very timeconuming and very complex

to build. So putting them here into make

is going to help bring those prototypes

to the next level. Make is also built

with responsive adaptation in mind. So

as you are evaluating designs across

different platforms, you can use Figma

make to instantly research responsive

variations, understand um and refine

break points and layouts across

different breakpoints. Um and then

finally, we've also seen Make serve as a

tool for coaching and critiques. So you

could prompt Figma Make to evaluate your

designs for clarity or hierarchy or

whatever it may be. Um, and it can also

help you from there explore different

layouts or offer suggestions that you

might not have thought of, all with the

goal of improving your design quality.

So, I'm going to start here by showing

you an example of a more complex

prototype. Here is my grocery app again,

World Peas, and I'm actually going to

toggle over and just show you this live

in Figma Make. Um, this, you can see, is

really a fully functional experience. We

can add a product to our cart, go into

our cart, go to the checkout flow, and

even start going through a realistic

form fill experience. Um, this was all

created in Figma Make via prompting. And

our designer advocate, Anna, who created

this, has really noted the complexity of

this build and how having this live in

Figma Make allowed her to develop a much

stronger prototype. While I'm here, I

also want to call out the device preview

button. up here. Um, I don't think I

showed you that before. This will let

you also quickly preview that design

across different uh mobile devices. So,

again, a great way to quickly test your

design across those different devices

and get a feel for how it's going to

behave.

Coming back into our slides here, here's

another example of how you might use

Figma make for these critiques. So

here's an example where we've given it a

design and said without making any

changes critique the balance and

hierarchy and it's given me its thoughts

on those output. I can then decide from

there if I want to ask make to implement

those changes and see what it might feel

like or if I like my design and I don't

want to accept that critique that's okay

too. The key here, the tip I want you to

take away is without making any changes.

That allows you to make sure you're

using Make more like a chatbot instead

of an agent whenever you want it to give

you feedback but not actually touch your

design.

All right, next up, we're going to move

into validation and user testing. Now,

in this phase, you're starting to share

those live prototypes that you developed

to test with users, test with real

users. And because you can publish these

to the web if you choose to do so, you

could share live applications that are

accessible across real devices to help

you validate flows and features and

usability. Now, you can also uh augment

your prototypes with back-end

capabilities using our native

integration with Subabase. So, that's

going to allow you to test things like

user authentication flows um to create

like a content storage solution on the

back for photo or file uploads. Um, and

it does even more kind of database

backend solutions so that your designs

can feel more realistic and robust. Now,

as you start to capture feedback, you

can quickly adjust those prototypes in

response to what you've learned from

your users. Another cool tip is you

could consider asking Figma to guide

users through specific tests if you're

running guided user tests. Um, so if

you're looking for a really targeted

form of feedback, we'll show you how you

can create one of those guided

prototypes there.

Last but not least, because Make is

powered by code, you can also easily

test your designs with real data sets.

So, that's a great way to simulate

realworld scenarios and see how your

designs might respond to edge cases when

they're input with a live data set. Um,

you can either upload sample data files

to populate your designs or even ask

make to generate its own sample data

tables to get you started with some mock

info. So, showing you some of these live

here. Um, here's an example where I've

asked Fibake to add login functionality

to that world peas app using Superbase

on the back end. And what that allows me

to do is actually show a live login and

sign up experience and even authenticate

when there's an error to show me that

haven't met my password requirements

here. So, we've got one that again is

live and functioning and feels really

realistic for my end users.

This is an example from another project

where we told Figma that we'd like to

run a guided user test. We've given it a

little bit of context about what we'd

like to test and how to keep the user on

track by helping them find their way

back to this data table. From there,

Figma added this testing functionality

where we can start a user test and it

guides the user down to where they'd

like it to go to keep them on task if

they stray.

Finally, to show you an example of how

sample project data might work to

populate that dashboard, we have asked

make to create a data file with a list

of 200 projects and ids and dates and

more. Figma make generates that and

populates it right into our design. So,

you can see all of those project data

files right here under the data tab. And

then we can see how they actually look

when they're populated into our design.

down here. As we go down to the bottom,

we can see where we maybe have some

issues with layout that we need to

address for some of those edge case

projects with longer names. Again, you

can also upload your own file data um or

prompt Figma make to create whatever

type of data you'd like here.

All right, nearing the end of our sample

use cases, we're going to finish up with

how make can help play a key role in

bridging the gap between design and

development. Now, it's one of the most

common challenges we hear about aligning

that design intent with what actually

gets built. Now, with make, you can of

course share prototypes that feel like

the real product. And that's going to

help everyone in line on the attempt

really quickly and also minimize the

number of iteration cycles that you need

to go through to get to clear

implementation details. You can also use

make to generate design specs and

handoff details as part of this process.

So two examples I want to show you here.

The first one is a real example of how

we used Figma right here at Figma to

align design and dev on a pretty complex

feature. So this is an early snapshot of

how the team behind grids in Figma

design built the vision for that layout

picker over here in Figma make. And it

was helpful for our designers because

they could show the engineering team

live how they imagined things to move

and feel really really quickly. This

prototype took about an hour and a half

to develop in Figma make and the team

estimated that if they were to prototype

this out in code due to its complexity

it would have taken several days.

Another example here on how you can use

make to help with handoff details. Right

now make only codes in React and if you

are using other frameworks you can

simply ask make to assist with those

specs. So in this example here we have a

prompt make it so that there is JSON

code output describing all the

parameters and make it update as the

input changes and we can see that make

generated this data output panel right

over here that translates all of those

parameters into JSON and allows us to

export them from there. So really handy

tool that'll display that code output

for your devs to use as a starting point

or even just inspiration for the

ultimate solution that you choose to go

forward with. Um, another prompt here is

you could prompt make right in that chat

to give you handoff specs for your build

without changing the code at all. Use

those magic words. And if you do that,

then your specs will return to you right

here in the chat box. You could also ask

it to add those specs to your code

files. Generate a folder in your code

files for handoff specs in another

framework. Um, and then you can export

them from there.

Oh no, where are my slides?

I'm in my slides. All right. As we get

ready to wrap up our webinar today, I

want to leave you with a few next steps

and recommendations. First, highly

recommend that you try Figma Make. Get

in there, build some stuff. The best way

to start seeing the potential here is to

really get creative and using it for

yourself and thinking about how to fit

it into your own processes today. Um,

we've got an awesome community file that

can help you get started right away. I'm

going to toss it into the chat now

alongside another file which is eight

essential tips for getting started with

Figma make. Um most of these are things

we covered during today's webinar like

how to prompt when to use point andit um

but you can have those all recapped in

this awesome blog post and that you can

share out with your teams as well.

Finally would also encourage you to

explore the Figma community if you

haven't been in there lately. There is a

whole tab dedicated to Figma Make where

you can see projects from fellow

community members um and use that for

inspiration or just download to see how

they prompted and and start learning for

yourself.

All right, we have a little bit of time

left for Q&A today. I know that the team

has been hard at work answering

questions in the chat. Um, so I'm going

to go ahead and run through two FAQs

that I'm sure have come up or if not,

um, will maybe come up for you at some

point and then we'll take a look at

anything that's left in the chat here.

So, one question we hear about is when

should I use a prototype in Figma make

versus a standard prototype in Figma

design? And the guidance I would give

you here is that Figma Make is a great

option for brand new ideas or

explorations for complex prototypes that

you can't or just don't have time to

make in Figma design or any prototypes

where you'd like code powered

functionality including those backend

integrations, code layer animations,

working input fields, and more. Now,

Figma Design is still a great option if

you're building something really

lightweight and you're confident in

prototyping. Um, or if you are really

attached to the in prototype comment

functionality in Figma design as of

right now that's only available in your

design files. If you're prototyping in

Make instead and are thinking about ways

to still gather feedback, uh, spin up a

Fig Jam file. That's a great way where

you can capture those feedback in

stickies. And Fig Jam has great AI built

in as well where you can quickly

summarize all of the themes or sort

those cards into categories uh to help

you make sense of all the feedback that

you're getting.

All right, the next question that we

hear all the time and I see a few of

them in the chat here. Can I copy a

design from Figma Make into Figma

Design? The answer here is not today,

but we are working on it. So over the

next weeks to months, you will hear

about this. We're taking a phased

approach to getting those designs back

into Figma design. So expect to hear

something on this very soon. We know

that being able to take that output from

make and put it into design and finetune

it and get it exactly how you'd like on

the design side is a high priority. So

more to come here.

All right, I am going to jump back over

into the Q&A and see if there are any

that I can help cover live here. Um, I

see a question on I'll go ahead and

answer this live. What is the technical

reason why we can't swap a library? I'm

just interested to know. I assume it has

something to do with the history. It's a

great question. I don't have the the

technical answer for you here today, but

what I can tell you is that attaching

that library as style context is step

one in our our journey to getting your

design system and Figma make fully

compatible. Right? So, right now you can

push that style context over and kind of

reference some lightweight styles for

typography and colors and whatnot. Um,

but we are working closely over the next

again weeks and months to bring those to

parody so that you've got a lot more of

a robust solution that aligns your

design system with Figma make.

Um, let's see. So, we've got a couple of

those that we've answered. I'm going

through here.

Um, can we download images after we make

changes in the code? Um,

great question there.

I'm assuming you mean can you download

the like assets in Figma? I believe

those will come through through the code

file download button. Um, but we can

follow up on that and check on this to

confirm.

Let's see. I see a question. Could I use

Figma make to make and host my

portfolio? Yeah, absolutely. I'd also

consider Figma sites for that use case

as well. Um, so Figma sites is another

tool that you have access to in Figma

that has um site functionality built

right in and it has code layers where

you can prompt to create animations as

well. But also highly recommend if

you're thinking about that use case,

Figma designed for beginners, our new

course available on YouTube and on the

Figma help site. It specifically goes

through a use case of how to build a

portfolio. Um, so that might be one

that's really helpful for you.

All right, rolling through here,

let's see. I know we've got a ton of

questions, so thanks for your patience

as we're working our ways through this.

All right, I see a question here uh from

Daria. I was doing a prototype of a

multis-creen flow. For some time it went

really well but eventually for Figma

make it started to forget what was built

before and ruined the functionality we

had already covered. Are there any ways

to prevent that from happening? Great

question. I think using that prompt of

please don't change anything else in the

design only make these targeted updates

is a great way to do so. Leaning on that

point andedit tool to target in on

exactly the elements that you'd like the

design to change is a really good one as

well. Um, and also using that revert

button, if you notice something has gone

off course, you could go back to the

previous version and try again. Um, all

of those are ways that you can kind of

future proof against that.

All right,

scrolling through here.

I see a question on dev mode from John.

My team is trying to push Figma dev mode

as our tool for design to dev handoff.

Highly recommend. It's awesome. Join us

for intro to dev mode if you're

interested in that. It's another webinar

that we run regularly. Um I'll throw the

link in the chat. But to finish your

question, does Figma have any dev

annotation functions, component source,

variable used, inspecting, design, etc.?

So um if your users have a dev seed they

do have access to the code functionality

within Figma make so they can access

that code panel and see everything in

there. Beyond that we're working on much

tighter alignment between these tools.

Um so for now I would say dev mode is

your place to go to get really all of

the fine-tuned really specific details

especially if you have something like

code connect up and running. Um but our

team is thinking about this every day

and is also very very open to feedback.

Um, so please feel free to pass your

thoughts along and we would love to take

those into consideration as we work on

building those integrations.

I see a question here. If the library is

updated, will make update your designs

based on that library? Um, today the

answer is no. You would need to push

that library over again and reprompt.

Um, but again, we are working on much

tighter integration and I bet you can

hear more on this pretty soon.

Scrolling through here um to see if

we've got any other ones that are

popping up a good bit.

Are we going to publish design or are we

going to publish guidelines around how

to best set up the design library file

so that when we are attaching them to

make it will ingest the pattern library

in the most optimized way? This is a

tricky question to answer. I would say

today make sure you in your actual

designs and for all of the components in

your library make sure your layers are

really clearly named. Make sure you have

auto layout set up. Um, today Figma Make

is going to look again at like styles

and typography. As we increase that

integration between Figma and your

libraries, you're going to see even

tighter clarity there between the two.

So, no guidance today, but expect more

to come as those features roll out, and

we'll make sure that we get those all

synced up and running really nicely.

All right. Can I download interactive

prototype files from Make? Yes, you can

download those from the code tab and

you'll have all of the files um there in

that zip file.

All right, scrolling through here.

We have um

a lot of similar questions on design

systems on dev mode functionality.

Looking for any that would be unique to

cover here live. Can you copy multiple

screens from design to make? Our

recommendation there would be going one

screen at a time. As long as you're

being focused and and you know working

on that one screen at a time to build

out your larger flow, your output is

going to be much much better than

pasting in a bunch of files all at once.

All right.

There are some specific questions here

in the chat um that seem related to

specific files. Um if you're having

issues with particular designs,

definitely recommend contacting our

support team. They might need to take a

closer look at those.

I see a question here on custom fonts.

Um, as far as I'm aware, Figma Make does

not support custom fonts today, but it's

something we're working towards very

rapidly alongside those design system

alignment things. So, um, more to come

on that in the near future.

Um, and I see in the chat, what do I

mean by custom? Um there's going to be a

default set of fonts supported there

today in Figma make. Um others that you

maybe have hosted in your own Figma

design platform or outside of that set

selection there um are not supported

today but again working on that. We

understand those are a large part of

your libraries.

Can animations be achieved through

prompting? Absolutely. Those are things

that you can do live in Figma make. No

problem.

And I think that we will go through

about one more question here. We'll do

our best to follow up with guidance on

the rest of our questions in a follow-up

email for you here, too. Um, does Figma

make have MCP access? Question from

Zach. Um, today, no, it does not have

MCP access. So, that'll be exclusively

through dev mode. Um, but again, we're

working on those integrations all the

time. This product is really new, so

eager to hear feedback on all of those

and how you would use them.

All right, we are going to go ahead and

wrap up a little early today. I don't

believe we're going to have time to get

through the rest of the questions here,

and most of them are duplicates or

related to things we've talked about,

but I will make sure to take a look

through and send out resources for any

common themes there. Thank you all for

joining us today. I really appreciate

you being here and hope you were able to

take away some ideas for how to bring

this into your workflows. Bye everyone.

Thanks so much.