Figma Make tutorial: from prompt to working prototype
Figma Make is Figma’s prompt-to-app tool. You describe an app or attach Figma frames, and Make generates a working React prototype you can refine through chat, direct edits or code, then publish to the web, copy back into Figma Design or export as code. Full access needs a Full seat on a paid plan, and every prompt uses AI credits.
What is Figma Make?
Figma Make is an AI feature inside Figma that turns a prompt into a working, interactive app. Under the hood it writes React and TypeScript code, so the result behaves like real software rather than a linked set of screens. You can start from a blank prompt or from existing Figma frames, and you can choose between AI models from several providers. If you are new to Figma itself, start with our Figma basics guide.
Who can use Figma Make and what does it cost?
| Plan or seat | Make access | AI credits a month |
|---|---|---|
| Starter (free) | Trial access in drafts | 500, with a 150-a-day cap |
| Professional, Full seat | Full access | 3,000 |
| Organization, Full seat | Full access | 3,500 |
| Enterprise, Full seat | Full access | 4,250 |
| Dev, Collab and View seats | Drafts only | 500 |
Make has no separate price; it runs on Figma’s AI credits. Figma’s help centre puts a Make request at roughly 30 to 100 or more credits, so a Professional Full seat covers somewhere between about 30 and 100 prompts a month. Figures are from UX Magic’s September 2026 tutorial; check Figma’s pricing page for current allowances.
How do you use Figma Make step by step?
- Create a Make file: From your drafts or a team project, choose Make.
- Write a focused first prompt: Describe the app, the users, the screens and the key interactions.
- Attach context: Add Figma frames for layout and a Make kit for your components, styles and guidelines.
- Preview and test: Click through the result in the preview and note what is wrong.
- Refine: Use chat for larger changes, the Edit tool for direct visual tweaks and the code view for precise fixes.
- Publish or export: Publish to a figma.site URL, copy the design back to Figma Design, download the code or push it to GitHub.
How do you write a good Figma Make prompt?
Because every request costs credits, the first prompt matters most. A good prompt names the type of app, who uses it, each screen, the main actions and any data. For example: “A three-step appointment booking flow for a dental clinic. Step one: choose a service. Step two: pick a date and time from available slots. Step three: enter contact details and confirm. Use the attached frames for layout and the brand kit for components.”
- Describe one flow at a time rather than a whole product
- Name screens and states, including empty and error states
- Attach frames instead of describing layouts in words
- Ask for one change per follow-up prompt so you can see what each did
- Use plan mode for large requests, so a wrong first build does not waste credits
How do you keep output on brand with Make kits?
Make kits let you bring your design system into Make: a code package of components, library styles and variables, and written guidelines. With a kit attached, Make builds with your real buttons, inputs and colours instead of generic ones. Teams with a mature design system get far more usable results. Our guide to design systems that work covers how to build one.
Can Figma Make prototypes use real data?
Yes, to a point. Make integrates with Supabase, so a prototype can store and read data, handle sign-in or save form submissions. That is useful for realistic user testing. For production apps, developers should still review security, performance and code structure.
When should you use Make instead of a normal prototype?
| Situation | Better choice |
|---|---|
| Testing visual layout and navigation | Standard Figma prototype |
| Testing logic, inputs and real data | Figma Make |
| Exploring many concepts quickly | Figma Make or another AI tool |
| Final handoff of detailed UI | Figma Design with Dev Mode |
| Decks and documents rather than apps | A tool such as Claude Design |
Our prototype design guide explains the wider choice of fidelity, and our Claude Design guide covers an alternative AI design tool.
How do you test a Figma Make prototype with users?
Because a Make prototype behaves like real software, participants can type, make choices and see realistic results, which produces more natural feedback than a click-through mock-up. Share the published link, give each participant a realistic task, and watch where they hesitate. Keep test data believable, reset it between sessions and tell participants it is a prototype so they are not surprised by gaps. Our guide to prototype usability testing covers how to plan and run sessions.
What mistakes should you avoid?
- Writing vague first prompts and spending credits on corrections
- Rebuilding your design system in every prompt instead of using a kit
- Treating generated code as production-ready without review
- Skipping user testing because the prototype looks finished
- Forgetting that Starter publishing requires posting to the Figma Community
Designers taking prototypes further should read how designers can ship real products with AI and Lovable vs Bolt vs v0.
How UIUX Studio helps
We use Figma Make alongside traditional design to test ideas faster, and we set up Make kits so AI output matches your design system. Our product design team can help you build that workflow.
Frequently asked questions
Is Figma Make free?
You can try it on the free Starter plan with 500 AI credits a month. Full access needs a Full seat on a paid plan.
How many credits does a Make prompt use?
Roughly 30 to 100 or more, depending on the request.
What code does Figma Make produce?
React and TypeScript.
Can I bring the result back into Figma Design?
Yes. You can copy a Make design back into Figma Design.
Is Make code production-ready?
Treat it as a starting point. Developers should review it before production.