Figma's Config 2025 just dropped some major news, and a key highlight is the new AI product: Figma Make. With Make, Figma enables users to take existing designs and, through prompting, transform them into fully coded, interactive prototypes. The goal is to let you quickly experience how your designs feel and iterate on their interactivity.This is a big deal for rapidly prototyping and validating ideas inside Figma. But it gets us thinking—once you have that AI-enhanced prototype from Figma Make, how does it become a maintainable part of your existing, external production codebase?Figma Make First, let's break down what Figma Make brings to the table. Powered by Anthropic's Claude Sonnet, Make allows you to take a design you've already created in Figma and bring it to life:Select an existing Figma design frame.Paste it into the Make prompt box.Describe the interactivity you want (e.g., "animate the bars so they smoothly grow upwards from the x-axis to their respective values when the graph first becomes visible").Figma Make then interprets your design (passing structure and metadata, not just an image) and your prompt to generate a coded, interactive prototype. Rapid prototyping: Quickly turn static screens into something users can click, interact with, and experience. Data-driven prototypes: Upload files (like a GPX for a cycling app) or connect to real APIs (like a map API for a clinic finder) to make prototypes feel more real. Targeted edits: Point and edit tool: Directly manipulate properties like size, color, and font of elements within the Make environment. Point and prompt: Select a specific part of the design and prompt changes just for that area. Collaboration: Since it's within the Figma ecosystem, teams can collaborate on these interactive prototypes. Integration with Figma Sites: Make is also shown to integrate with the "Code Layers" feature within Figma Sites, allowing designs to be turned into React code and then further brought to life with Make for more complex interactions within that environment. Figma Make is positioned as a tool for exploration, for quickly getting a sense of how a design should look and feel, and for prototyping complex interactions or even more experimental UI/UX concepts. It's excellent for designers, product managers, and teams looking to validate ideas and iterate on the experience of a design rapidly. The reality of generated code in productionThe interactive prototypes generated by Figma Make are fantastic for quickly validating ideas and exploring how something feels within the Figma environment. This truly lowers the barrier to bringing concepts to life and testing interactivity.But, as developers and designers focused on shipping large, scalable, maintainable products, we know the journey doesn't end with these prototypes.The critical question remains: How do these AI-generated prototypes become a maintainable part of your existing, external production codebase? Does the code underlying a Figma Make prototype:Know about your team's carefully crafted Button component in your React library?Understand your Tailwind config or specific CSS variable naming conventions (-color-primary-500, not #3B82F6)?Use the right framework-specific patterns (like adding "use client" for Next.js App Router)?Slot neatly into your established file structure and adhere to your linting rules?This isn't a criticism of Figma's groundbreaking work with Make; it's a fantastic tool for its intended purpose of rapid, interactive prototyping. However, it highlights the classic challenge of bridging the gap between a design/prototyping environment (even one that generates code for its prototypes) and a complex, established production codebase. Developers often spend significant time manually translating, refactoring, and integrating code from prototypes to meet these production requirements.As products scale and teams grow, the need shifts towards something different — not better, just better suited for enterprise complexity and deep integration.Going from Figma designs to integrated codeThis exact challenge—moving from design intent to production-ready, context-aware code—is precisely what we've engineered to solve at Builder.io.Our approach centers around generating code that doesn't just look right or feel right in a prototype, but integrates right, using your existing standards, components, and codebase architecture.Import Figma Designs into Builder.io's Visual Editor:Start by easily exporting your designs from Figma directly into our Visual Editor using the Visual Copilot Figma plugin. This brings your familiar design environment into a space where it begins its journey to production code.Visually refine designs and build prototypes:Within the Visual Editor, you're not just manipulating pixels; you're visually writing actual code. You can fine-tune layouts with Figma-like precision and leverage AI to generate or modify UI elements.Integrate and iterate with the Visual Copilot CLI:Visual Copilot CLI automatically analyzes your existing codebase (no setup needed!) to understand your specific frameworks, styling conventions, and component libraries, ensuring the generated code fits perfectly.You can leverage the component mapping feature for even greater precision when translating design elements to your existing coded components. The CLI also enables surgical updates when designs change, keeping your design and code synchronized without requiring manual refactoring.Here’s a GIF showing how an onboarding design in Figma transforms into a functioning prototype in the Visual Editor and then seamlessly converts to implementation code in an existing project:The key difference is that it does not generate isolated, generic code for a prototype that you'll need to rewrite heavily for production. Instead, it creates code that looks, feels, and integrates as if it were written by your own developers, respecting your project's unique context and standards.The goal isn't just faster prototypes; it's faster, more reliable production code that lives and evolves within your existing systems.Why we love both approachesAs developers ourselves, we're genuinely excited about Figma Make. It democratizes interactive prototyping and helps creators of all kinds explore and validate ideas more effectively and quickly. For designers, PMs, and anyone wanting to make designs "feel" real without deep coding, it's a powerful new tool in the Figma ecosystem.At Builder.io, we've focused on solving the unique challenges that teams face when building and maintaining production software at scale. This means needing to ensure consistency across large codebases, leveraging existing well-architected components, and moving quickly without sacrificing quality or integration. Our tools are built specifically for teams who need to generate code that integrates deeply and intelligently with these existing systems.Figma Make helps you explore what to build and how it should feel. Builder.io helps you take that vision and integrate it into your production reality.Getting started with Visual CopilotGetting started with Builder.io's Visual Editor and the Visual Copilot Figma plugin is straightforward:Open the Visual Copilot Figma plugin. Install it from the Figma Community if you haven't already. Select a layer or design in your Figma file that you want to bring into Builder.io. Click the "Export Design" button within the plugin. Click the "View Code in Builder" button. This will open your design directly in the Builder.io Visual Editor. (Optional) Enhance in the Visual Editor: Use AI prompts or manual controls to add interactivity, connect data, or refine the design within Builder, always with your production components in mind. Generate code with the CLI: Copy the provided CLI command from Builder.io and run it in your local project's terminal. The CLI will analyze your codebase and generate the integrated, production-ready code components.If you enjoyed this post, check out these related articles on our blog: Introducing Visual Copilot: convert Figma designs to high quality code in a single click.Try Visual CopilotGet a demo