Figma Make: A Complete Guide to AI-Powered Prototyping

Figma Make is Figma’s prompt to app tool. You describe what you want in plain English, add design context such as frames or screenshots, and Make builds a working, clickable prototype or small web app that you can test, refine with follow-up prompts, publish to the web or hand to developers. It suits designers, product managers and founders who want to feel how an idea works before anyone writes production code.

This guide explains what Figma Make does as of October 2026, how to build your first prototype step by step, how to give it your design system, and where its limits are. It is written for people who are new to AI design tools. Plan and seat rules change often, so check Figma’s pricing page for your account before you rely on any feature.

Related reading: v0 vs Figma Make, Lovable vs v0, and Lovable vs Bolt. Key terms used in this guide: model context protocol and prompt injection.

What Figma Make is and who it is for

Classic Figma prototypes are pictures linked together. You click a button and jump to another frame, but nothing really happens: a form does not remember what you typed, and a filter does not filter. Figma Make closes that gap. It writes real code behind the screen, so the prototype behaves like software.

Figma’s help center describes Make as an AI-driven prompt-to-app tool that turns ideas and existing Figma designs into functional prototypes, web apps and interactive UI. You can start from your own designs or from content in the Figma Community.

Who gets the most from Make:

• Designers who want stakeholders to click through a flow that actually works.
• Product managers who need to test an idea with users before a sprint is planned.
• Founders and small business owners who want a quick demo of an app idea.
• Developers who want a working reference for behavior and styles, not a static mockup.

Who should look elsewhere: anyone who needs a large, long-lived codebase with a full database from day one. More on that in the comparison section.

Key features of Figma Make

Make sits inside the Figma family, so it shares accounts, files and permissions with Figma Design. Here are the features that matter most for a first project.

Prompt to working prototype. You write a request such as “a three-step booking form that remembers the chosen dates” and Make generates the screens plus the logic behind them. You then keep chatting to change layout, copy, colors or behavior.

Design context from Figma. Make starts from Figma’s design context rather than a blank page. Figma’s pricing page lists one useful detail for paid plans: you can copy a Make preview as design layers to paste and edit in Figma Design. Figma’s help center adds that changes to those layers do not flow back into the Make file. The layers are a picture of the result, not the result itself.

Backend through Supabase. For prototypes that need logins or saved data, Figma’s pricing page says Make can connect to Supabase to add user authentication, store user data and connect private APIs. Make does not set up a full SQL schema (per Vercel, which makes the rival tool v0).

GitHub push and publishing. Make can push code to a new GitHub repository it creates and can publish prototypes and web apps to the live web, with audience controls that depend on your plan. The push is one-way: the next push overwrites changes made in the repository.

A bridge to coding agents. Figma’s developer docs say the Figma MCP server can retrieve Make resources and pass that code to an AI coding agent as context. MCP (Model Context Protocol) is a standard way for AI tools to read data from other apps. Figma also lists Make files among the file types that its design context tool supports.

AI credits. Make runs on AI credits. Figma’s AI Usage API reports seat-level credits and plan-level shared pool credits per user and per day, with Make listed as one of the editor types. In practice, every prompt you send draws on your allowance, so long chats with many small tweaks cost more than one clear request.

How to use Figma Make: step-by-step guide

Build your first prototype

Start with something small enough to finish in one sitting. A sign-up form, a booking flow or a simple calculator is ideal.

1. Check your access. The free Starter plan includes Make with a small daily and monthly AI credit allowance. Full seats on paid plans get full access and more credits; Dev and Collab seats can try Make in drafts only. If you are unsure which seat you hold, ask your Figma admin or look at your account settings.
2. Write a one-paragraph brief before you open Make. Say who the user is, what they need to do, and what “done” looks like. Example: “A booking form for a small yoga studio. The visitor picks a class, a date and a time, enters a name, and sees a confirmation screen with a summary.”
3. Start a new Make file and paste the brief. Add design context if you have it, such as a frame from your Figma file or a screenshot of a layout you like.
4. Review the first preview as a user would. Click every button, type into every field, and try the wrong input on purpose. Write down what breaks.
5. Fix one thing per prompt. “Make the confirmation screen show the chosen time” works better than a list of ten changes at once.
6. Test on a phone-sized screen. Many visitors will open your prototype on mobile, so ask Make to adjust spacing or text size where things feel cramped.
7. Share or publish. Send the link to two or three people and watch them use it without help. Their confusion is your next list of fixes.

Hypothetical example: a studio owner with no coding background follows these steps one afternoon. Her first version shows the confirmation before a time is picked. One prompt fixes the order, a second asks for bigger buttons, and a third adds a “change date” link. She shares the link with two regulars and learns that “class type” confuses them, which no static mockup would have shown.

Give Make your design-system context

A design system is a team’s shared set of colors, fonts, spacing and components. Without it, AI tools invent their own style, and every prototype looks slightly different from your real product.

To keep Make on brand:

• Start from frames that already use your library components, rather than a blank prompt.
• Name your colors and type styles in the prompt, for example “use our primary blue for buttons and our body text style for labels”.
• Ask Make to reuse one component pattern, such as a single card style, across every screen.
• Keep a short style prompt in a note and paste it into each new Make file.

On paid plans, Figma’s pricing page also lists Library styling context, which brings styling from a Figma library into Make, and Make kits, which package your design system as reusable AI context. Starter plans cannot use team libraries in Make.

