You can try it on the free Starter plan, limited by AI credits: 500 a month with a daily cap of 150. Full access is for Full seats on paid plans, and some features, including plan mode and Make kits, are paid-only.

How is Figma Make different from prototyping in Figma Design?

A Figma Design prototype links static frames with interactions. Figma Make generates real code, so inputs accept typing, data can change, and the result can be published as a website with its own URL.

Can I bring a Figma Make result back into Figma Design?

One way only. Copy design turns the current preview into design layers. Figma notes that the copy isn't functional and that edits to those layers don't flow back to the Make file.

Can I get the code out of Figma Make?

Yes. You can edit code inside Make, download it as a .zip, or push it to a GitHub repository.

Which AI model does Figma Make use?

You pick the model from the chat box, with options from Anthropic, OpenAI and Google. Figma says the default model may change over time and that credit usage for non-default models is still being worked out.

What is Figma Make? Prototyping with prompts

Figma Make is Figma's AI tool for turning a prompt, a design frame or a screenshot into a working prototype or web app backed by real code. You describe what you want, try the result in a live preview, then refine it through chat, a properties panel or the code itself. Starter users can try it within their AI credits.

I'm Hai Le, a UI/UX designer who also writes front-end code. Most of my work is building design systems and handing them off to engineers. This piece is for people who already know basic Figma (if you don't, start with my 7-day Figma plan) and want a clear picture of where Make fits and where it stops.

Feature names, plan limits and behavior were checked against help.figma.com and the Figma blog on October 4, 2026. Make is changing quickly, so treat the updated date at the top as the reference point.

What can Figma Make do?

Figma's help center calls Make a "prompt-to-app" tool. You hold a conversation with the AI to build prototypes, web apps and interactive UI. The workspace has two parts: a chat for prompting and a preview showing a working version of the app.

The parts that matter most to a designer:

Start from your own designs. Paste Figma frames, images or screenshots into the chat. Figma recommends frames over images because frames carry structured design data.
Edit visually. The edit tool and properties panel let you select an element in the preview and change its color, padding, margins and type, much like in Figma Design. The draw tool lets you sketch on the preview. Annotations let you pin notes to the UI and send several of them as a single prompt.
Edit the code directly, and browse or restore earlier versions.
Add a backend through Supabase when the app needs logins or stored data.
Publish to a URL in the form three-random-words.figma.site, optionally behind a password.

The properties panel and annotations shipped on July 30, 2026 and only work in newly created Make files. Figma is explicit that applying these edits still uses credits.

How is it different from a Figma Design prototype?

Both get called prototypes, but they do different jobs. This is how I decide between them:

	Figma Design prototype	Figma Make
What it is	Static frames linked by interactions	Real code generated from prompts
Inputs and data	Faked with extra frames	Typeable, changeable, storable with a backend
Pixel control	High, you set every value	Depends on your prompt and attached frames
AI credits	None	Every prompt and every applied edit
Good for	Testing flows, presenting final designs	Trying ideas fast, testing complex interactions

Take a search field that filters a list as you type. In Figma Design you'd draw each result state by hand. In Make the filter works, and your tester can type their own query.

How far does the free plan go?

This is where people get confused, so here is what Figma's documentation says:

The Starter plan overview lists Figma Make among included products. Make has no file limit there, but usage is capped by your monthly AI credits.
Starter gets 500 credits a month with a daily limit of 150. Credits reset monthly and don't roll over.
The Make docs state that "Figma Make is available for Full seats on paid plans," with other seats and plans able to try it with limits.
Starter users can't use team libraries for style context, and can only publish to the open web if they also publish to the Figma Community.
Plan mode and Make kits are paid-plan features.

Figma doesn't publish how many credits a single prompt costs. At 150 credits a day, I'd treat the free plan as enough to test one small flow and not enough for daily work.

How do you build your first prototype from a prompt?

In the file browser, go to Drafts and click Make in the top-right corner. You can also start from a Make template.
Paste a frame into the chat, such as a sign-up screen you've already designed.
Write a clear first prompt and send it. Figma notes that complex results can take a few minutes to generate. While you wait, you can queue more prompts and reorder, edit or delete them.
Click through the preview. Fix visual issues with the edit tool and properties panel. Fix behavior with annotations or a new prompt.
When you're happy, click Publish in the top-right corner, give it a title and set who can view it.

