Create Functional Prototypes with Figma Make
In this article, we’ll explore how to connect Figma Make to your design system to create interactive, data-driven prototypes ideal for usability testing.
Table of contents
The rise of AI-assisted design and functional prototypes with Figma Make
AI design tools have generated plenty of buzz — some even predict they’ll replace designers entirely. While that’s unlikely, tools like Figma Make are transforming how we design and prototype. In this article, we’ll explore how to build functional prototypes with Figma Make, connecting your design system to create realistic, data-driven experiences ideal for usability testing.
This prompt-based approach to UX/UI design lets you describe what you want to build in natural language — whether that’s a booking flow, a product page, or an entire app — and automatically generate interactive screens that store data, trigger actions, and send notifications.
Figma Make, which works alongside Figma Design, bridges the gap between static visuals and interactive logic — helping you move from design intent to functional experience in a fraction of the time.
After exploring existing demos online, I noticed most examples focused on simplified or abstract flows. I wanted to see how Figma Make would perform on a real commercial project — testing whether it could handle complex, data-driven behaviour while integrating seamlessly with an existing design system.
For this example, I recreated a simplified version of a hospitality booking journey originally designed for a client, using Flex Design System. The same concepts apply no matter which library you use — the principles are universal.
Preparing your designs in Figma
Context is key with any prompt-based tool. Spend a bit of time preparing your Figma file so Make can better understand its structure, behaviour, and the intent behind your prompts.
Follow these simple steps to set up your Figma file so it plays nicely with Make:
- Create a structured file: Use separate pages for wireframes, UI designs, and prototypes to keep things organised.
- Use clear naming conventions: AI tools perform better when components are consistently named (e.g. “Input Field” or “Date Picker”).
- Use a shared library: Make sure your components, styles, and tokens come from a central design system library. This ensures consistency and helps Make generate layouts that align with your established design language.
- Add component descriptions: Include short, meaningful descriptions in your components to give Make extra context about their purpose or behaviour. This helps it use them more accurately when generating screens.
- Set up grids and constraints: Figma Make interprets structure, so apply consistent layout grids and responsive constraints throughout.
Connecting your library to Figma Make
Figma Make — and other AI design tools — generate better layouts when they have the right context. One of the best ways to provide that context is by connecting your design system library.
You can do this in two ways:
- From Figma Design: Publish your library so it’s available to other files and tools. Once published, it can be accessed directly within Figma Make.
- Within Figma Make: Select the Library icon, then choose your design system from the list of available libraries.
Make sure all relevant components, variants, and styles are published before you connect.
Now, when you prompt something like “Add a booking confirmation card,” Make can map that request directly to an existing component in your system (for example, Venue Card), maintaining both accuracy and visual consistency.
Writing effective prompts
AI design generation thrives on clarity and intent. Think of your prompt as a design brief — define the purpose, flow, and tone.
Example initial prompt used in this project:
“Create an interactive prototype using the screens in this user flow. The device dimensions should be responsive and scale up to an iPhone 17 Pro Max.
Ensure all form inputs are functional and use the data input to populate the booking summary and confirmation screens.
Change the countdown timer to be 45 seconds.
Add a link to the logo to take the user back to the start of the prototype.
The user should be able to click the info icon in the countdown to toggle the tooltip as shown in the Countdown Tooltip frame.
The bottom buttons should remain sticky at the bottom of the screen whilst the user scrolls.
As the countdown scrolls off the page, it should be displayed above the bottom buttons and continue the countdown.
When the countdown expires, automatically show the Booking Timeout frame.”
In total, it took 64 iterations to reach the final version — proving this wasn’t a simple prompt-and-go exercise, but an iterative process of refinement and testing. Once the core functionality was working, I added further requests to store the data in Supabase and send a confirmation email via Resend.
Figma Make also generates a markdown file with step-by-step setup instructions for these integrations, complete with copy-and-paste code snippets for connecting accounts and managing API keys — making the process straightforward even for designers with limited technical experience.
Tips for better prompts:
- Start broad, refine later.
- Reference actual component names.
- Include logic or state details (e.g., “Show alternative options after countdown expires”).
- Use short, clear sentences — Figma Make interprets natural language best when it’s structured.
This process highlights how to create truly functional prototypes with Figma Make, bridging the gap between design intent and working interactivity.
Once the core prompts and logic were defined, it was time to apply them to a real scenario to test how well Figma Make handled complex, system-connected designs.
A real example: Hospitality table booking journey
To put Figma Make to the test on a real-world scenario, I based this example on the commercial hospitality project I mentioned earlier.
The goal was to recreate a fully functional restaurant booking prototype with five key screens and a confirmation email:
- Party size and date selection
- Time slot selection
- Countdown timer with an alternative time slots modal
- User details entry
- Booking confirmation
- Confirmation email
See the Prototype in Action: Iterating for Realism
Watch the prototype below, built with Figma Make and Flex Design System, and explore how iterative refinement improved its logic and realism. You can also explore the working prototype yourself here.
I started with an initial Figma Make prompt to get the basic flow working, then iterated with a series of additional prompts — refining screens, adjusting behaviours, and correcting issues along the way — until the prototype became a polished, fully functional experience.
The prototype stores booking data in Supabase and sends a confirmation email via Resend.com, creating a realistic, interactive, and testable flow.
The results weren’t perfect. At times, Make ignored certain styling choices, even after multiple prompts and despite being given a Figma design frame for reference. However, as the process evolved and it gained more context from earlier iterations, its responses noticeably improved. The technical instructions it generated in the Markdown files were clear and logically structured, but not always the most straightforward — occasionally requiring further clarification or refinement. Overall though, Make performed impressively for such a complex, design-led workflow.
Integrating with Lookback for Usability Testing
In the original commercial project, usability testing was conducted using a standard static Figma prototype connected to Lookback. For this example, however, using a Figma Make prototype would provide a far more realistic testing experience — allowing participants to interact with dynamic data and behaviours that better reflect a live product.
Lookback allows you to:
- Observe participants using the prototype as if it were live.
- Gather insights on form friction, timing behaviour, and comprehension.
- Test interactive elements such as the dynamic countdown, alternative slots modal, and confirmation email flow.
To go a step further, Figma Make can even help you prepare your testing script. I gave it the following prompt:
“I want to test the usability of this prototype with target customers. Can you create a usability testing script for me that includes a scenario to set the scene and then a series of questions based on the steps in the user flow?”
Figma Make responded with a comprehensive markdown guide, outlining scenarios, instructions, and participant questions. This saves valuable time when preparing structured moderated or unmoderated usability sessions.
AI prototyping vs native (static) Figma prototyping
Native prototyping in Figma is excellent for quick journeys and stakeholder walkthroughs. It’s fast, stable, and visually precise — but ultimately static. You can show transitions, but not dynamic logic or live data.
AI-based prototyping allows you to simulate functionality:
- Dynamic elements (like countdowns or modals).
- Conditional logic and branching paths.
- External data integration (Supabase, APIs, Resend.com, etc.).
When to use native (static) prototyping
- Early concepts and static user flows.
- Presentations where interactivity isn’t needed.
- Simple click-throughs or low-fidelity sketches.
When to use AI-based prototyping
- Mid- to high-fidelity designs where behaviour matters.
- Usability tests that benefit from realistic feedback loops.
- Projects exploring data-driven or logic-based interfaces.
Benefits of this approach
Combining AI tools with Flex creates a workflow that’s both structured and adaptable:
- Design accuracy: Consistent, system-based components every time.
- Rapid iteration: Generate and refine flows in minutes, not days.
- Realistic testing: Simulated logic produces genuine usability feedback.
- Stakeholder clarity: Interactive prototypes build confidence and understanding.
Final Thoughts
Functional prototypes with Figma Make aren’t just about adding interactivity — they represent a new, faster way to validate and refine real product experiences.
By combining AI-driven design generation with a structured system like Flex Design System, you can move from static screens to functional, testable prototypes that feel almost production-ready.
I found that my results improved with iteration — clearer prompts, smarter naming conventions, and consistent components all made Figma Make more reliable. While it may not yet replace full development prototypes, it’s a powerful tool for designers who want to explore realistic user flows quickly and confidently.
In upcoming articles, I’ll be comparing Figma Make with other AI tools such as MCP Server + Cursor and Loveable to see how they each handle interactive, design-system-led workflows.
If you’re new to design systems, you can also read the article on Design Smarter with Design Tokens in Figma to learn how structured tokens enhance consistency and flexibility.