# Figma Make > Figma's prompt-to-app tool: describe an idea or paste a design and get a working, code-backed prototype you can keep editing inside Figma. Figma Make turns a prompt, an image, or an existing frame into a code-backed prototype that lives next to your Figma Design files. Make kits bring a real React design system in through npm packages and published libraries. It runs on Full seats on paid plans, is metered in AI credits, and exports as a published link, a zip, or a push to GitHub. Website: https://www.figma.com/make/ Figma Make is Figma's prompt-to-app surface. You describe an interface, paste in a frame, or point it at a design system, and it builds a working prototype that is backed by real code and stays visually editable. Figma's own pitch for it is "Prompt to code anything you can imagine," and the product page frames the loop as "Prototype. Polish. Ship." For a working designer the interesting part is not that it generates a screen. It is where the screen lives. A Make file sits alongside your Figma Design files, can read styles and variables from your published libraries, and can push its current state back into Figma Design as editable layers with Copy design. That makes it a prototyping tool that happens to emit code, rather than a code tool you have to leave Figma to use. ## Highlights - **Prompt, image, or existing frame as input.** Make accepts attachments, comments, annotations, and voice-to-text prompting, so a screenshot or an annotated frame can carry as much of the brief as the prompt does. - **Make kits carry your real design system.** A kit can bring in an npm package holding your production React components, import variables and styles from published design libraries, and add written guidelines for how they should be used. Figma's docs describe the goal as prototypes that "use the exact same code as your production apps." React only, for now. - **Point-and-edit alongside the code.** Select an element and change it directly instead of re-prompting, with version history behind you, and ask Make to explain its own code without changing it. - **A backend when a prototype needs one.** Make connects to Supabase for secret storage, compute, and a Postgres database, which is what makes sign-in flows and saved state demoable rather than faked. - **Real handoff paths.** Publish to a public URL, a password-protected link, or an organization-only share; download the code as a zip; or push straight to a GitHub repository. - **Extensible.** Custom skills and MCP connectors let a Make file reach the same context your other agent tools use. ## In a designer's workflow Make earns its place when the question is behavioral rather than visual: does this flow feel right, does this empty state read, does this table survive 200 rows. Give it the design system first, then the flow, then the states. ```text Use our Make kit. Build the team invite flow: an empty state, an invite modal with role select, a pending-invites table, and an error state for an invalid email. Use only components from the kit. Then write plan.md describing what you would change to support bulk invites. ``` Asking for a `plan.md` before a complex change is Figma's own suggested pattern: you review the strategy before it is implemented, rather than after. When the prototype is settled, Copy design brings it back into Figma Design for redlines, or the zip and GitHub push hand it to engineering. If your source of truth is a repo rather than a Figma file, [Figma MCP](/tools/figma-mcp) and the [Figma to code with Claude](/guides/design/figma-to-code-with-claude) guide cover the other direction. > [!TIP] > Credit spend is unpredictable per request, and you cannot know the cost in advance. After a task completes, hover the AI credits icon to see what it consumed, and check your balance from the file's main menu before starting a long generation session. ## Good to know Figma Make runs wherever Figma runs: the browser, and the desktop app on macOS 12 or later and Windows 10 or later. Availability is by seat, not just by plan. Figma's FAQ states that Make "is available for Full seats on paid plans," with Dev, Collab, and View seats limited to drafts and unable to share Make files, and Starter plans unable to pull team-library style context. Usage is metered in AI credits that reset monthly without rollover. How it compares: [Claude Design](/tools/claude-design) covers a wider surface (decks, one-pagers, landing pages) and hands a bundle to Claude Code to build, where Make keeps everything inside Figma; the [Claude Design vs Figma Make](/guides/comparisons/claude-design-vs-figma-make) comparison sets them side by side. [Stitch](/tools/stitch) is Google's take on the same prompt-to-UI idea and pastes into Figma rather than living there. [v0](/tools/v0) and [Lovable](/tools/lovable) start from code and aim at a deployed app. For the full picture, see the [Claude Design guide](/guides/design/claude-design-guide) and [best AI tools for designers in 2026](/guides/comparisons/best-ai-tools-for-designers-2026). --- _Source: https://agentscamp.com/tools/figma-make — Tool on AgentsCamp._