Here is the first prompt I'd write for a sign-up screen:

Build a prototype from the attached "Sign up" frame. Keep the layout, fonts and colors.
Behavior:
- Email field shows "Enter a valid email address" on blur when the value is invalid.
- Password field has a show/hide toggle and requires at least 8 characters.
- "Create account" button stays disabled while any required field is empty.
- On submit, go to an "Account created" screen that greets the user by the name they entered.
Do not add screens or features beyond this list.

How do you write prompts that don't produce generic results?

Generic output usually starts with a generic prompt. These habits help, and most of them come straight from Figma's own advice on saving credits:

Go one screen at a time. Figma suggests building screen by screen instead of attaching every design at once, and avoiding designs heavy with images or vectors.
List the behavior and the states. Error, empty, disabled. These were the states most likely to be forgotten when I built a library of more than 50 components for Joyme: empty pages, errors, lost connection, and the confirmation before deleting a page.
Use visual edits for small changes. Nudging padding or color in the properties panel is faster and cheaper than describing it in words.
Plan before big changes. Paid plans have plan mode (type /plan in the chat). On any plan you can ask Make to write its plan into a plan.md file, which you read and edit before it touches the code.
Ask it to explain the code when you want to understand what it built without changing anything.

How do you bring a design system into Figma Make?

Every Make file has a guidelines/ folder, and Make reads Guidelines.md first when it generates. Figma recommends many short guideline files over a few long ones, for example components/, foundations/ for color, type and spacing tokens, and composition/ for layout patterns.

On paid plans, Make kits package a published Figma library, npm packages and guidelines so a whole team prototypes with the real product's building blocks. Make kits are available to Full seats on paid plans.

This is close to how I use a DESIGN.md file for this site: the design rules live in plain text that an AI tool reads and follows. For more on that approach, see What is DESIGN.md and Figma MCP and Claude Code.

What can't Figma Make do yet?

Each of these comes from Figma's own documentation:

Sync with Figma Design runs one way. Copy design turns a preview into layers, but the copy isn't functional and layer edits don't flow back to Make.
The preview doesn't support microphone or camera.
Working in a real codebase is still in beta. On May 28, 2026 Figma opened a limited beta that connects Make to a local Git repository, with branches and pull requests. It runs only in the Mac desktop app, and access is by waitlist.
Credits are a hard limit. Every prompt and every applied edit costs credits, and Figma hasn't published per-prompt costs.

I'd add one limit of my own. Make builds what you describe, and deciding what to describe is still your job. On the Car From Japan inquiry form, the changes that mattered most were relabeling the button to "Check availability" and cutting fields from the form. Those decisions came out of a heuristic review and a competitor analysis. A prompt can carry them out once you've made them. The full story is in the Car From Japan inquiry form case study.

When should you switch from Figma Make to Claude Code?

I reach for Figma Make when I need something clickable within a session, especially interactions that are awkward to fake with static frames, such as filtering, typing or drag and drop. Once an idea is settled and has to live in a real codebase with existing components, tokens and conventions, I move to Claude Code on my own machine. This portfolio was built that way.

To try that route, start with installing Claude Code, then read Claude Code for designers. And if you're looking for a designer who can own both the design system and the handoff to engineering, my about page is the place to start.

Sources

Explore Figma Make, Figma Help Center
Create a Figma Make file, Figma Help Center
Edit a Figma Make file, Figma Help Center
Figma Make FAQs, Figma Help Center
Starter plan overview, Figma Help Center
How AI credits work, Figma Help Center
Best practices for optimizing AI credits in Figma Make, Figma Help Center
Use plan mode in Figma Make, Figma Help Center
Beyond the basics: Using Figma Make, Figma Help Center
Get started with Make kits and Write design system guidelines for Make kits, Figma Help Center
Publish, update, or unpublish a Figma Make file, Figma Help Center
Select an AI model to use in Figma Make, Figma Help Center
A properties panel and annotations, now in Figma Make, Figma Blog, July 30, 2026
Figma Make, now on your local code, Figma Blog, May 28, 2026