Difficulty: Beginner · Last updated: November 7, 2026 · By Mantlr Editorial
A practical guide to Figma Make — what it is, what it does well, and how it fits into the broader Figma AI ecosystem.
Key takeaways
Six things to know about Figma Make before you commit a Pro seat to it:
1. Figma Make is a prompt-to-app tool that generates working web apps with real React + Tailwind code
2. It's separate from Figma Design and the Figma agent — different product, different file type, different use cases
3. It generated its first apps in early 2025 and reached GA in July 2025; major upgrades (Make kits, Make attachments) shipped in March-April 2026
4. It runs on Claude Sonnet 4.5 by default with optional model picker (Gemini, GPT) added in 2026
5. Available on all plans, but full functionality requires Full seats on paid plans
6. Best for prototypes and MVPs; not architected for production code — that's still the developer's job
On this page
- What is Figma Make?
- How is Figma Make different from Figma Design?
- What can Figma Make actually do today?
- What can't Figma Make do (and what to use instead)?
- How does Figma Make compare to Lovable, v0, and Cursor?
- Who is Figma Make for?
- How does Figma Make pricing work?
- Common mistakes designers make with Figma Make
- What to do in your first 30 minutes with Figma Make
- Frequently asked questions
- Related articles
In 2024, "prompt to app" was a phrase tied to Lovable and Vercel's v0 — independent tools that lived outside the design surface. In 2025, Figma changed that. Figma Make launched as Figma's answer to the prompt-to-app movement — a tool that takes natural language prompts (or imported Figma designs) and generates working web applications with real code, real interactions, and a publishable URL.
The product matured fast. From its launch in July 2025 through major March-April 2026 upgrades (Make kits, Make attachments, model picker), Figma Make went from interesting experiment to a real workflow tool. Founders use it to validate ideas in hours instead of weeks. Designers use it to demonstrate functionality to stakeholders without engineering hand-offs. Product teams use it to align cross-functionally around a working prototype before any production work begins.
This guide explains what Figma Make actually is, what it does well, what it can't do, and how it fits into the broader Figma AI ecosystem alongside the Figma agent and MCP server. It's written for designers, founders, and product managers trying to figure out whether Figma Make belongs in their workflow.
Quick wins
1. Open Figma. Click "Make" in the upper-right corner of the file browser. Test a simple prompt like "Build a SaaS pricing page with three tiers" — see what it generates by default.
2. Front-load your first prompt with as much context as possible. The single biggest predictor of good output is a well-structured first prompt.
3. Don't expect Make to use your design system out of the box — that requires Make kits setup. See our Make kits guide.
What is Figma Make?
Figma Make is an AI-driven prompt-to-app tool built into Figma. You describe what you want in natural language — or attach existing Figma designs — and Make generates a functional web application with real React + Tailwind code, live preview, and a public publish URL.
The output is not a static design. It's a working app. Buttons click. Forms submit. State persists. Routes work. If you ask for a journaling app, you get something users can actually journal in. If you ask for a marketplace prototype, you get search filters and product grids that respond to user input.
Make runs on Claude Sonnet 4.5 by default — the same model that powers Anthropic's Claude products. The 2026 model picker lets you switch to Gemini or GPT depending on the task. The integration with Supabase (added July 2025) adds a real Postgres backend for apps that need authentication, databases, or file storage.
Make lives in its own file type. You don't generate apps inside Figma Design files. You create a Make file from the file browser ("Make" button in the upper-right), which opens a chat interface where you prompt Make to build.
How is Figma Make different from Figma Design?
This is the question that confuses most designers in their first week with Make. They sound similar. They're in the same product family. But they're not the same thing.
Figma Design is the canvas-based design tool you already know. It generates static design files. The Figma agent (launched May 20, 2026) lives inside Figma Design and accelerates design work.
Figma Make is a separate product with a separate file type. It generates working web apps with code, not static designs. The Figma agent doesn't work in Make files; Make has its own AI that generates code rather than design layers.
The most important practical difference: when you finish a Figma Design file, you have a design that needs engineering to ship. When you finish a Figma Make file, you have a working web app you can publish to a URL.
For a deeper comparison of the full Figma AI ecosystem, see Figma Agent vs Figma Make vs Figma MCP.
What can Figma Make actually do today?
Specific things Make does well in November 2026:
Generate working web apps from prompts
The core use case. Type "Build a habit tracker with daily check-ins and a streak counter" and Make generates a working habit tracker. Buttons work. State persists between sessions if you add a backend. The first generation isn't ship-ready, but it's runnable in seconds.
Convert Figma designs to working code
Import a Figma file into Make and it generates code that matches your designs. The fidelity is better than screenshot-based tools (v0, Lovable) because Make has access to Figma's structured design data — not just an image.
Iterate through conversation
Make's interface is a chat. You start with a prompt, see the result, then say "Make the hero section more compact" or "Add a dark mode toggle" — Make updates the app accordingly. The iterative model is faster than rebuilding designs from scratch.
Use Point-and-Edit for targeted changes
Make has a Point-and-Edit tool: click on a specific element in the preview, and Make focuses its next change on that element. Faster than describing what you want changed in words.
Generate working backend logic via Supabase
Add a backend to your Make app with a simple prompt: "Add user authentication" or "Add a database to store user submissions." Make connects to Supabase, sets up auth, and configures a Postgres key-value store. Free tier of Supabase is enough for most prototypes.
Use your design system via Make kits
The March 2026 addition. Make kits let you bring your production React design system into Make as an npm package. Make uses your real components instead of generating generic ones. See our Make kits guide.
Use Make attachments for richer context
Attach reference designs, brand assets, or example apps directly in the chat. Make uses them as visual context for what you're building.
Switch models for different tasks
The 2026 model picker lets you switch between Claude Sonnet 4.5 (default, balanced), Gemini (fast on narrow tasks), and GPT (general purpose). Different models cut differently.
Publish to a public URL
When your Make app is ready, publish it to a *.figma.site URL. Share with stakeholders, users, or your team. Real working URL, not a screenshot.
What can't Figma Make do (and what to use instead)?
The honest section. Most articles about Make skip this.
It can't produce production-ready code
Make's code output is meant for prototyping. It's clean React + Tailwind, but it isn't architected for production scale, security audits, or long-term maintenance. Designers who try to ship Make's output as production code end up rewriting it.
Use instead: Figma MCP server with Cursor or Claude Code for production code generation.
It can't perfectly use your design system without setup
Even with Make kits configured, Make sometimes generates generic styling instead of using your real components. Design system fidelity is the weakest area of the Figma AI trio. For exact design system control, the Figma agent inside Figma Design works better.
Use instead: Figma agent for design work that requires strict design system adherence.
It can't handle deeply complex business logic
Make is great at standard CRUD operations, authentication, and common UI patterns. It struggles with: complex permissions systems, multi-tenant architecture, intricate workflows with branching logic, payment processing beyond basics. Push it too far and you'll hit walls.
Use instead: A real developer environment with custom logic, paired with Make for the UI layer.
It can't replace product judgment
Make builds what you describe. It doesn't tell you whether what you're describing is the right thing to build. Users still have to do the product thinking.
It can't read context outside Figma
Make doesn't know about your Confluence docs, your Linear tickets, your user research notes, or your Slack threads. Project context has to come into the prompt manually.
It can't yet write back to your Figma Design files
Make generates apps. The reverse — going from a Make app back to a Figma Design file — is the "Bring to Figma Design" feature, but it's limited. Round-tripping between Make and Design isn't seamless yet.
It still produces work that needs review
Make's outputs look polished. The polish hides issues — accessibility problems, edge cases not handled, microcopy that's bland. Review every output against the same checklist you'd use for any other generated work.
How does Figma Make compare to Lovable, v0, and Cursor?
Make sits in a crowded category. Three competitors matter most for designers:
Lovable: Full-stack AI app builder. Generates standard React, Tailwind, and Supabase code with backend logic. Better than Make for full-stack MVPs because it ships more complete backend functionality out of the box. Weaker on design system fidelity.
v0 (by Vercel): Frontend-only AI code generator. Outputs clean React + shadcn/ui components. Tightly integrated with Vercel deployment. Best for frontend prototyping in the shadcn ecosystem. Doesn't read Figma directly without MCP setup.
Cursor: AI-first code editor. Not a prompt-to-app tool — it's an IDE with AI integration. Becomes a Figma-aware tool when you connect it via MCP. Many developers prefer Cursor + Figma MCP over Make for production code work.
The framing that helps: Make is the design tool that crossed into prompt-to-app territory. Lovable is the prompt-to-app tool with backend muscle. v0 is the developer prototyping tool. Cursor is the IDE that ate AI coding. They overlap but solve different problems.
For deep dives, see Figma Make vs Lovable and Figma Make vs v0.
Who is Figma Make for?
Three audiences get the most value from Make:
Designers prototyping interactions. Static Figma prototypes have always struggled to convey real interaction. Make solves this — you build something users can actually click through. Especially valuable for portfolio work and stakeholder demos.
Founders and PMs validating ideas. Make's biggest pull is speed. A founder with a product idea can have a working prototype in hours instead of waiting for a developer's calendar to clear. Validate before committing to engineering resources.
Product teams building internal tools. Make is well-suited for internal tools that don't need production-grade architecture — dashboards, admin panels, simple workflow apps. Build, ship, iterate.
Make is less useful for: production engineering teams (use real IDEs + MCP instead), brand-critical marketing sites (use Framer or proper site builders), or complex full-stack apps (Lovable is more complete out of the box).
How does Figma Make pricing work?
Figma Make is available across all plans, but the experience differs significantly by tier:
Starter (free): Limited Make access. Good for trying the tool, not for real work.
Professional ($16/seat/month): Full seat required. Standard AI credit usage applies. Most individual designers and small teams start here.
Organization and Enterprise: Full Make access plus team features (Make kits, shared design system packages, admin controls).
The catch: Make uses Figma's AI credit system, which went live for Full-seat users on March 18, 2026. Heavy use can consume credits faster than expected. Most prototype work fits within standard credit allocations, but large multi-iteration builds may need extra credits.
For the full breakdown, see Figma Make Pricing Explained.
Common mistakes designers make with Figma Make
After watching designers learn Make, five mistakes show up most often:
Mistake 1: Vague first prompts. "Build a SaaS app" gives you a generic SaaS app. "Build a SaaS pricing page with three tiers — Free, Pro at $29/month, Enterprise — using my brand colors blue #2563eb and a clean modern style" gives you something usable.
Mistake 2: Expecting design system perfection without setup. Make's design system fidelity needs Make kits configured. Without that, expect generic styling that approximates your brand but isn't actually your system.
Mistake 3: Trying to ship Make's code to production. The code is for prototyping. Designers who try to push Make output to production codebases regret it.
Mistake 4: Ignoring the model picker. Different models do different things well. Claude for nuanced structure, Gemini for narrow tasks, GPT for general work. Most designers leave it on the default and miss faster results.
Mistake 5: Single mega-prompt instead of iteration. Make works better with focused first prompts followed by iterative refinement than with one massive prompt trying to specify everything. Break it up.
Get the next article in your inbox
Mantlr publishes one practical, no-fluff article like this every Saturday. Free design resources, evaluation guides, and editorial takes on what's worth using.
Subscribe to Mantlr Editorial →
5,400+ designers and founders. No spam. Unsubscribe anytime.
What to do in your first 30 minutes with Figma Make
If you're new to Make, here's how to spend the first half hour productively:
Minutes 0–5: Open Figma. Navigate to the file browser. Click "Make" in the upper-right corner to create a Make file.
Minutes 5–15: Type a focused first prompt. Pick something specific — "Build a personal portfolio site with sections for Work, About, and Contact, using a minimal dark theme." See what Make generates. Note what's strong and what's missing.
Minutes 15–25: Iterate. Use natural-language follow-ups: "Make the hero section more compact," "Add a dark mode toggle," "Make this responsive for mobile." Watch how Make updates the app.
Minutes 25–30: Try the Point-and-Edit tool. Click on a specific element in the preview, then prompt a change to just that element. Faster than describing it in words.
By the end of 30 minutes, you'll know whether Make fits your workflow and what kinds of prompts produce the best results for your style.
Frequently asked questions
What is Figma Make?
Figma Make is an AI-driven prompt-to-app tool built into Figma that generates working web applications with React + Tailwind code from natural language prompts or imported Figma designs. It launched in 2025 and matured through 2026 with Make kits, Make attachments, and Supabase backend integration. It's separate from Figma Design and the Figma agent.
How is Figma Make different from Figma Design?
Figma Design is the canvas-based design tool that generates static design files. Figma Make is a separate product that generates working web applications with real code. Figma Design + the Figma agent is for design work. Make is for prompt-to-app prototyping.
Is Figma Make free?
Figma Make is available across all plans, including Starter (free), but full functionality requires a Full seat on a paid plan. The Starter tier is enough to try Make; real work needs Professional ($16/seat/month) or higher. AI credit usage applies on paid plans.
What does Figma Make use under the hood?
Figma Make uses Claude Sonnet 4.5 by default — the same model that powers Anthropic's Claude products. The 2026 model picker lets you switch to Gemini or GPT for specific tasks.
Can Figma Make build real web apps?
Yes, but with caveats. Make generates working React + Tailwind apps with real code, real interactions, and a publishable URL. The output is meant for prototypes and MVPs, not production-scale codebases. For production code work, use the Figma MCP server with a real IDE.
Does Figma Make use my design system?
Out of the box, Make uses generic styling. To use your real design system, configure Make kits — bring your production React design system into Make as an npm package, plus Figma library styles and tokens, plus guidelines. See our Make kits guide.
Can I add a backend to a Figma Make app?
Yes. Make integrates with Supabase to add authentication, databases, and file storage. Add a backend with a simple prompt like "Add user authentication" or "Add a database to store submissions." Setup takes a few clicks.
What's the difference between Figma Make and Lovable?
Both are prompt-to-app tools. Make is built into Figma and is strongest at design-to-app workflows because it reads Figma files directly. Lovable is independent, more developer-oriented, and ships more complete backend functionality out of the box. See Figma Make vs Lovable for the full comparison.
Can I publish a Figma Make app to a real URL?
Yes. When your Make app is ready, publish it to a *.figma.site URL. The published app is publicly accessible and works as a real web application.
Where can I find more Figma resources and AI tool coverage?
Mantlr curates free design resources across 43 categories — UI kits, fonts, icons, mockups, illustrations, dashboards, mobile UI, and more. We also cover the Figma AI ecosystem as it ships. Browse at mantlr.com.
Build with Mantlr's curated library
You understand what Make is and what it can do. The next step is connecting it to your real design system and using it well.
Mantlr lists 521 designer-vetted free design resources across 43 categories — every one license-verified, production-tested, free of email walls.
Browse Mantlr → · Subscribe to weekly editorial →
Related articles
If you're learning Figma Make, these articles cover the connected ecosystem:
- How to Use Figma Make — Step-by-step workflow for designers new to Make.
- How to Write Better Figma Make Prompts — Prompt engineering specifically for Make.
- How to Use Make Kits in Figma Make — Design system integration that fixes generic styling.
- Figma Agent vs Figma Make vs Figma MCP — Decision framework for the broader Figma AI ecosystem.
- The Complete Guide to Free Design Resources and AI Tools in 2026 — The pillar guide to Mantlr's full resource library.
About Mantlr Editorial
Mantlr is a free directory of designer-vetted, license-verified design resources. We test every resource before listing. No email walls. No paid placements. No affiliate dressing.
This article was written by Mantlr Editorial, the team behind a curated library of 521 free design resources. We work in production design daily and only recommend resources we'd use ourselves.
Last updated: November 7, 2026. Article reviewed quarterly for accuracy.