An interaction can look perfect in a static tool like Figma but feel terrible when built. Prototyping allows designers to experience the 'feel' of their work—a crucial step for validating ideas, developing intuition, and creating higher-quality products that you can't get from static mockups alone.
Related Insights
Design and engineering teams should stop treating Figma as the ultimate source of truth. It is a simulacrum. The real source of truth is what customers experience in production. Orienting the entire team around the live product ensures everyone is solving for the actual user experience.
Vercel's Pranati Perry explains that tools like V0 occupy a new space between static design (Figma) and development. They enable designers and PMs to create interactive prototypes that better communicate intent, supplement PRDs, and explore dynamic states without requiring full engineering resources.
AI-powered "vibe coding" is reversing the design workflow. Instead of starting in Figma, designers now build functional prototypes directly with code-generating tools. Figma has shifted from being the first step (exploration) to the last step (fine-tuning the final 20% of pixel-perfect details).
When building his own site, MDS doesn't aim for pixel-perfect Figma files. He gets the design to 85% completion, establishing the core direction, and then moves to code to finalize details like hover states and animations where the interactive "feel" is paramount.
The goal of high-fidelity prototyping isn't just to show features, but to create an experience so real it makes people ask, "Is this real?" This suspension of disbelief elicits more genuine, emotional feedback than a simple functional demo ever could.
Before writing code, you can string together hyperlinked screenshots in a design tool like Figma. This creates a 'hacky' prototype that feels like a fully built app to potential customers, allowing for rapid, low-cost user testing and validation.
Instead of creating static mockups in Figma, Cursor's design team prototypes directly in their AI code editor. This allows them to interact with the "life states of the app" and get a more realistic feel for the product, bridging the gap between design and engineering.
For complex or nuanced interactions, build small, single-purpose coded tools. These "vibe tools" aren't for building the entire prototype but for tuning specific parameters—like animation easing—to achieve the perfect feel, blending different creation methods for the final result.
In design thinking, early prototypes aren't for validating a near-finished product. They are rough, low-cost "artifacts" (like bedsheets for walls) designed to help stakeholders vividly pre-experience a new reality. This generates more accurate feedback and invites interaction before significant investment.
Instead of starting in Figma, prototype complex web animations using "gray boxing," a technique from game development. By using basic shapes and code (like HTML/CSS/3JS) to define the core flow and feel, you can validate the interaction's energy before investing in detailed visuals.