Export the code and publish

When a prototype is ready, you have three paths:

1. Publish to the web for user tests and stakeholder demos. Figma’s help center says that on the free Starter plan, publishing to the web also publishes to Figma Community, so anyone can see it. Paid plans add password protection, according to Figma’s pricing page. Check who can open the link before you share it.
2. Push to GitHub so developers can read the code. This is a one-way push into a repository Make creates, so edits developers make there will not flow back into Make, and the next push overwrites changes made in the repository.
3. Hand the project to a coding agent through MCP. Figma’s guide on bringing Make context to your agent explains that an agent can fetch single files or a whole Make project, reuse your existing code components and extend the prototype with real data. This only works in coding tools that support MCP resources.

Use cases: when to use Figma Make

Make shines when the question is “how does this feel to use?” rather than “how does this look?”. Good fits include:

• Testing a new flow such as onboarding, checkout or booking with real users.
• Stakeholder reviews where a working demo ends debates that static frames cannot settle.
• Interactive details like filters, calculators, form validation and simple animations.
• Internal tools that a small team will use for a short time, such as a request form.
• Developer handoff where engineers want a working reference for behavior and styles.

It is a weaker fit for apps with complex data, strict security needs or many integrations. There, Make can still produce the first draft, but plan for a developer to rebuild the production version.

Best practices checklist for effective prototyping

Use this checklist before you share any Make prototype:

• The prototype answers one clear question, such as “can people finish booking in under a minute?”
• Every button and field works, including the error states.
• Text uses realistic content, not placeholder words.
• Colors, fonts and spacing match your design system.
• The layout works on a phone and on a laptop.
• No real customer names, emails or other private data appear anywhere.
• You know who can open the published link.
• You have saved a note of the prompts that produced the best result.

Two habits help more than any feature. First, write prompts like a short brief to a colleague: context, goal, constraints, then the change. Second, stop and test after every few prompts. Small, checked steps keep credits under control and stop the AI from drifting away from what you asked for.

What to know before deciding: limits, cost and privacy

Limitations

• The data layer is simple. Supabase support covers logins and stored user data, but Make does not build a full SQL schema (per Vercel, which makes the rival tool v0).
• GitHub is one-way. Choose early whether Make or the repository owns the code, so two versions do not drift apart.
• Behavior stays in Make. Copying a preview into Figma Design gives you layers, not working logic.
• Agent access has limits. Figma’s MCP access depends on plan and seat type. The Starter plan, and View or Collab seats on any plan, get up to 20 tool calls per month, while Dev and Full seats on paid plans get daily limits.
• AI output needs checking. Generated code can look right and still contain errors. Treat every prototype as a draft until a person has tested it.

Cost

Make has no separate price tag that applies to everyone. Its cost depends on your Figma plan, your seat type and how many AI credits you use, since Figma tracks seat credits and shared plan credits separately. Check current pricing on Figma’s official pricing page for the exact seat you would buy, not just the plan name.

Privacy, safety and age rules

• Never paste passwords, card numbers, ID documents, health records or customer lists into a prompt. Use invented sample data instead.
• Keep API keys and secrets out of chat. Store them in the backend settings that are built for secrets.
• Before you share a published link, confirm who can open it.
• Give coding agents the least access they need. Figma notes that you can only reach files you already have permission to view or edit, so avoid connecting accounts with broad access when a narrower one will do.
• Watch for prompt injection. If an agent reads a Make file or document that someone else wrote, hidden text inside it could try to give the agent instructions. Review what the agent plans to change before you approve it.
• Figma’s terms of service allow Figma AI, which powers Make, only for users who are 18 or older. Students under 18 should not use Make, even on a parent’s account.
• For company work, ask your admin how your organization’s AI settings handle content.

Comparing Figma Make with other prototyping tools: a decision framework

Figma Make is not the only way to turn an idea into something clickable. For an outside view, Vercel, which makes the competing tool v0, keeps a comparison page that was last reviewed on 28 July 2026 and describes Make as a tool that creates and edits functional prototypes and web apps. Because that summary comes from a competitor, read it as one view and confirm details with Figma. This table compares Make with three common options. For a deeper look at one rival, see our separate v0 vs Figma Make comparison.

Use this decision framework to choose in a few minutes:

1. Is the main question about behavior? If people need to type, filter or save something to judge the idea, Make beats a classic prototype.
2. Where does your work live? If your designs and libraries are in Figma, Make fits your daily habits. If the product lives in a code repository, a code-first tool fits better.
3. What happens after the test? A throwaway test points to Make. An app you will maintain for years points to a developer, a code-first tool or a coding agent fed with Make context.
4. Who will make changes? If designers will drive edits, Make keeps things visual. If developers will review every change, choose a workflow with branches and pull requests.

Many teams combine options: explore in Make, then hand the winning flow to developers through MCP.

Next step

Pick one small flow from your work or a personal project, write a one-paragraph brief, and build it in Make using the checklist above. Note what you had to fix. That list shows which AI skills to practice next.

If prompt writing and checking AI output still feel new, guided practice makes them easier. Coursiv offers short, bite-sized AI lessons you can take at your own pace. Explore Coursiv AI lessons.

Related guides: Canva Code and AI for UX designers.

FAQ