Skip to main content

Design to code with AI in Figma Make

Describe the experience you want to build. Figma Make turns your designs into working, editable code—ready to test, share, or refine.

Go from design to functional code with AI

Generate code with natural language

Start with a frame and describe what you want. Figma Make outputs editable, functional code—so you can move from mockup to testable prototype faster.

Edit and inspect the output

Use the built-in code editor to inspect, tweak, and extend the code that powers your design.

Design and develop in the same space

No more switching tools or rebuilding from scratch. Figma Make lets you prototype and adjust the code in one seamless workflow.

Share or publish your prototype

Share with just your teammates or launch for all users.

Built by real teams.

See how makers, designers, and PMs are using Figma Make to build no-code web apps—from internal tools to product MVPs.

How to generate a prototype with AI in Figma Make

FAQs

From the blog

Show don't tell: Embed Make prototypes everywhere you work in Figma

Today, we’re introducing the ability to embed Figma Make prototypes into Figma Design, FigJam, and Figma Slides, along with new editing tools that help you build and share your best ideas.

Learn more

Cooking with constraints: A designer’s framework for better AI prompts

Design and cooking share a truth: Preparation determines the outcome. Structured prompts turn AI from guesswork into a reliable design partner.

Learn more
Abstract illustration of birds interacting with a digital system.Abstract illustration of birds interacting with a digital system.

Prototypes are the new PRDs

A growing number of product managers are finding that the fastest way to clarity is to build. Inside Figma Make, they’re pressure-testing assumptions early, building momentum, and rallying teams around something tangible.

Learn more
Dashboard interface showing ecological survey reports with a prompt to create a recent location reports dashboard.Dashboard interface showing ecological survey reports with a prompt to create a recent location reports dashboard.

Figma Make is now available in Figma for Government

With Figma Make now available in Figma for Government, teams can prototype faster, collaborate securely, and accelerate progress on modernizing public services.

Learn more
a yellow numeral three overlaid on a dark green numeral threea yellow numeral three overlaid on a dark green numeral three

Version control: One founder’s mission to save local farms with Figma Make

Factory farms and rising costs are putting British Columbia’s small growers out of business at an alarming rate. To fight back, entrepreneur Aaron Veale used Figma Make to build a marketplace app that helps farmers sell their produce—all in a matter of weeks.

Learn more

Creativity meets precision with Google's Nano Banana Pro

From quick style variations to precise edits, Nano Banana Pro helps teams stay creative without losing context or brand integrity.

Gemini 3 Image pro helps teams stay creative without sacrificing context or brand integrity

[@portabletext/react] Unknown block type "span", specify a component for it in the `components.types` prop

  • What is MCP?

    Learn about Model Context Protocol (MCP), the open standard that simplifies AI integration like a USB-C for data.

    Read article
  • What is Vibe coding?

    Vibe coding combines mood-driven design with seamless coding to create immersive digital experiences that connect emotionally and function flawlessly.

    Read article
  • How to design an app in five steps

    Building an app requires research and constant iteration to meet customer needs. Learn how to design an app and how Figma can help in this guide.

    Read article