What Is Figma Make?
Figma Make is an AI app builder built directly into Figmaโs platform that takes a text prompt and produces a working, code-backed front-end application, without requiring you to leave the Figma workspace or set up a separate tool.
It generates React applications with full source code access, automatic version history, and a live preview URL, and it stands apart from other AI builders by letting you choose the underlying model doing the work: Claude Sonnet 4.6, Gemini 3 Flash, Gemini 3.1 Pro, or GPT-5.5, rather than locking you into a single model with no visibility into what is running.
The output is not a mockup or a design file but actual, editable code that you can inspect, modify, and push to GitHub.
Who Is Figma Make For?
- Product designers already using Figma.ย Make sits inside the tool you are already in, so there is no new platform to learn or subscription to stack on top of what you already pay for.
- Non-technical founders who need a demo fast.ย A complex, multi-screen app with role-based access and realistic data comes out in under 10 minutes, which is fast enough to take to a first investor meeting.
- Product managers who need to show, not tell.ย Figma Make produces something you can actually hand to a stakeholder and walk through, rather than a PDF of screens.
- Developers who want a working scaffold.ย The generated code is clean React with TypeScript, and the full source is accessible on the free plan, making it a genuine starting point rather than a throw-away prototype.
Figma Make Pros and Cons
- Builds complex multi-screen apps from one prompt
- Free plan includes full source code access
- Choose your AI model: Claude, Gemini, or GPT
- Automatic version history saves every build iteration
- Role-based authentication generated without extra prompting
- GitHub and Supabase integrations built in natively
- Visual editor and code editor available in one workspace
- First builds arrive with code warnings
- Monthly free credit limit runs out fast
- Custom domain needs a paid Figma plan
Rating Breakdown
The scores below reflect what Figma Make delivers right now, in public beta. For a product at this stage, the output quality is well above what I expected, and for teams already on a paid Figma plan, the value calculation is hard to argue with since there is nothing extra to pay.
| Feature | Score (Out of 10) | Why the Score |
|---|---|---|
| Ease of Use | 9.5 | Zero setup, prompt-first entry, dual editing paths, and an 8-minute build cycle make this one of the least demanding AI builders to get started with. |
| Features & Functionality | 9.8 | Role-based authentication, Stripe payment UI, multi-chart reporting, admin console, model selection, and a full REST API reference all generated from a single prompt. |
| Design & Customisation | 9.4 | The default visual output is clean and professional, with both a click-to-select visual editor and full source code access available even on the free plan. |
| Value for Money | 9.4 | Full code access on the free tier is genuinely unusual, and paid-plan users get Make included in an existing Figma subscription rather than as a separate line item. |
| Performance & Reliability | 9.9 | Eight minutes to a multi-screen, role-aware application with Stripe UI and an admin console is the fastest build-to-usable-output ratio I have tested. |
| Overall | 9.6 | A standout beta product that already outperforms many mature AI app builders on output quality and feature depth. |
Figma Make Features
- Prompt-to-app build in under 10 minutes
- Multi-model selection including Claude, Gemini, and GPT
- Role-based user authentication generated automatically
- Click-to-select visual editor with inline style controls
- Full React source code editable on the free tier
- GitHub and Supabase integrations available without extra configuration
- One-click publishing to a figma.site subdomain
My Honest Figma Make Review: What I Found After Testing It
The Starting Screen Gets Out of Your Way Immediately
The landing screen is a single prompt box with a brief tagline: โMake your ideas real with AI. Start with a design and prompt your way to a functional prototype, fast.โ Below the input field, three suggested starting points appear:
- Onboarding flow
- Data dashboard
- Gradient gallery
You can ignore all three and type anything you want.
I submitted this prompt in full:
โCreate a property management platform for landlords and tenants. Include user authentication, property listings, lease management, rent payments, maintenance requests, document uploads, messaging, notifications, admin dashboard, reporting, Stripe integration, PostgreSQL database, REST API, responsive design, and deployment instructions. The application should be production-ready and scalable.โ
The tool accepted it without friction and moved straight to building. No project type selector, no template gallery, no architecture pre-configuration of any kind.
Verdict:ย The entry point is as close to zero friction as any AI builder I have tested. The trade-off is that with no guidance structure before the build, a vague prompt produces a vague output. The ceiling on what you get is entirely determined by what you put in.
Sign-Up Is Fast and Does Not Put a Paywall Between You and the Output
Clicking the arrow button before signing in triggers a โWelcome to Figmaโ modal. The two options:
- Continue with Googleย (one click, under 10 seconds)
- Continue with emailย (enter email, verify, under 30 seconds total)
Both paths drop you into the Figma Make workspace with your build already queued. There is no plan selection screen, no credit card prompt, and no upgrade wall at this stage. The free Starter plan activates automatically.
If you already have a Figma account, the modal does not appear, and you land directly in the builder.
The Build Runs in 8 Minutes and Tells You Exactly What It Is Doing
The workspace splits into a chat column on the left and a live preview on the right. The preview shows a placeholder with the text โBuilding your ideaโฆโ followed by โWorking out the detailsโฆโ as the tool progresses.
What makes this different from a generic loading screen is the reasoning panel in the chat column, which logs the toolโs thinking in real time.
During my build, the reasoning panel showed:
- The tool called a theme tool before writing a single line of code
- It logged โWorked with 3 filesโ while processing the prompt
- The reasoning log described its full approach: it mapped out the remaining features (property filtering, lease management, payment history, maintenance requests, messaging, notifications, and admin dashboards), stated it would structure the React component with type definitions first, then build out mock data with realistic details, then handle navigation and state management for role-based views across every section
- A status message appeared below the reasoning: โWriting the component structureโฆโ
That sequence matters. The tool planned type definitions before it wrote any UI, then added realistic mock data, then built navigation around it. This is a structured approach, not a random generation.
Build timeline: 3:58 PM to 4:06 PM. Eight minutes.
The model selector at the bottom of the chat panel lets you choose the AI doing the building before you start, or swap between builds:
| Model | Description |
|---|---|
| Default | Recommended by Figma (specific model not disclosed) |
| Claude Sonnet 4.6 | Balanced, efficient |
| Gemini 3 Flash | Fast, iterative |
| Gemini 3.1 Pro | Deep, creative |
| GPT-5.5 | Capable, quick |
Being able to switch from a fast iterative model to a deeper one without leaving the tool or rebuilding from scratch is a meaningful workflow advantage.
Alongside the model selector, there is a Build/Plan mode toggle:
| Mode | What It Does |
|---|---|
| Build | Creates and iterates as you go |
| Plan | Aligns on complex work and maps out architecture before writing code |
For a prompt as detailed as mine, Plan mode would likely have produced a cleaner first build with fewer warnings. I used Build mode and dealt with the warnings in a second pass.
The Finished Output Named Itself PropVault and Earned That Confidence
The finished application, which the tool named PropVault without being asked, is a multi-screen property management platform with a consistent visual identity, a dark navy sidebar, clean typography, and contextual social proof on the login screen. The login screen shows:
- A dark left panel with the PropVault logo, tagline (โProperty management, simplified.โ), and three mock stats: 86 properties managed, 1,240 active tenants, $2.1M collected monthly
- A right panel with Sign In / Create Account tabs, pre-filled email (marcus@propvault.io) and password, and three role selector buttons: Landlord, Tenant, Admin
- A footer note: โDemo: click a role above, then sign inโ
Every screen in the left navigation opens a working, populated screen. Here is what was built across the full application:
| Screen | What Was Built |
|---|---|
| Dashboard | Four KPI cards (monthly revenue, occupancy rate, open requests, total properties), 12-month revenue vs. expenses line chart with a โLiveโ badge, recent activity feed, overdue payment alert with Send Reminders button, expiring leases with individual Renew buttons |
| Properties | Property listing with filtering |
| Leases | Lease management with status tracking |
| Payments | Payment history table with status badges, Stripe-powered secure payment modal |
| Maintenance | Kanban board (Open / In Progress / Completed) with priority badges and vendor assignment; tenant submit form |
| Messages | Two-panel chat UI with realistic conversation threads and send-on-enter support |
| Documents | Drag-and-drop upload zone, category filter pills, file grid with hover actions |
| Reports | Bar chart, horizontal occupancy chart, maintenance pie chart, KPI metrics table, date range toggle (3m / 6m / 12m) |
| Admin Console | User management table, system health and integrations panel, full REST API reference, deployment instructions (PostgreSQL, Docker, Vercel, Stripe webhook configuration) |
The data across every screen is simulated. The backend connections require configuration before anything stores or retrieves live data. What you have after eight minutes is a production-quality front-end scaffold with enough screen coverage and data density to walk through as a working demo.
All Three User Roles Are Scoped Correctly, and the Detail on Each Is Impressive
Role-based access control is where AI builders most often cut corners. Figma Make did not. Each role logs into a completely different experience with its own navigation, its own data view, and its own scope.
| Role | Navigation Items | Dashboard Focus |
|---|---|---|
| Landlord (Marcus Hewitt) | Dashboard, Properties, Leases, Payments, Maintenance, Messages, Documents, Reports | Platform-wide metrics across all properties and tenants |
| Tenant (Priya Nair) | Dashboard, Leases, Payments, Maintenance, Messages, Documents | Personal metrics for this tenant only |
| Admin (Cassandra Voss) | All Landlord items plus Admin | Same as Landlord dashboard with access to the Admin Console |
Landlord dashboard specifics:
- Monthly Revenue: $41,900 (Apr 2024, +2.8% vs last month)
- Occupancy Rate: 88% (76/86 units, +1.2% vs last month)
- Open Requests: 5 maintenance tickets
- Total Properties: 6 properties, 86 total units
- Revenue vs. Expenses chart spanning May to April (12 months)
- Recent activity feed: rent received, overdue payments, new maintenance request, expiring lease, tenant message
- Alert banner: โ2 overdue payments require attentionโ with Tomรกs Reyes ($2,100) and Fatima Al-Sayed ($2,650) named, and a Send Reminders action button
Tenant dashboard specifics (Priya Nair):
- Next Payment: $1,850, due April 1, 2024
- Lease Status: Active, ends August 31, 2024
- Open Requests: 1 (HVAC repair pending)
- Messages: 2 unread
- Payment history showing Maple Grove #4B, $1,850, Paid
- Maintenance request showing โHVAC not cooling,โ In Progress badge, dated March 28, 2024
The Payments screen on the Tenant role opens a Stripe-branded modal when โPay Nowโ is clicked:
- Header: โSecure Payment. Powered by Stripe.โ
- Payment line: April Rent, Maple Grove #4B, $1,850.00
- Card Number field (pre-formatted)
- Expiry (MM/YY) and CVC fields
- Pay button pre-labelled: โPay $1,850.00โ
- Footer: โ256-bit SSL encryption ยท PCI DSS compliantโ
Admin Console (Cassandra Voss):
The Admin Console has four tabs (Users, System, API Docs, Deployment) and opens on the User Management table.
Each row has edit and remove action buttons. An Invite User button sits in the top right of the table. Tomรกs Reyes is correctly flagged as Delinquent, consistent with the overdue payment alert shown on the Landlord dashboard.
Editing Uses Two Parallel Tools and Both Are Free to Access
After the build completes, two editing paths are available simultaneously, neither behind a paid plan.
Path 1: Visual editor
- Click any element in the live preview to select it and open a floating edit bar
- The edit bar includes: font family selector, font size (with minus and plus controls), bold, italic, text alignment, width controls, spacing, and element deletion
- The selected element is added to the chat input field at the same time, so clicking an element and typing in the chat sends a change request with that element already in context
- Selecting a container shows the exact component type and nesting (for example, โdiv x 4โ) above the toolbar, giving precise layout context without opening the code
The connection between the visual selector and the chat input is the most practical part of this editing workflow.
You do not have to choose between the two. You click to identify the element, then type in the chat to describe what you want changed, and the AI applies it with full awareness of which component you selected.
Path 2: Code editor
Clicking the code icon at the top of the workspace opens the full React source. The file structure:
src/
ย app/
ย ย components/
ย ย App.tsx ย ย ย ย ย (1,300+ lines)
ย styles/
ย ย fonts.css
ย ย globals.css
ย ย index.css
ย ย tailwind.css
ย ย theme.css
guidelines/
ATTRIBUTIONS.md
default_shadcn_theme.css
package.json
pnpm-workspace.yaml
postcss.config.mjs
vite.config.ts
App.tsx is organized into named view functions (DashboardView, ReportsView, MaintenanceView, and so on) with section comments separating each screen.
The code is readable, well-structured, and editable directly in the browser. No download or external IDE is required. This full source access is available on the free plan.
Changes made through the visual editor, the chat, or the code editor all feed into the same live preview and are reflected immediately.
Ten-Plus Warnings on the First Build, Fixed Accurately in One Click
After the initial build completed, a banner appeared at the bottom of the chat panel: โ10+ warningsโย with a โFix for meโย button and a close icon.
Opening the browser console (accessible via a console icon in the workspace) showed the source: duplicate SVG gradient IDs in the Recharts charting library.
The cause: the Dashboard and Reports sections both registered the same generic gradient names (revGrad, expGrad) as SVG ย elements. Recharts registers gradients by ID into the SVG namespace, so generic names from multiple chart instances collide in the same document. The console showed a long list of minified JavaScript references, all tracing back to this conflict.
Clicking โFix for meโ triggered a second build pass. The tool identified three specific issues and applied targeted fixes:
- Dashboard AreaChart: Renamed gradient IDs from the generic revGradย / expGradย to unique identifiers dash-area-revย / dash-area-exp, preventing the namespace collision
- Occupancy BarChart: Switched cell keys from numeric index (key={i}) to stable string keys using the property name (key={\occ-${entry.property}`}`), so each cell has a stable, unique key
- Maintenance PieChart: Applied the same key fix using the entry name (key={\pie-${entry.name}`}`)
This build saved automatically as Version 2. The version history panel (accessed by clicking the version label at the top of the workspace) shows a clear log:
| Version | Label | Time |
|---|---|---|
| Version 1 | Property Management Platform | 4:06 PM |
| Version 2 | Resolve code warnings | 4:19 PM |
After the second pass, the console showed only clean vite hot-reload messages, and the warning banner disappeared. Rolling back to Version 1 is a single click from the version history panel.
The full fix cycle from first build to clean console took 13 minutes, with no manual code editing required.
The Settings Panel Has More Depth Than You Would Expect from a Beta Tool
The settings panel is accessed through the gear icon in the top right of the workspace. The dropdown organizes options into two groups:
Make settings:
- General
- Domains
- Fonts
- Chat preferences
- Audio
Integrations:
- GitHub
- Supabase
- Adjust guidelines
General settingsย covers publication status and SEO configuration:
| Setting | Detail |
|---|---|
| Status | Not published (Publish button available inline) |
| Title | Editable project name |
| Meta description | Auto-populated from build context |
| Language | ISO language code field |
| Google Analytics ID | Connect a GA4 property for traffic tracking |
| Exclude from search engine results | Checkbox, checked by default on the free plan |
| Clear chat context | Permanently clears Makeโs conversation memory; chat history log remains visible |
The Clear chat contextย option is worth understanding. It wipes the AIโs memory of the build conversation without removing the visible chat log. This is useful when a long build thread is causing the AI to anchor on earlier context during new change requests.
Domains settingsย shows:
- Base domain:ย example.figma.site (the free subdomain, goes live on publish)
- Connected domains:ย Option to add a custom domain from a third-party provider (paid plan required)
Integrations:
- GitHub: Code export and repository sync
- Supabase: Connect a real backend and database to replace the simulated data layer
- Adjust guidelines: Set custom instructions that the AI follows when making changes, covering things like component library conventions, naming standards, or design constraints you want respected across every build and iteration
The Adjust guidelinesย option is a meaningful addition that the other sections of the tool do not surface prominently. It lets you define how the AI should behave before a build starts, rather than correcting unwanted patterns after the fact.
Publishing Is One Click and the Free Plan URL Looks Like a Real Standalone App
Clicking the Publish button in the top right opens a panel covering everything needed to go live:
| Field | Detail |
|---|---|
| Title | Editable project name |
| URL | example.figma.site |
| Status | Not published |
| Feature on Community | Toggle to list the app in the Figma Community gallery |
The Feature on Communityย toggle expands a preview section showing how the app will appear in the Figma Community alongside other published apps.
From here:
- You can select up to five tags to categorise the app (options include Apps, Dashboards, and more via โShow moreโ)
- A โShow chat historyโ checkbox controls whether the build conversation is visible to community viewers
- A note confirms: โBy publishing to Community, you agree to Figmaโs Creator Agreementโ
Once published, the figma.site URL opens the application in a standalone browser view. There is no Figma editor chrome, no watermark, and no โbuilt with Figma Makeโ badge visible around the app. It loads and behaves like a real standalone web application, not a framed prototype.
Free plan publishing includes:
- A shareable figma.site subdomain URL
- A standalone app view with no visible Figma branding
- The ability to feature the app in the Figma Community
Paid plan publishing adds:
- A custom domain from a third-party provider
- More AI credits for additional builds and iterations
Figma Make Pricing & Plans
Figma Make is not sold as a standalone product. Access comes bundled with Figma Full seat plans, and AI credits are shared across every Figma AI feature, not just Make. A build in Figma Make draws from the same monthly pool as Figma Designโs AI tools, image editing, and any other AI-powered action across the platform.
The free Starter plan includes Figma Make access, but the monthly credit ceiling is low enough that a single complex build will consume a large share of it. The Starter plan is suitable for evaluating the tool and running one-off tests, not for teams using Make as a regular part of a build process.
Paid plans are structured around seat types. Full seats at the Professional, Organization, and Enterprise tiers each include meaningfully more AI credits per month, with each tier stepping up the monthly allocation. If you are on a paid Figma plan primarily for Design access, Make is already available to you at no additional cost within your existing credit pool.
Additional AI credits can be purchased as an add-on across paid plans, which is worth considering if your team runs multiple Make builds per week alongside regular Figma AI usage.
There is no free trial separate from the Starter plan, and no money-back guarantee is stated in Figmaโs published terms. Annual plan cancellations do not generate a refund for the remaining term. Professional plan cancellations can be handled from the Admin Dashboard; Organization and Enterprise plan cancellations require contacting the sales team directly.
For practical plan matching:ย the Starter plan covers evaluation and occasional use. A Professional Full seat is the minimum realistic entry point for teams that want to use Make more than once or twice a month without hitting credit limits mid-project.
Alternatives to Figma Make
The most direct competitor to Figma Make right now is Lovable. Where Figma Make produces a front-end application inside the Figma workspace, Lovable is a purpose-built AI app builder that handles the complete stack: front-end, back-end, database, authentication, and one-click deployment, from a standalone platform with over 8 million reported users.
For anyone who is not already on a paid Figma plan, or who needs a production-connected application rather than a polished prototype, Lovable gets you to a deployed, data-connected app faster and with less configuration.
| Feature | Figma Make | Lovable |
|---|---|---|
| Ease of Use | Prompt-first with no setup required | Prompt-first with no setup required |
| Best For | Designers and teams already on a Figma paid plan | Non-technical founders building and deploying MVPs |
| Backend & Data | Front-end only; Supabase available as an integration | Built-in Supabase backend included from the start |
| Design Flexibility | Visual editor, chat editing, and full source code access | Chat-based editing with code export available |
| Pricing Model | Bundled with Figma Full seat; shared AI credit pool | Standalone subscription with its own credit system |
Final Verdict: Is Figma Make Worth It?
For anyone already paying for a Figma Full seat, the answer is straightforward: yes, and by a significant margin. The output quality puts Figma Make ahead of most AI app builders that have been in the market far longer.
A single prompt produced a multi-screen, role-aware property management platform with a Stripe payment modal, a live analytics dashboard, a Kanban maintenance board, a two-panel messaging UI, and a full admin console with a user management table, REST API documentation, and deployment instructions. All of that in eight minutes, with full source code access on the free plan and a clean, standalone published URL. None of that is ordinary for a beta product.
For teams not currently on Figma, the calculation requires an honest look at what you actually need. Getting meaningful credit access to Figma Make requires a Full seat on a paid Figma plan, which is a broader platform investment than any standalone AI builder asks for. If the primary goal is to ship a working web application with a live database and real users rather than a prototype, Lovable reaches that outcome with less configuration and without requiring a design platform subscription.
The audience that gets the most from Figma Make right now is designers and product teams who want to close the gap between a static Figma prototype and a testable, code-backed interactive build, without changing tools or waiting for a developer to make it happen. For that specific use case, Figma Make is the best option available.
