Figma tutorial: Intro to Figma Make

Figma make is [music] an AI powered prompt to app tool that turns your ideas into interactive prototypes and even working products all backed by real code.

No matter your role or skill level, anyone can use Figma make to generate working applications that can be published to the web.

Use Figma Make to explore different interactions, map out user flows, or just build something cool. Ready to

start building? Let's take a tour of Figma make and see how easy it is to get [music] started.

Head over to this URL to create a new make file so you can follow along.

Opening a fresh Figma make file also opens up a world of creative possibilities. Whether you're starting

possibilities. Whether you're starting from scratch with just a text prompt or are looking to add interactivity to already polished designs, the prompt box is your gateway to bringing your next great idea [music] to life. If you have

an existing Figma design file, you can attach design assets directly to your prompts. To do this, either copy an

prompts. To do this, either copy an object from Figma design and paste it into the prompt box, or right click [music] on it and select send to Figma make.

When attaching design assets, we recommend naming your layers, setting proper frame constraints, and applying auto layout. [music] These

details help Figma make interpret and process your designs into functional code.

If you're on a paid plan, you can also attach design libraries to your prompts.

This lets Figma make access your styles and generate prototypes that are consistent with your design system.

No design file? No problem. Consider

attaching reference images to your prompts instead, like lowfi wireframes, inspirational screenshots, and even rough sketches. These references will

rough sketches. These references will give Figma make an idea of what you're trying to build. The initial prototype may be a looser interpretation than something generated using polished design assets, but it will be a good

starting point that you can work from.

And finally, if you want to start completely fresh, you can always begin with just a text prompt and a dream.

If you're looking for a little inspiration on what to make first, try browsing through some Figma make examples from the Figma community. These

examples give you a firsthand look at how community members are using Figma Make to build everything from data visualizers to micro interactions. And

if a specific project catches your eye, you can remix it. Remixing allows you to build off of an existing project. It's a

great way to explore different ideas and gain experience using Figma Make without having to start completely from scratch.

Text prompts are the foundation of Figma Make. They allow Figma Make to take

Make. They allow Figma Make to take plain language and turn it into a real app. When writing your first prompt, be

app. When writing your first prompt, be sure to frontload it with all the important stuff. The initial prompt

important stuff. The initial prompt establishes the foundation you'll be building on. So, include key details

building on. So, include key details like a description of what you want Figma Make to build and who your intended audience is, the type of device you're building for, a list of core

features and technical requirements, and any design style preferences. Don't

be afraid to include a lot of detail.

The more information you provide, the better the initial output will be.

When you're happy [music] with your prompt, click submit and Figma will get to work.

The Figma Make Editor has two primary areas. The left sidebar, where you'll

areas. The left sidebar, where you'll enter prompts, and the preview space, where you can test your prototype and access the code. While your app is being built, Figma Mag will display helpful

details in the left sidebar, including the requirements you entered or ones it identified on its own.

a preview of the code being written and the reasoning behind the decisions it's making. By default, this information is

making. By default, this information is minimized, but you can expand these details to learn more about how Figma arrived at a certain decision.

Great products are rarely built on the first try. Luckily, it's easy to iterate

first try. Luckily, it's easy to iterate and explore different ideas in Figma Make. Let's check out a few things you

Make. Let's check out a few things you can use to refine your app after the initial prompt. Figma Make does a lot of

initial prompt. Figma Make does a lot of the heavy lifting, but remember, your ideas, your style, [music] and your vision are what make a product great.

You can think of Figma Make as your design and engineering partner. And like

all great partnerships, communication is key. Complex projects usually require

key. Complex projects usually require multiple rounds of follow-up prompts.

You can enter these in the left sidebar along [music] with additional design assets and reference images. We

recommend breaking these up into smaller, more focused requests. This

incremental approach will help you craft complex interfaces [music] piece by piece while maintaining control of the overall design vision. While you

work, don't forget to actually play with what you're building. Testing your

prototype will uncover opportunities to make the experience even better.

You can use the mobile preview option to view your prototype on a variety of device sizes and hit refresh to reset the preview at any time. Remember,

making should be fun. Feel free to let your imagination run wild. If you ever want to return to a previous iteration, you can click restore this version to go back at any time.

For targeted refinement, you can use point and edit to select and change individual design elements. When you

select an element, a handy toolbar will appear, letting you make quick adjustments, [music] like changing the spacing, color, or font style. You can

also use the inline prompt box to iterate over the selected element.

For even more granular control, you can also click go to source to jump to the element in the code view, making it easy to find and adjust the code running behind the scenes.

The code tab is also where you can add a guidelines file to your project.

Guidelines help Figma make better match your needs and expectations. They can

include instructions for how you want Figma make to behave in terms of coding and personality, general rules you want the AI to follow, [music] or requirements around how specific design elements should be treated. To view an

example guidelines file, check out our help center.

Like all Figma products, Figma is built for sharing and multiplayer collaboration. [music]

collaboration. [music] You can share apps and prototypes with your team to get feedback, do some user testing, or even let others contribute by adding prompts or editing code.

Click the share button in your make file to invite people directly or change the file permissions so the whole team can jump in and start building.

Templates offer another way to share Figma make files with your team. Think

of templates as sandboxes with built-in guard rails. You can use the guidelines

guard rails. You can use the guidelines file to control which elements can change and which should stay fixed.

Templates are a gamecher for team brainstorms. Everyone can dive into feature iteration without fear of compromising the design [music] experience you've built, turning individual work into teamwide

exploration.

You can also copy Figma make previews as design layers and paste them into other tools like [music] Figma design where you can edit the layers using design tools. Figma slides so you can share a

tools. Figma slides so you can share a visual snapshot of your Figma make explorations or Fig Jam so your team can give feedback and share ideas for your next iteration. [music]

next iteration. [music] Okay, you've iterated, prompted, and collaborated your way to something amazing that absolutely must be shared with the world. Luckily, you can publish

your projects directly from Figma Make.

Published projects live on the web with their own sharable URL that you can copy and send to anyone you like.

Once you're feeling comfortable with the basics, check out these additional workflows to supercharge your Figma make projects. We'll touch on these briefly,

projects. We'll touch on these briefly, but you can visit our help center to learn more. Figma can connect to other

learn more. Figma can connect to other tools via the model context protocol or MCP, letting you pull in project details, requirements, or documents from external tools to help inform your

prototype. It's a shorthand way to give

prototype. It's a shorthand way to give your prompt some extra context without needing to type it all out manually.

Adding a backend to your Figma Make project unlocks things like user authentication, data persistency, and multiplayer functionality. Figma [music]

multiplayer functionality. Figma [music] partners with companies like Supabase, making it easy to add a backend to your prototype.

Thanks for following along on this quick introduction to Figma Make. Now that you know the basics, we hope you're ready to go out and make something of your own.

We're frequently adding new features to Figma Make, so be sure to subscribe to stay uptodate on all the latest Figma Make news.