If you know Figma but want to mostly use prompting, and your developers build in Next.js and Tailwind, the best Figma Make alternative depends on one question: where do the components your developers use come from? If your team will keep designing in Figma, you may not need to switch: Figma Make with a Make kit, plus Figma's MCP server and Code Connect, keeps your design work in Figma. If your developers want generated Next.js code built on shadcn/ui, v0 is the strongest pick. If you want AI to edit your existing repo from Figma files, choose Builder.io. If you want a design canvas where AI gives you variations to pick from and you refine them with precise design control, use Subframe: it recreates your components from your code and syncs them to your repo as React and Tailwind your developers own. Its codebase features need the macOS desktop app, and it takes Figma frames as pasted images, not Figma files. For a full-stack app with a backend, use Lovable or Bolt.
| Tool | Where the components come from | Your Figma work | What developers get | Starting price (as of Oct 9, 2026) |
|---|---|---|---|---|
| Figma Make + MCP + Code Connect | Make generates them, or a Make kit supplies your npm package; Code Connect maps to your repo's | Native | A separate React app to export or push; agents code in your repo via MCP | Free Starter; Full seat $16/mo; Code Connect needs Organization |
| v0 | shadcn/ui, or a design system you set up | Figma link or screenshots | Next.js code, GitHub sync | Free; Plus $30/user/mo |
| Builder.io | Your repo's components | Figma plugin or pasted frames | A pull request | Free; Pro $24/user/mo, billed annually |
| Subframe | Recreated from your code | Pasted images; variables as JSON | React + Tailwind components synced one-way; pages built by the agent | Free; Pro $20/editor/mo; viewers free |
| Locofy | Generated from your Figma layers | Figma plugin | Next.js + Tailwind via ZIP, GitHub or VS Code | See Locofy's pricing page |
| Magic Patterns | Imported from your repo, a folder or a URL | Sends designs to Figma | React via MCP or GitHub | Free to start |
| Lovable / Bolt | Generated in a new app | Start from a prompt | A hosted full-stack app | Free; Bolt Pro $25/mo |
| Claude Code / Cursor | Your repo's components | Figma's MCP server | Code in your repo | Claude Code in Claude Pro, $17/mo billed annually |
Figma Make does a lot well. Attach a frame from your own Figma file and get a working React app. Make kits bundle your design system (npm packages, library variables and styles, and guidelines) so new Makes start on-brand. Make can add a backend, publish the app, and export the code or push it to GitHub.
People leave for four reasons:
Every tool got the same brief: one Figma frame of an account settings page, a small Next.js + Tailwind repo with four existing components (Button, Input, Card and Tabs), and one prompt: "Create an account settings page from this design, using our Button, Input, Card and Tabs components."
We judged six things: your components (used or reinvented?), where the code lands (your repo, copy and paste, or the tool's own app), prompt-first with control (several options, then precise edits), your Figma work (file, plugin, link or image), Next.js + Tailwind fit, and price and credits.
Prices and plan limits are as of October 9, 2026, from each vendor's own pages.
The first test matters most. Asked this exact question in October 2026, ChatGPT itself warned that generating React code doesn't mean a tool will reuse your team's components.
Best for: teams whose source of truth stays in Figma.
Where the components come from: Make writes its own React code, guided by a Make kit if you have one. For your real repo, Figma's MCP server lets Claude Code, Cursor or Codex generate code from a selected frame, and Code Connect maps your Figma components to the ones in your repo.
Limitations: Code Connect needs an Organization or Enterprise plan and a Full or Dev seat. On the free Starter plan, the MCP server allows 20 tool calls a month.
Price (as of October 9, 2026): Starter is free with 500 AI credits a month. A Professional Full seat is $16 a month. On Organization, a Full seat is $55 and a Dev seat $25 a month, billed annually.
Where the code lands: Make's code stays in its own app until you export it or push it to GitHub. To get code into your repo, Claude Code, Cursor or Codex implements the frame through Figma's MCP server, and Code Connect points it at your existing components.
Best for: developers on Next.js, shadcn/ui and Vercel who want code first.
Where the components come from: shadcn/ui by default. v0 also reads your Tailwind config and globals.css, and can work from a design system you set up. Its docs warn it's trained on default shadcn/ui components and may struggle with customized ones.
Your Figma work: attach a Figma link and v0 reads the layout and design tokens, or upload screenshots.
Where it beats Subframe: the deepest Next.js and shadcn/ui fit, Figma links instead of images, and any OS in the browser.
Price (as of October 9, 2026): free with 7 messages a day; Plus is $30 per user per month with $30 of included credits.
Where the code lands: in v0, as Next.js code you sync to GitHub or deploy to Vercel. Unless you've set up your design system, the components are shadcn/ui's.
Best for: teams that want AI to work in their existing repo, starting from Figma files.
Where the components come from: your repo. Builder.io's Fusion connects to GitHub, GitLab or Bitbucket and generates code with your existing components, following whichever Next.js router you use. Export frames with the Builder.io Figma plugin, or paste one. Each session runs on a new branch, and you open a pull request when you're done.
Where it beats Subframe: it imports Figma designs through a plugin, works on your original component files in React, Next.js, Vue, Angular or Svelte, and runs in the browser or in VS Code and Cursor.
Price (as of October 9, 2026): free with 60 agent credits a month; Pro is $24 per user per month billed annually, with 500.
Where the code lands: a pull request against your repo, from the session's branch, built with the components already there.
Best for: people who know Figma and want to prompt, pick from variations side by side, then fix details with design control, while developers get code they own.
Where the components come from: your code, recreated. In the macOS desktop app, the agent reads your codebase and rebuilds your components as Subframe components, starting with core ones like buttons, inputs and cards. It doesn't use your files as-is, so import your theme first (Tailwind config, CSS variables or JSON) to make them match.
Your Figma work: as images. Copy a frame as a PNG, paste it into agent chat, and get 1–4 variations as real pages on the canvas, built with your Subframe components. Figma variables can come in as a JSON export. There's no Figma file connection.
How you design: ask the agent to combine variations ("the header from variation 1 with the layout from 3"), then make precise edits in the Inspector, or use quick edits, which show up to 3 options next to the original.
What developers get: presentational React + Tailwind, with no API calls, state or business logic. Components sync to a folder in your repo through the CLI, one way, from Subframe to code. The agent implements pages in your repo, or Claude Code, Codex or Cursor pulls them through Subframe's MCP server. Developers join free as Viewers and can still sync.
Where others beat it: Figma, v0 and Builder.io read Figma files or links. Builder.io and Code Connect use your original component files; Subframe syncs its own versions. Codebase work needs a Mac, and there's no hosting.
Price (as of October 9, 2026): free for one project; Pro is $20 per editor per month. In the desktop app, the agent can run on your own Claude Code or Codex subscription.
Where the code lands: each synced component becomes its own folder in your repo, with a generated file that Subframe overwrites on every sync (such as Button/Button.tsx) and an index.tsx wrapper you can edit and protect from sync.
Best for: turning finished Figma designs into Next.js while design stays in Figma.
The Locofy Lightning plugin converts your Figma layers into component-based Next.js code with props, styled with Tailwind or other options. Export a ZIP, push to GitHub, or pull into VS Code. It reads real Figma layers, which Subframe can't, but it converts designs rather than generating them from prompts. It splits your design into its own reusable components, can import your Tailwind config or a global stylesheet, and merges later design updates on GitHub while keeping the logic developers added.
Price: see Locofy's pricing page.
Best for: product teams prototyping in the browser on their own design system.
Import your design system from a GitHub repo, a local code folder or a live URL, then generate prototypes with those components on an infinite canvas with real-time collaboration. Export React through its MCP server or GitHub sync, or send designs to Figma. It can also start a design system from a live product URL, not just code.
Price: free to start; see Magic Patterns' pricing page for paid plans.
Both build and host a whole app from a prompt, backend included, which Subframe doesn't do. Lovable has Git sync with GitHub, GitLab or Bitbucket on every plan; design systems need Pro, and design systems from an npm package need Enterprise. Bolt's Teams plan adds private npm registries and design-system knowledge.
Price (as of October 9, 2026): both have free plans. Bolt Pro is $25 a month; for Lovable's paid plans, see its pricing page.
Best for: developer-led teams that don't need a visual step.
Developers point Claude Code or Cursor at the Figma frame through Figma's MCP server; with Code Connect, the agent gets references to your components. Code lands in your repo with logic and data, not just UI. The trade-off: no canvas to compare options or adjust a detail visually, so every change is a prompt.
Price (as of October 9, 2026): Claude Code is included in Claude Pro, $17 a month billed annually.
npx @subframe/cli@latest sync --all to sync components, and have the agent implement the page, or pull it into Claude Code through the MCP server.It depends where the components live. Builder.io, and Claude Code or Cursor with Figma's Code Connect, generate code against the components already in your repo. v0 uses shadcn/ui or a design system you set up. Subframe recreates your components from your code, then syncs its versions to your repo as React + Tailwind.
Yes. Builder.io works with your repo's components, Magic Patterns imports a design system from a repo, folder or URL, and Subframe recreates yours from code. Figma's own answer is a Make kit.
Figma Make reads them natively, Builder.io and Locofy through plugins, and v0 through a Figma link. Subframe takes frames as pasted images and variables as a JSON export; it doesn't open Figma files.
For developers who want Next.js code, v0 is the more direct route. Figma Make is better if your team designs and reviews in Figma and wants to stay there.
Figma says credit use varies with the model, the task and the context you attach, and seat credits don't roll over. Alternatives charge differently: v0 Plus includes $30 of credits per user a month, Builder.io paid seats get 500 agent credits, and Subframe's desktop app can run on your own Claude Code or Codex subscription.
For codebase work, yes: connecting a codebase, the built-in browser and your own Claude Code or Codex subscription need the macOS desktop app. Subframe says Windows and Linux are coming. The canvas also works on the web.
Paste one frame, pick from the variations, and sync the components into your Next.js repo. Try Subframe free
Checked October 9, 2026.
Changelog: October 2026, first published.
