Figma 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.

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 and the Figma to code with Claude guide cover the other direction.

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 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 comparison sets them side by side. Stitch is Google's take on the same prompt-to-UI idea and pastes into Figma rather than living there. v0 and Lovable start from code and aim at a deployed app. For the full picture, see the Claude Design guide and best AI tools for designers in 2026.