"Show me how this checkout flow works when users click 'Add to Cart'?"
A few years ago, this request from your PM or dev meant hours of duplicating frames, drawing connection arrows, and setting up every single interaction by hand. Today, AI can generate designs and complete interactive prototypes in seconds.
This shift from hours to seconds is changing the design workflow for teams everywhere, but it raised a question for us: what happens when you need that slick AI-generated prototype to work with your actual codebase?
AI prototyping uses artificial intelligence to automatically create interactive designs from simple text descriptions or basic sketches. Instead of manually connecting screens, defining interactions, and creating state variations, you describe what you want in plain language and AI handles the technical implementation.
The promise is compelling: faster iteration, more time for creative work, and the ability to test ideas without the manual grunt work. But as we'll see, there's a crucial gap between AI-generated prototypes and production-ready features.
Figma Make is Figma's new AI-powered features for prototyping that lets you create interactive experiences using natural language. It helps teams move from static designs to clickable prototypes without the manual work of connecting frames and defining interactions.
Before Figma Make, teams were already trying to speed up prototyping with AI through Figma plugins. Now that AI features are built right inside Figma, let's check out what it can actually do.
As a designer, you spend countless hours in your design process turning static screens into interactive flows. Figma Make's AI toolkit helps automate the repetitive tasks:
- Prompt-to-prototype generation: Start with nothing but a text description and get a complete interactive prototype with all screens, components, and navigation flows
- Natural language interactions: Attach your design and ask "make this button open the checkout modal", and watch it create the connection automatically
- Smart state generation: Describe different states and the AI creates the frames and transitions between them
- Component behavior: Tell it how components should behave ("this dropdown should show these options") and it handles the logic
- Multi-screen flows: Connect entire user journeys from landing page to checkout with a single prompt instead of drawing dozens of arrows
- Animation suggestions: The AI recommends appropriate transitions and timing based on common patterns
- Interactive components: Turn static design elements like buttons, icons, and navigation into components with built-in interactions and states
Figma Make is accessible from the home page. Here's how to use the key prototyping capabilities (the latest version includes all these features):
Type a description of what you want to build: "A carousel of products for a pet supply store" and watch as it generates all the screens, components, and interactions from nothing. The AI understands common patterns and creates clickable flows instantly, though these use generic components you'll need to customize for your brand.
Select a component and describe its behavior: "Add hover and active states to this button with a subtle scale animation." The AI generates the variations and sets up the interactions, supporting multiple themes if needed.
Select any element and describe what should happen: "When clicked, navigate to the cart page with a slide-in animation." The AI creates the connection and sets up the transition automatically. The interaction looks perfect in Figma, though you'll need to recreate this exact behavior in your codebase later.
Select multiple frames and describe the flow: "Create a checkout process that goes from cart to shipping info to payment to confirmation." Figma Make connects all the generated screens with appropriate interactions, understanding the context of each step. It's impressive how quickly you can prototype, even if these flows can't connect to your actual payment systems or inventory data.
Describe screens you haven't designed yet: "Create an error state for this form showing validation messages." Figma Make generates the frame based on your existing design patterns, maintaining your brand colors and style. Of course, you'll want to ensure these error states match your actual validation logic later.
Select a trigger element and describe the overlay: "Show a popup with user details when hovering over the avatar." The AI creates the overlay frame and sets up the interaction.
You've just spent 2 hours perfecting your prototype in Figma Make. The interactions are smooth, the AI nailed the user flow, and stakeholders are impressed. Then your developer asks the inevitable question: "Looks amazing but how do I actually build this?"
A flow chart showing how Figma Make creates code that developers must adapt to overcome key challenges before it reaches production.
While Figma Make speeds up prototype creation with its powerful tools, there are two critical limitations when you're building real products:
Limited to Figma's playground: The prototypes live entirely in Figma. They can't connect to your actual APIs, pull real user data, or integrate with your authentication system. You're prototyping with fake data while your real app needs production data to properly test flows. You can upload static CSV files, but that's not the same as live data.
The handoff gap remains: Even with AI-generated prototypes, developers still need to rebuild everything from scratch. That beautiful interaction you perfected? It needs to be recreated using your actual components and design system, following your coding standards, integrated with your state management. The prototype is still just a reference, not the real thing. Your carefully crafted design tokens remain disconnected from the code.
This is exactly why we built Fusion: to bridge the gap between prototyping and production. Instead of creating simulations that need to be rebuilt, what if you could prototype directly with your actual codebase?
Our approach is different: since prototypes need to become real features anyway, why not build them in your actual codebase from the start?
You're not creating a simulation when you bring your Figma designs into our platform. You're building with your real components, connected to your real data, in your actual codebase. You get access to all your existing code and infrastructure.
That button in your design maps to your existing Button component, complete with all its states, variations, and accessibility features already built in.
Import three Figma frames showing different states? Fusion understands they're one component and builds it with proper state management. It brings your static visuals to life.
Select any component and adjust it visually, like you would in Figma. Change the padding, adjust the border radius, tweak the shadows. But you're not editing a copy or a mockup. You're editing the actual component in your codebase. What you see is literally what users will see.
Your user list pulls from your actual database. The search bar queries your real search service. You're testing with production data, not Lorem ipsum.
"Move the user avatar to the left of the name" or "Add a loading state while data fetches." Provide a simple description and watch it happen in your real code.
Changes you make update your actual codebase. The spacing you see is the spacing users get. No surprises in production.
Every change you make in Fusion happens on its own git branch, so your main codebase stays untouched while you experiment. When you're happy with your changes, create a pull request and let your dev team review it. With Fusion, designers can ship code!
This approach means:
- UX designers can adjust production components directly
- Developers skip the rebuilding phase entirely
- PMs can prototype using real data and services
- What you test is literally what you ship
Testing a new checkout flow: Import your Figma file with multiple screens and connect them to your actual cart API, payment service, and user authentication. Test with real products, real prices, real user accounts.
Iterating on a dashboard: Pull in your analytics API and see how the design handles actual data volumes. Adjust layouts based on real content, not guesses. This is perfect for refining designs and then bringing them to team meetings.
Building a new feature: Start with Figma designs or even basic wireframes, connect to your existing services, and iterate until it's perfect. The "prototype" is already integrated with your codebase, using your design tokens and brand colors throughout.
Using Fusion for prototyping is straightforward:
- Install the Builder.io Figma plugin
- Connect your GitHub repository to Fusion
- Select your designs and export to Fusion
- Watch as your designs become working features using your actual components
- Test with real data and iterate with natural language in different languages
For new projects, just describe what you want: "Create a task management app with drag-and-drop cards" and Fusion generates a working starting point using modern frameworks and best practices. Choose from built-in templates or start from scratch. The full design to code workflow happens in one seamless experience.
Import your Figma designs, attach PDFs with requirements, upload reference images or share mockups. Fusion understands all types of visual context to build exactly what you need. Your designs can include complex image backgrounds or simple layouts, and everything translates perfectly.
The VS Code plugin brings Fusion's full power directly into your local development environment—pull in Figma designs, generate components using your design systems, and access AI-powered editing without switching contexts. All of Fusion's visual development capabilities work seamlessly in the background while you code.
Figma Make is a genuine step forward for design exploration and stakeholder communication. It's a great tool for quickly visualising ideas, testing concepts, or gaining buy-in on a direction.
But we believe there's room for both approaches: AI-powered prototyping for exploration and production-ready prototyping for implementation. Different tools for different stages of the product development journey.
When you're ready to move from "what could we build?" to "let's ship this to users," that's when building directly in your codebase makes sense. Why simulate when you can build the real thing just as fast?
Try Fusion for free and turn your next prototype into production code.
