Figma Make is Figma’s answer to a question designers have been asking for years: what if my design was also the code? It’s an AI feature built into the Figma design environment that takes your frames and components and generates functional, interactive UI — React, HTML, or other targets — from the visual layer, without requiring a developer handoff.

For anyone who has watched a beautiful design get mangled in the translation to code, this is a meaningful promise.

New in April 2026: Make Kits and Make Attachments

On April 2, Figma shipped two updates that meaningfully change how useful Make is for teams with real design systems.

Make Kits let design system owners bundle their component libraries with detailed usage guidelines and publish them as reusable packages. When a Make Kit is active, every prototype Make generates starts from your actual components — the right typography, the correct button variants, the design tokens you’ve spent months defining. Previously, Make would approximate your design system from whatever it could infer; now it can be explicitly taught. This is a big deal for any team tired of Make producing prototypes that look like Material Design instead of their actual brand.

Make Attachments let you inject context directly into a Make prompt without re-prompting or manually copying content. Attach a PRD as a PDF, a brand guideline as a markdown file, a data export as a CSV, and Make uses that material while generating. It also supports images and SVGs as actual assets rather than placeholders — which eliminates one of the most frustrating parts of the previous experience, where you’d generate a prototype only to find every image replaced by a grey box.

Supported file types: PDF, markdown, TSX/JS/CSS, CSV/JSON, JPEG/PNG/GIF/MP4/MP3, SVG.

If you’ve used Make and found the output too generic, both of these updates directly address that complaint.

How it actually works

You design in Figma as normal. Figma Make analyzes the visual structure of your frames — spacing, typography, colors, component hierarchy — and generates code that reflects the design intent. The output is more accurate than most AI-generated UI because it’s working from a real design specification rather than a text description.

The interactive layer is where it gets interesting. You can annotate your Figma frames with intended behaviors — “this button opens this overlay,” “this field validates on blur” — and Make will incorporate that logic into the generated code. The result is a working prototype that’s closer to a real component than a clickable mock.

Strengths for designers specifically

For designers who have some technical fluency — who understand what a React component is, even if they don’t write them — Figma Make is genuinely empowering. You can own more of the production output without being blocked by a developer. That’s a real shift in workflow.

The quality of the CSS output is notably better than most AI tools, because it starts from pixel-accurate design data. Colors are exact, spacing matches the design, and font styles are correctly applied. This saves significant time in the review-and-fix cycle.

The cost reality

Figma Make requires a Figma full plan, which starts at $45/mo per editor. This is not a cheap addition. For an individual designer, it may or may not be worth it depending on how often you need to ship code. For a design team already on Figma Organization or higher plans, it’s included and effectively free to try.

Limitations for non-designers

If you don’t work in Figma and don’t intend to, this tool is not for you. There’s no standalone Figma Make experience — you’re getting it as part of the Figma design environment. The $45/mo baseline is hard to justify for anyone who won’t use the rest of Figma.

What it doesn’t replace

Figma Make is a UI code generator, not a full-stack builder. It produces frontend components. Connecting those to a backend, adding authentication, managing state across a real application — none of that is in scope. A developer still needs to integrate the output into a working codebase.

Think of it as compressing the design-to-frontend step, not eliminating the need for developers entirely.

What people have built with it

Eye-Following Card — A cursor-tracking interactive card experiment built and published live with Figma Make by community member Thierry Charbonnel.
Word Search App — A fully playable word search game built as a Figma Make prototype, published as a live site by Lindsey Norberg.
Figmacraft 3D Game Creator — A browser-based 3D game builder built entirely in Figma Make by Kris Masera.

Browse the community gallery at figma.com/gallery.

Bottom line

Figma Make is the most compelling tool in the design-to-code category for teams that design in Figma. The quality of the output is higher than prompt-based UI generators, and the workflow benefits for design-to-engineering handoffs are tangible. If you’re already paying for Figma and you want to close the gap between design and code, this is the right tool to explore.

Was this helpful?