# Figma Make: AI prototypes and apps inside Figma

> Figma Make builds prototypes and web apps from prompts and designs. What it accepts, what it produces, who can use it, how AI credits work and when to avoid it.

*Tags: ai, tools, figma, prototyping*

---


> [!info] Quick Definition
> **Figma Make** is an AI tool inside Figma that turns a prompt, or your existing designs, into a functional prototype or a web app. According to Figma, what you build is "code-backed" and can be edited visually.


## What can you start from?

According to Make's official page, you can type a prompt or dictate it by voice, and attach designs, images, videos, audio, text files and PDFs. It also takes context from Figma frames, from Make kits (npm packages, variables and styles from published libraries, and usage guidelines), from custom fonts and from external tools connected through [[mcp|MCP]]. The help center adds that you can start from a template or from a cloned GitHub repository.

For complex designs, Figma's guide recommends attaching frames instead of images (they carry structured data), using auto layout, building screen by screen with one or two designs at a time, and saying whether you want a 1:1 copy or only style inspiration. Layout first, functionality after.

## What does it produce, and how do you refine it?

The output is functional prototypes or web apps. The help center describes a chat where you talk to the agent and a workspace with three tabs: Browser (preview), Files (files and code) and Review (code changes as additions and deletions). To refine, you can:

- Click an element in the preview and adjust it in a properties panel similar to Figma Design's.
- Draw or annotate on the preview to give instructions.
- Go back to earlier versions with version history.
- Ask for a plan first: plan mode generates a structured plan before any code is written and is available on paid plans.
- Copy the preview into Figma Design as layers.

To store data, add a login or keep keys, you can add a backend. According to Figma, Payload is Make's native backend going forward: it includes a database, file storage, authentication and an admin panel, and Figma hosts it in the eastern United States. Supabase remains available as a third-party connection, and apps already built with Supabase keep working. Projects with Payload use more credits, and GitHub integration and local codebase workflows are not yet available for Payload-backed apps.

Publishing creates a public URL that is not indexed by search engines by default. There is no analytics dashboard, but you can add a Google Analytics ID. While publishing is in beta, hosting is not billed separately, and on Starter you can only publish to the web if you also publish to the Figma Community. One closed-beta feature, "Make in your local codebase", connects a GitHub repository and lets you change the interface of a real app; it requires the Figma Beta desktop app for Mac and an engineer to set up a `.figma/make` folder in the repository.

## Who can use it, and how much does it cost?

The help center says Make is available to Full seats on paid plans, and that other seats and plans can try it. AI credits are included in each seat. According to Figma's pricing page, checked on October 30, 2026:

| Plan | Full seat | Dev seat | Collab seat |
|---|---|---|---|
| Starter | Free · 500 credits a month (max 150 a day) | — | — |
| Professional | USD 16/mo · 3,000 credits | USD 12/mo · 500 | USD 3/mo · 500 |
| Organization (billed annually) | USD 55/mo · 3,500 | USD 25/mo · 500 | USD 5/mo · 500 |
| Enterprise (billed annually) | USD 90/mo · 4,250 | USD 35/mo · 500 | USD 5/mo · 500 |

The page shows a monthly/annual toggle for Professional but only one figure, so I cannot confirm which billing option it reflects. The credits included in each seat reset every month, do not roll over and cannot be shared. Additional credits are bought as pay-as-you-go or by subscription, with no price published on the page, and according to that page they can be shared across the whole team. On the pricing page, Make is listed among the products of the Full seat; Dev and Collab seats give access to other products and only let you view and comment on Figma Design files.

## How are credits spent?

Each prompt spends credits depending on the model, the complexity of the task and the amount of context. In Make you can choose a model, and some use significantly more than others. Figma does not list the models in the credits article, so check the selector in your own file. As an order of magnitude, the help center gives these approximations on the default model, as of February 2026: changing a font costs 30 credits or more, making a design interactive 75 or more, and generating an app from scratch 100 or more. At that rate, Starter's 500 credits cover about five apps from scratch at most (my arithmetic, not an official figure).

Other rules from the article "How Figma AI credits work," with rates as of October 15, 2026 and subject to change:

- Plan mode is a separate step; the build after approval costs additional credits.
- Undo does not refund credits.
- "Auto fix" and "Fix for me" do not use credits, but submitting a new prompt to fix an issue does.
- At zero credits you cannot do any more AI actions until an admin adds credits or the monthly reset arrives.

## When should you NOT use it?

- When you do not have a Full seat and your flow depends on Make: you can only try it.
- When you are about to type sensitive data into the chat. Figma advises against it: API keys and personal data belong in the backend, not in the prompt.
- When you need a polished mobile experience: Figma says mobile output is still being improved and that full-screen desktop content works best.
- When the design has many images, SVGs or vector illustrations: Figma warns that they are hard for the system to handle.

If you would rather start from a prompt outside Figma, look at [[v0|v0]], [[lovable|Lovable]] or [[replit-agent|Replit Agent]], and the general guide to [[prototyping-with-ai|prototyping with AI]].

## Example

Illustrative example: a designer has a frame for a three-step onboarding flow, with components from her published library. She attaches the frames one at a time and writes: "Turn these three steps into a clickable prototype with a progress bar." She reviews the result in the Browser tab, corrects the progress bar text by clicking the element and adjusts one spacing in the properties panel. Then she asks for the form validations in a second prompt and compares each screen against the original frame.

What she learned: attaching frames with auto layout, instead of pasting a screenshot, gave the agent structured data to start from, which is exactly what Figma recommends.

## Common mistakes

- Assuming the prototype contains the product's logic: what appears on screen does not define rules or states.
- Asking for the whole flow in one prompt instead of screen by screen.
- Pasting API keys or personal data into the chat.
- Spending prompts, and credits, on details you can adjust directly in the properties panel.
- Publishing without checking the rights to fonts, packages and images.

## Sources

- [Figma: pricing page](https://www.figma.com/pricing/)
- [Figma: Make page](https://www.figma.com/make/)
- [Figma Help: Explore Figma Make](https://help.figma.com/hc/en-us/articles/31304412302231-Explore-Figma-Make)
- [Figma Help: Create and edit a Figma Make file](https://help.figma.com/hc/en-us/articles/31304485164695-Create-and-edit-a-Figma-Make-file)
- [Figma Help: Figma Make FAQs](https://help.figma.com/hc/en-us/articles/31722591905559-Figma-Make-FAQs)
- [Figma Help: How Figma AI credits work](https://help.figma.com/hc/en-us/articles/33459875669015)
- [Figma Help: Add a backend to a functional prototype or web app](https://help.figma.com/hc/en-us/articles/32640822050199-Add-a-backend-to-a-functional-prototype-or-web-app)
- [Figma Help: Make in your local codebase](https://help.figma.com/hc/en-us/articles/40775535020695-Make-in-your-local-codebase)
- [Figma Help: What's new from Config India 2026](https://help.figma.com/hc/en-us/articles/43663368947863-What-s-new-from-Config-India-2026)


---

Source: https://www.fernandoux.com/en/wiki/ai/figma-make/