Patrick Morgan makes a clean distinction that vibe-coding discourse keeps blurring: prototype code is for exploration, production code is for endurance. He is building a protected prototyping environment using Claude Code, a place where his team can move fast and then deliberately port the right assets across the boundary into production.
There is a clear parallel with how the design team at Notion works. In the recent episode of How I AI, Brian Lovin showed their collaborative “prototype playground,” where the entire team can create, share, and iterate on functional prototypes.
That also reminded me of how my team worked a decade ago, back when front-end development was a tad simpler. We had a separate “mockups” directory inside the Rails monorepo, where designers prepared static HTML mockups with production-ready CSS and JS. By the time designs were handed off to engineers in a feature branch, all polish and design details were already baked in. The design team must be fairly technical, but there is no going back to handing off Figma files after working this way.
In this interview, Jay Dalal chats with Laura Dunn, Head of Design Research for the GM Human Interface Design Team. You will learn how Laura uses Figma Make as a UX researcher to communicate visually with designers.
Romina recorded a quick walkthrough on how to build clickable prototypes using Figma MCP and Cursor.
Elie Majorel shares the playbook of prototyping with AI tools, allowing other designers to spend less time on appearance and more time on impact. “One Sunday I opened Miro, sketched a few boxes for a new agent search, and copied the flow into Claude. Claude wrote a clear spec. I pasted that prompt into Lovable, pressed generate, and two hours later a working React repo ran in a sandbox. Engineers forked the code the week after. Leaders clicked the demo and said keep going. Two hours from idea to running product. No Figma layers. No endless handoff.”
Joseph Mueller recreated the NYT Connections game as a fully playable Figma prototype. Took me a couple of attempts to solve, but I got it!
A new analytics tool for Figma prototypes — create a unique tracking link that intercepts user interactions with your prototype and reports them back to you as stats and recordings. As a big fan of user screen recording tools, I’m looking forward to trying it out for testing.
You can now download your prototype or slide deck to view or present offline.
The prototyping and variables modals are now resizable, giving you more screen space for setting up prototyping interactions and viewing the details for multiple actions.
Kudos to Oğuz for his patience while creating such a sleek and advanced animation with just a Figma prototype. That’s a lot of frames to connect.
In this workshop, Miggi explores approaches to Advanced prototyping in Figma: “We‘ll walk through examples using variables and component sets to create dynamic prototypes that are easy to manage and iterate upon. This is an intermediate level workshop and builds on a basic understanding of prototyping in Figma Design.”
Mizko explains how to use Sections when prototyping in Figma: “When presenting your final output with Sections, Figma remembers the user’s last viewed frame. This ensures that when the user returns, it will show the previously viewed frame first. This creates a more comprehensible transition of your prototype.”
Figma added iPhone 16 (including Pro, Pro Max, and Plus), Apple Watch Series 10 (42mm and 46mm), and Android (Compact, Medium, Expanded) to the Frames menu. If you need vector iPhone 16 device frames for the prototyping, Keeyen published the community file with different models and colors.
“Experience your designs on any screen size with a new Prototype viewer experience that resizes responsively. With a new menu option for previewing or presenting prototypes, the viewer will respect constraints and Auto Layout properties as you resize the viewer window or select a different device frame.”
Double Glitch made a new tutorial on creating a real working parallax effect in Figma. Don’t miss the Community file as well!
“In this two part series, we’re using variables to build an advanced prototype of an interactive, configurable volume bar. Configurable prototypes are easily customized and adapted and allow us to edit and change interactions in less time. In this first video, we’re going to set up the foundation of our interaction.”
Use the new “Set variable mode” prototype action to change the variable mode of the current page. See the new section in the help article or try it out in an updated Advanced prototyping playground file.
Ridd published a crash course on advanced Figma prototyping with variables. He explains when to use variables instead of variants and shows how to streamline the prototyping process by using variables to update UI elements without requiring multiple frames. Additionally, he prepared a community resource with slides and examples.
Lauri makes a strong case for introducing responsiveness to the prototype mode. Luis hints that something is cooking, and we’ll hear more at Config 2024.
Ridd runs a free advanced prototyping crash course on March 29th.