Tired of handing off a Figma file and waiting for a developer to make it real? Or building a prototype so static that your team couldn't actually react to it? Figma Make went GA on July 24 for all paid plan users. Now you can go from a text prompt to a working app — login, database, and all — without leaving Figma.
What actually is this?
Figma Make is a vibe coding tool that generates working apps from natural language prompts — entirely inside Figma. It launched in beta at Config 2025 in May, then went GA on July 24 for all Professional, Organization, and Enterprise plan users. No coding skills required.
The key difference from Bolt, Lovable, or v0: those tools treat your Figma file as a reference. Figma Make uses your Figma design library as the source of truth. Your team's colors, typography, and component styles automatically apply to whatever Make generates.
Two features landed at GA:
- Figma Design Library Import
Pull your existing design system — colors, typography, core styling — directly into a Make file. Your brand guidelines come along for the ride. - Supabase Backend Integration
Mention data storage in your prompt and the AI suggests a Supabase connection. One click sets up a production-grade Postgres DB, email/social login (GitHub, Google), and file storage. Your mock data becomes a real database.
Figma's own teams shared real examples. Researcher Rie McGwier built a survey traffic calculator combining mathematical models with a UI so non-technical teammates could visualize complex data. PM Tara Nadella prototyped a design system compliance checker to pressure-test assumptions before writing specs. Product designers Kelly Hu and Giorgio Caviglia finished grid auto-layout prototyping in 1.5 hours — work that previously took several days of code-based prototyping.
What Make actually generates under the hood
React + Tailwind code. With Supabase connected: a Postgres DB, email/social auth, file storage, Edge Functions, and vector embeddings — all auto-configured. Engineers can take the output and extend it further.
What's different from Bolt or Lovable?
The vibe coding market is crowded. Figma Make's position is clear: the starting point is different.
| Bolt / Lovable / v0 | Figma Make | |
|---|---|---|
| Design source | AI generates fresh (Figma is reference only) | Existing Figma library is source of truth |
| Workspace | Switch to a different platform | Everything stays inside Figma |
| Design system | Requires separate setup | Team library auto-applied |
| Sharing prototypes | Deployment URL required | Share via Figma link |
| Team collaboration | Platform-specific collaboration | Same Figma collaboration your team already uses |
A senior UX design leader put it well: "Bolt or Replit treats code as the product. Figma Make treats design as the product." Design isn't a handoff artifact — it's the blueprint itself.
That said, real-world reviews flag consistent limitations.
| Area | Current status |
|---|---|
| Code architecture | Single-file — not ideal for large production apps |
| GitHub integration | Not supported (as of 2025) |
| Make → Figma Design round-trip | One-directional only |
| Supabase fit | Simple CRUD works great; complex relational DBs hit limits |
| Credit tracking | Users report opaque consumption tracking |
"Design can be a lossy process because language is a slippery beast."
— Gui Seiz, Design Director at Figma
Design Director Gui Seiz framed it as a mindset shift: "It encourages you to play, take risks, and come up with more interesting solutions." When you can show a working prototype instead of describing an idea, team alignment happens faster.
How to start: the essential steps
- Open a Make file
In Figma, create a new file and select "Make" as the file type. Available immediately on Professional plans and above. Starter plan users can create Make files but need a Full Seat to publish or share. - Write your first prompt
Describe the app you want. The more specific, the better — "an app where users input goals and AI breaks them into a step-by-step plan" beats "a goal app." Attach a reference image to match a visual style. - Connect your Figma library
Open Design Libraries in the sidebar and import your team library. From that point on, everything Make generates inherits your team's colors, typography, and components. - Add Supabase when you need real data
Include data persistence in your prompt and Make will suggest the Supabase connection. Approve it and your DB, auth, and storage configure automatically. Supabase has a free tier. - Share the link and get feedback
Hit Share to generate a link. Anyone — no Figma account needed — can interact with the prototype. Run usability tests at this stage before investing further.
Before you dive in
The Professional plan's 3,000 credits works out to 50–70 prompts per month. Complex features burn credits fast. Start with the smallest thing worth validating. And the better your Figma file is organized — consistent layer names, clean auto-layout — the better Make performs.
Go deeper
Figma Make GA announcement Official blog post with full feature breakdown and credit policy by plan. figma.com
Create a Supabase backend using Figma Make The Supabase team's official integration guide — Postgres, auth, storage, and Edge Functions step by step. supabase.com
Figma Make Review 2025: How AI + Design Is Redefining App Creation Senior UX leader's in-depth comparison with Bolt and Replit, honest on pros and cons. medium.com
Hands-On Review of Figma AI Make Eight documented limitations and recommended use patterns from an independent hands-on review. medium.com
Build an App With Figma Make — Real Backend, Real AI Full-stack case study: an AI goal-decomposition app with Supabase built in 5 hours. medium.com
TechCrunch: Figma releases new AI-powered tools Config 2025 launch coverage — Make, Sites, Buzz, and the broader product direction. techcrunch.com
