Figma Make + Mini Project: Prompt to Prototype
You have covered native AI, editing tools, and plugins. There is one more layer, and it is the most ambitious: Figma Make. Where First Draft gives you an editable static layout, Figma Make goes further and generates a working, clickable, code-backed prototype from a prompt. You describe an app or an interaction, and Make builds something you can actually use in the browser.
In this final lesson you will learn what Figma Make is (and is not), then pull everything together in a short mini project that takes an idea from prompt to prototype.
What You'll Learn
- What Figma Make does and how it differs from First Draft
- The realistic limits of AI-generated prototypes
- How to decide which Figma AI tool fits which job
- A step-by-step mini project you can finish in one sitting
First Draft vs Figma Make
These two get confused constantly, so let us make the difference crisp.
Two different AI surfaces for two different goals.
| Criteria | First Draft | Figma Make |
|---|---|---|
| You get | An editable static design | A working, clickable prototype |
| Under the hood | Figma layers on the canvas | Generated code you can preview |
| Best for | Screens, layouts, exploration | Interactive demos and functional ideas |
| You then | Edit visually in Figma | Refine by reprompting and tweaking |
First Draft
- You get
- An editable static design
- Under the hood
- Figma layers on the canvas
- Best for
- Screens, layouts, exploration
- You then
- Edit visually in Figma
Figma Make
- You get
- A working, clickable prototype
- Under the hood
- Generated code you can preview
- Best for
- Interactive demos and functional ideas
- You then
- Refine by reprompting and tweaking
Use First Draft when you want a design to look at and edit. Use Figma Make when you want something people can click through and interact with, like a quick functional demo of an idea.
The honest limits of Figma Make
AI-generated prototypes feel like magic, and it is easy to overtrust them. Keep expectations grounded:
- The code is a starting point, not production code. Generated output is often not fully accessible, semantic, or clean, so it is meant for demos and iteration, not for shipping straight to users.
- It is best for exploration and testing. Make shines for pitching an idea, running a quick user test, or showing "what if it worked like this."
- A human still finishes the job. Real products need engineering, accessibility, content, and design review. Make gets you to a convincing draft faster; it does not replace the team.
Think of it as the fastest way to make an idea tangible, so you can react to something real instead of arguing over a description.
Which tool for which job?
Here is the whole course distilled into one decision. When you sit down with an idea, ask what you actually need:
Decision
What are you trying to produce?
- If A first layout to edit
First Draft
Prompt to editable design
- If A clickable, interactive demo
Figma Make
Prompt to working prototype
- If A fix or asset in an existing design
Native editing tools
Rename, content, image, search
- If Something Figma does not natively do
A community plugin
Magician, Automator, and others
Most real work uses several of these together, which is exactly what the mini project below does.
Mini project: an idea to a prototype
Give yourself about fifteen minutes. The goal is to feel the full workflow end to end, not to make something perfect. We will build a simple habit-tracker app concept.
Step 1: Draft the main screen with First Draft. Prompt: "A mobile home screen for a daily habit tracker app. Show today's date, a list of habits with check-off circles, a progress ring showing percent complete, and a button to add a new habit. Clean and encouraging."
Step 2: Make the content realistic. Select the placeholder text and use replace content so the habits read like real ones ("Drink water," "Read 10 pages," "Walk 20 minutes") instead of repeated filler. The screen instantly feels believable.
Step 3: Add a visual with an image tool or a plugin. Generate a small celebratory illustration for an empty state, using make an image or Magician's Magic Image. Drop it in and remove the background if needed.
Step 4: Clean up before you share. Select the frame and run rename layers so the structure is tidy and readable.
Step 5: Make it interactive. Use Figma Make (or add interactions) to turn the concept into something clickable: describe the flow, such as "tapping Add Habit opens a form, and checking a habit fills its circle." Preview it and click through.
At the end you have taken a one-line idea to a tidy, realistic, clickable prototype using First Draft, native editing, a plugin or image tool, and Make. That is the entire toolkit working together.
Where to go next
You now know Figma's AI as tool mastery. If you want to grow the thinking around it, the natural next steps are learning the broader design process (how AI fits into UX research, ideation, and design systems) and getting sharper at generating the images and assets you feed into Figma. Both extend what you built here.
Key Takeaways
- Figma Make generates a working, clickable, code-backed prototype from a prompt, unlike First Draft's static design.
- Make output is for exploration, demos, and testing, not production-ready code.
- Match the tool to the goal: First Draft for layouts, Make for interactive demos, native tools for edits, plugins for gaps.
- Real projects combine several tools; a human still handles accessibility, content, and final polish.
- You can carry an idea from prompt to prototype in one short session using the full toolkit together.