How to Build, Edit, and Publish a Fully Functional Web App Using Figma Make

Figma's annual Config conference in San Francisco usually delivers a few surprises, but this year, one announcement jumped out for anyone who manages product timelines: Figma Make, an AI-powered prompt-to-code workspace that turns static designs—or even rough screenshots—into working web apps in minutes. Introduced in May 2025, the beta edition sits inside the familiar Figma interface and lets individuals and teams ideate, test, and publish without hopping between design and software tools.

What is Figma Make?

Figma Make is an AI-powered prompt-to-code agent that offers a fresh way to test, build, and improve software products using simple text prompts. It is essentially an AI assistant built into the Figma environment.

It takes design ideas from prompts, fully formed Figma files, rough sketches, or even just images to help you build them into something you can click, use, and share. 

You can communicate with it through a chat interface, tell it what you want, and it generates code and a live preview of a functional prototype or web application.

What Figma Make actually does

Figma Make is a chat window paired with a live preview pane powered by the Claude 3.7 AI model that can read natural-language prompts plus any attached Figma frames or images, then generates React-based code you can tweak in real time. You are free to keep iterating in the chat, or point at a button and type "add hover animation" for instant changes.

Here's a quick look at the key capabilities of Figma Make:

• AI-Assisted Creation: Uses text prompts to generate working prototypes and web applications directly from your designs or initial concepts.

• Interactive Prototyping: Quickly turns static visuals into clickable, interactive experiences, letting you feel how a product might work.

• Iterative Refinement: Allows for continuous changes and improvements through ongoing conversation with the AI or by making direct edits to the generated output.

• Design Integration: Works with your existing Figma designs, components, and content from the Figma Community, so you don't have to start from zero.

• Team Collaboration: Allows teams to work together in the same digital space, making changes and seeing real-time updates.

• Direct Publishing: With Figma, you can share previews with stakeholders or publish your functional prototype as a live website with its own URL.

How to build, edit, and publish a fully functional web app using Figma Make:

1. An AI chat where you provide instructions and designs.

2. A preview area where you see your app come to life, and can even tweak the code.

You can attach existing Figma designs or components, or even paste images if your idea is still in its early stages. Then, you simply talk to the AI, describing what you want the app to do or how it should look.

As you chat, Figma Make builds and updates the prototype. If you want to change something, you can continue prompting the AI or use an edit tool to point to specific parts of the preview and describe the adjustments, like altering spacing, colors, or text. This conversational and direct engineering approach means you can experiment with different solutions for a problem without needing to write complex code yourself.

How to use Figma Make to build, edit, and deploy web apps:

Step 1: Create a Make file

Go to Figma, in Drafts, hit ＋ Create, then Make to open a fresh Figma Make canvas.

Step 2: Describe the idea

In the AI chat, write what you want to build, and you can also attach Figma frames or images for extra context.

Step 3: Generate the preview

Click Send. Make writes the code and loads a live, clickable preview in a few seconds.

• Keep chatting to add features, or press edit and click any element to adjust colors, text, spacing, and more right in the preview.

• Open the version history to return to any earlier checkpoint without losing later work.

Step 4: Share or publish

Send the preview link to teammates, or choose publish to push the prototype live at its own URL.

Why businesses should pay attention

Product owners, designers, and marketers can now meet in the same file, describe a feature in plain language, and watch an interactive version appear next to the chat window.

Figma Make can be particularly useful for quickly testing different approaches to a product, getting early feedback, or helping everyone on the team understand the vision.

As the feature is built into Figma, team members can collaborate in real-time, adding features or testing interaction models together, helping reduce misunderstandings and keep everyone aligned.

Conclusion:

Figma Make doesn't replace design creation, and it definitely won't write your entire codebase. However, it compresses the early, fuzzy weeks of product discovery into an afternoon exercise. If your roadmap depends on quick experiments and tight collaboration, adding Make to your Figma workflow could give you free, valuable engineering time to get stakeholder feedback while being confident in your work. We didn't have access to Figma Make, hence we used pre-existing GIFs from Figma; however, consider it a conversation starter that just happens to teach you how to build working software.