# Figma Make: templates + copying Makes as design layers demo Source: https://www.youtube.com/watch?v=ZZFRuKzgZTk Recap page: https://rapidrecap.app/video/ZZFRuKzgZTk Generated: 2025-11-10T19:34:20.917+00:00 --- ## Quick Overview Figma Make introduces new capabilities allowing users to generate AI-powered, code-backed prototypes, use design system styles directly, implement real data integration via prompts, and leverage templates for rapid development, significantly streamlining the product development workflow from design to code handover. **Key Points:** - Figma Make enables the creation of AI-generated, code-powered prototypes, speeding up the transition from idea to interactive artifact (0:10). - Users can now use styles directly from their Figma design system libraries within Make, ensuring design consistency (2:07). - The platform supports using real data in prompts, allowing users to import data in various forms to power prototypes, including accessing device hardware like microphones or cameras (4:27). - New template features allow users to publish their finished Makes as templates, enabling teams to rapidly scale high-quality experiences (4:55). - The tool facilitates seamless designer handoff by allowing Makes to be copied as Figma design layers directly into a Figma file (6:01). - The point-and-edit tool allows for quick, no-dev-skill code edits, such as modifying text, colors, or padding directly on the resulting code/design (3:47). - Templates support versioning (e.g., Version 16 through Version 23) branching into multiple Riffs (Riff 1 through Riff 4) from a Published Template (5:54). ![Screenshot at 0:02: Holly Li introduces Figma Make as the way to bring ideas to life with AI-generated, code-powered prototypes, set against a backdrop showing a sample dashboard output.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-00-02.png) **Context:** Holly Li, a Product Manager at Figma, introduces and demonstrates the latest features of Figma Make, a tool designed to bridge the gap between design and code by transforming Figma designs into interactive, code-powered prototypes. The presentation covers advancements in AI prompting, design system integration, real-world data usage, template creation, and seamless handoff capabilities. ## Detailed Analysis The video details several significant updates to Figma Make, enhancing its utility in the product development lifecycle. Firstly, Make now allows users to bring ideas to life with AI-generated, code-powered prototypes (0:08). A key feature is the ability to use styles directly from existing Figma design libraries within Make, which helps maintain visual consistency across projects (2:07). Furthermore, Make supports integrating real data via prompts, allowing prototypes to leverage real-world context, including accessing device hardware like microphones or cameras (4:27). The introduction of Templates is highlighted as a major workflow accelerator, enabling teams to publish finalized Makes as reusable templates that can be scaled across teams, drastically reducing repetitive work and improving quality (4:55). The seamless handoff capability is demonstrated, showing how a generated Make can be copied directly as organized Figma design layers into a Figma file, ready for further design refinement (6:01). The point-and-edit tool is shown enabling quick, no-code adjustments to the generated code, such as changing text content or styles directly on the output (3:47). Finally, the concept of versioning within templates is illustrated, showing a published template branching into multiple Riffs, allowing for rapid iteration on different versions of the prototype base (5:54). ### Figma Make Introduction - Holly Li introduces Make as the best way to bring ideas to life with AI-generated, code-powered prototypes - It accelerates product development and prototyping (0:08-0:15) - Examples shown include bringing dashboards, sign-up flows, and product pages to life (0:24-1:30). ### Best Practices - Use designs with good hygiene (layer naming, minimal grouping, Auto Layout) - Use real data via prompts, including access to device hardware like cameras (4:24) - Compose effective prompts by including Scoop, Context & Intent, and Clear Language (4:05). ### Latest Launches - Templates enable scaling high-quality experiences across teams - Templates support versioning (0 to 1.0 to 1.1 to 1.3, etc.) and branching into multiple Riffs from a published template (5:11-5:59). ### Code and Figma Layer Bridging - Makes can be copied as Figma layers, enabling seamless handoff to the Editor - Point-and-edit tools allow for quick code edits directly on the generated design elements (6:01-6:22) - The tool allows for style extraction from design systems (7:41) and interacting with the generated code (7:59). ![Screenshot at 0:01: Holly Li introducing herself as a Product Manager at Figma and presenting Figma Make.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-00-01.png) ![Screenshot at 0:02: Text overlay introducing "Figma Make: The best way to bring your ideas to life with AI generated, code-powered prototypes."](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-00-02.png) ![Screenshot at 0:33: Demonstration of the 3D Beat Synth tool, an example of a complex Make prototype created by a designer \(Bruno\), showcasing interactive capabilities.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-00-33.png) ![Screenshot at 0:51: A tweet from Angela Liu showing interactive mockups generated by a one-shot prompt for a dashboard interface.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-00-51.png) ![Screenshot at 1:01: Visual demonstration of creating a complex 3D world within Figma using a prompt, showing the flexibility of Make.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-01-01.png) ![Screenshot at 1:12: Showcase of using Make to simulate complex mobile sign-up flows with multiple steps and conditional logic.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-01-12.png) ![Screenshot at 1:26: Demonstration of using Make to generate and customize design system documentation, specifically configuring a Dialog Component Playground.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-01-26.png) ![Screenshot at 1:54: Visual representation of the three core steps: Start with a design, Use your design system, and Templates.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-01-54.png) ![Screenshot at 2:57: Diagram illustrating the MCP \(Make/Code/Prototype\) to Make workflow, highlighting seamless handoff.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-02-57.png) ![Screenshot at 3:13: Best Practice slide emphasizing design hygiene: layer naming, minimizing grouping, and using Auto Layout.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-03-13.png) ![Screenshot at 3:44: Demonstration of the Point-and-Edit Tool for quick, no-dev-skill edits in code, such as changing text or colors.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-03-44.png) ![Screenshot at 4:05: Example of a detailed prompt used to generate an animated mobile payments flow, emphasizing context and constraints.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-04-05.png) ![Screenshot at 4:24: Visual showing real data integration via prompts, demonstrating a browser permission dialog and a 'Photo Search' window loading.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-04-24.png) ![Screenshot at 4:47: Guidelines screen showing markdown structure for best practices, including rules for positioning and file size.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-04-47.png) ![Screenshot at 4:55: Template feature demonstration, showing a published template that can be instantiated across teams.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-04-55.png) ![Screenshot at 5:54: Diagram illustrating template versioning: a Published Template branching into multiple Riffs \(Riff 1 through Riff 4\).](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-05-54.png) ![Screenshot at 6:00: Demonstration of the direct bridge between generated code and Figma layers, enabling seamless handoff.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-06-00.png) ![Screenshot at 6:12: Starting a demo by copying a complex dashboard design from a Figma page into the Make environment.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-06-12.png) ![Screenshot at 7:03: The generated dashboard appearing in the Make canvas after executing the prompt, showing complex data visualization.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-07-03.png) ![Screenshot at 8:08: The Figma Resources panel is open, showing various internal templates available for use.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-08-08.png) ![Screenshot at 10:41: The resulting dashboard after applying a prompt to replace the table with pie charts, showing the direct impact of the AI change.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-10-41.png) ![Screenshot at 11:36: Example of the attachment flow being generated and integrated based on a prompt, showing context interaction.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-11-36.png) ![Screenshot at 11:56: The final state of the dashboard after replacing the Learning Time chart with Learning Streaks, showing a significant UI transformation from a single prompt.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-11-56.png) ![Screenshot at 12:38: The ability to click on individual course cards \(like User Research\) to trigger specific interactions, such as a quiz modal.](https://ss.rapidrecap.app/screens/ZZFRuKzgZTk/00-12-38.png)