Figma Make: prompt-to-app with your design system as context, whose loop ends in a hosted URL rather than your repo
figma-make
Figma Make is the only prompt-to-app tool whose first context is the design files you already maintain: attach team libraries, components, variables, and styles, then package them into a reusable Make kit. Editing works by pointing rather than describing, via the edit tool on individual elements, the draw tool for marked-up regions, and per-element annotations. But the loop terminates in a Figma-hosted URL (AWS plus Cloudflare), not your GitHub repo: there is a code editor and code export, yet no PR-to-CI path. Cost runs on credits, with 3,000 a month for a Professional Full seat, roughly 75+ per mid-complexity app, and plan mode billed as a separate action, so the quota counts conversations rather than apps. Publishing means public with no access restriction, the preview cannot reach camera or microphone, and third-party content rights are yours to clear.
- CONFIDENCE
- Vendor Claim
- Official model card or keynote only, no independent re-test
- KEY METRIC
- 上下文入口
- Vendor Claim · 2026-09
- MATURITY
- Product
- research → demo → product → production
Our take<p>Make occupies an unusual spot in the code domain: it does not start from a requirement, it starts from <strong>the design files you already maintain</strong>. The first input to v0, Lovable, or Base44 is a prompt or a PRD; the first context for Make is team libraries, components, variables, and styles, packaged into a Make kit that the rest of the team reuses. For teams that already treat a design system as an asset, that entry point removes the entire lossy step of translating a design into prose, and we have not seen anyone else do it to the same depth. That is why it is on the code ladder, and why it carries the design vertical.</p> <p>The second point is that Make turns "point at the thing you mean" into a product primitive: the edit tool selects an element and changes its properties, the draw tool marks up a region and adds it to the prompt, and annotations instruct the agent about individual elements. Most of the communication cost in UI iteration has always been "which button am I talking about," and Make replaces prose with visual pointing. The docs describe each of these concretely, so this is not marketing copy.</p> <p>One boundary has to be stated plainly: <strong>its loop terminates in a Figma-hosted URL, not in your repository</strong>. v0 runs PR to merge to deploy with branch protection still in force, while Make has a code editor and can export code but offers no path to connect your repo, open a PR, or pass your CI. It is well suited to design-side proof and prototype delivery, and poorly suited to replacing an engineering delivery chain. The preview also cannot access camera or microphone, so validating media capture requires publishing to the public web first, which reorders your verification steps. Publishing means public with no way to restrict access, third-party content rights are yours to clear, and moderation is Figma's unilateral call. All three are review items for commercial delivery.</p> <p>The cost model deserves its own note. Credits are assigned per seat, reset monthly, do not roll over, and cannot be transferred. A Professional Full seat gets 3,000 a month against Figma's own 75+ credit example for a mid-complexity app, with plan mode billing an extra action. <strong>The quota counts conversations, not apps</strong>, and treating it as unbounded leads to hitting a wall mid-month. Figma publishes no correctness benchmark, the figures are explicitly approximate and shift as models are optimized, so the card is graded C (vendor claim) and we have not re-measured it.</p>
What it actually delivers
Figma's own definition of Make is "an AI-driven, prompt-to-app tool": it turns ideas and existing Figma designs into interactive apps that you ideate, iterate on, and improve through conversation. There are two deliverables. One is real code inside the Make file, with a code editor you can paste your own code into and keep iterating by prompt. The other is a published URL, visible to your organization or live on the public web, optionally on a custom domain you own.
Its starting point differs from v0, Lovable, and Base44: those begin from a sentence or a PRD, while Make begins from the design files your team already maintains. The docs state plainly that you can attach existing designs, components, Community content, and other files to your prompts, and that a Make kit can bundle npm packages, variables and styles imported from your design library, plus written guidelines on how those assets should use style context and behave, then publish that kit to your team. That "design system as source of truth" entry point is its real position on the design vertical.
Agent capability boundaries, checked item by item against the official docs
| Capability | Actual behavior | Verifiable point |
|---|---|---|
| Context attachment | Click + then Add context and paste a design URL; drag in images and text files; or paste frames and components straight into the chat | The docs warn explicitly: do not paste Figma file URLs into the prompt box. The model may interpret the URL itself rather than the file it links to, and output generally goes off the rails |
| Web grounding | Search the web for current information, or fetch content from a specific URL to ground the app in real-world data | Same class as v0's web search, though the docs do not say whether clickable citations are returned |
| Point-and-edit | The edit tool targets a specific element of the preview and changes it through a Figma Design-style properties panel (font style, text padding, and so on), or via prompt | Turns "fix this one spot" from describing coordinates into pointing at it |
| Draw and annotate | The draw tool marks up the preview and adds those regions to your prompt; annotations give the agent instructions about specific elements | Visual instructions replacing prose |
| Concurrent chats | One Make file can run several chats at once, so you can start a new change while another is still working | No waiting for a round to finish |
| Plan mode | Produces a structured plan before any code is written; a human approves it and clicks Build. Planning and building are two separately billed actions | Figma's own framing: the plan costs extra credits but a well-scoped plan builds better first time and saves correction prompts later |
| Version history | Go back and edit earlier versions of the app | Non-destructive iteration |
| Multiplayer | Make files created by Starter users or Full seats are multiplayer: you can see others typing or viewing, people with view access can comment, and the generated code can be modified simultaneously | Files created by Dev, Collab, and View seats cannot be shared, so they cannot be collaborated in at all |
| Backend | Add a backend to store and manage data: keep app state across browsers, provide login screens, save and load text and images, store secrets and API keys | Not a pure front-end demo |
| Code editor | Paste your own code in and iterate on it through conversation, attaching your designs and images | guidelines.md lives here too, for pinning tone and layout structure |
The publish path, and how it differs from v0
Published apps are hosted on AWS with domain and routing served by Cloudflare; while publishing is in beta, hosting is included in your existing paid plan at no separate charge. Published apps are not indexed by search engines by default (discoverability can be changed in settings), there is no built-in analytics dashboard (you can add a Google Analytics ID, or drop other snippets into the head or body), and SEO is optimized automatically but offers no customization. Deleting the Make file automatically unpublishes the app and deletes file data.
One distinction has to be stated clearly. v0's loop terminates in your GitHub repository (PR, merge, deploy, with branch protection and review still in force). Figma Make's loop terminates in a Figma-hosted URL. Make has a code editor and can export code (Full and Dev seats), but the official docs contain no path for connecting to your repository, opening a PR, or running your CI. It is closer to "design-side publishing that stands on its own" than to "handing code back to your engineering system." When choosing between them, this precedes output quality.
Another commonly misread capability is "bringing it back to Figma Design." You can copy the preview as design layers and paste them into Figma Design. The docs are explicit that this is one-way: changes to those layers in Design do not apply back to the Make file, and the layers are not automatically tied to your design system. Treating it as a snapshot for team discussion is right; treating it as two-way sync is wrong.
How this divides labor with the Figma MCP server
Make is often conflated with the Figma MCP server, and they are different things. The MCP server feeds Figma context to the coding agent you already use (VS Code, Cursor, Windsurf, Claude Code, Codex), with the remote endpoint at https://mcp.figma.com/mcp (the preferred install) and a desktop server running locally through the Figma desktop app, aimed mainly at specific organization and enterprise cases. It lets your agent write directly to the canvas: create and modify frames, components, variables, and auto layout in Figma Design and FigJam using your design system as the source of truth. That write-to-canvas capability requires the remote server, is free during the beta period, and Figma states it will eventually become a usage-based paid feature. There is also a reverse flow: prompt your MCP client to "start a local server for my app and capture the UI in a new Figma file," pulling your live web UI into a design file. Skills sit above the MCP tools as packaged agent-level instructions telling the agent which tools to use, in what order, and how to apply the results. They do not replace MCP connections or add MCP capabilities, and are available from Figma Community and the community-resources repo on GitHub.
In short: Make is prompt-to-app inside Figma; MCP is Figma plugged into the agent you already have. The first produces a hosted URL, the second produces code in your own repository. Teams that need code landing in their engineering system should look at MCP plus their own harness, not at Make.
Seats and billing, worth reading before you decide
| Item | Stated terms |
|---|---|
| Who gets the full product | Full seats on paid plans. Dev, Collab, and View seats can only try Make in drafts |
| Where files can be created | Only Full seats can create Make files in folders or teams; other seats are limited to drafts |
| Sharing and publishing | Only Full seats can share and publish. Starter plans can publish to the public web only if they also publish to the Figma Community |
| Code export | Available to Full and Dev seats; Collab and View only in drafts |
| Team-library style context | Unavailable on Starter (team libraries are a paid feature) |
| Credit allowance | Assigned per user, reset monthly, do not roll over and cannot be shared or transferred. Full seats: Starter 500, Professional 3,000, Organization 3,500, Enterprise 4,250. Dev, Collab, and View seats get 500 on every plan. Starter users and View seats also have a 150 per day cap that resets the next day |
| Cost per run | The rate card is dated 2026-08-25. Make is an agentic feature with variable cost; using the default model as of February 2026 the examples are roughly 30+ credits for a simple app, 75+ for a mid-complexity one, and 100+ where logic or interactivity is complex. Figma says these figures are approximate because the models are non-deterministic |
| What drives cost | Three levers: model choice (Make exposes multiple models with their own pricing, and some consume significantly more credits), task complexity (a more complex prompt triggers more actions), and context volume (attached files, design libraries, and long chat histories all increase consumption) |
| Education | Currently unavailable to K-12 Education users; available to higher-education and bootcamp Education users |
Set the allowance against the per-run cost and the arithmetic is informative: a Professional Full seat's 3,000 credits a month is roughly 40 generations at the 75-credit mid-complexity example, and the real usage pattern for an agentic tool is one build plus five or six correction rounds, with plan mode billing an extra action. So the quota counts conversations, not apps. Admins can purchase additional credits and set per-person limits.
Boundaries and failure modes
- No camera or microphone in the preview. Figma states the preview does not support this; only the published version of your web app can request access. Any feature that needs media capture can only be validated after publishing to the public web, which changes the order of your verification steps.
- Publishing means public. Once published to the web, anyone with the URL can access it and access to the published version cannot be restricted. Not being indexed by search engines lowers discoverability; it is not access control. Organization admins can disable publishing outright.
- Third-party content rights land on you. The docs state Make may incorporate fonts, code packages, or images from the internet into your app, and that ensuring you have appropriate rights before publishing is your responsibility. For commercial delivery this is a legal review item.
- The design return path is one-way. Preview layers copied into Design do not flow back and do not bind to your design system. Teams hoping for "change the code and the design updates itself" will be disappointed.
- Attaching designs has hard preconditions. They must be components or placed in a frame, and when several designs feed one app the docs recommend attaching only one design per prompt. That caps the fantasy of feeding a whole design system in one go.
- No public correctness benchmark. What Figma publishes is a feature list, a seat matrix, and a credits table, with no readable quality numbers. The card is therefore graded C (vendor claim).
- Moderation is Figma's unilateral call. Published content is subject to Figma's Acceptable Use Policy, reported content judged in violation is removed, and appeal is by replying to the takedown email. For work hosting client deliverables, that is an operational risk to assess.
- Beta terms move. Publishing is still in beta, and "hosting included," "custom domains free through 2025," and "write to canvas free during beta, usage-based paid later" are all time-bounded statements. Do not build a long-term cost model on them.
Our reproduction plan
Three things would move this from grade C to grade A. First, take one existing Figma design and generate from it twice, once with Make attaching the design and once with v0 from a screenshot plus prompt, then compare fidelity and the number of correction rounds to measure how much the design system as context actually saves. Second, measure credits: real consumption for the same task across model tiers and context volumes, plus plan mode's extra cost, to produce a true unit cost for a mid-complexity app. Third, verify the publish constraints: whether camera and microphone genuinely only work after publishing, whether the default no-index switch behaves as documented, and whether deleting a file really unpublishes it. Until those run, read the number on the card as what the vendor says.