We scan new podcasts and send you the top 5 insights daily.
The debate over designing in code versus a visual canvas is outdated. The modern workflow isn't about choosing one, but fluidly moving between both tools based on the task: canvas for broad exploration and code for deep, interactive prototyping.
Standard AI coding tools force a linear A-to-B iteration process, which stifles the divergent thinking essential for design exploration. Tools with a 'canvas' feature allow designers to visualize, track, and branch off multiple design paths simultaneously, better mirroring the creative process.
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).
AI makes iterating in code as inexpensive as sketching in design tools. This allows teams to skip low-fidelity wireframes and start with functional prototypes, blowing up traditional, linear development processes and reinventing workflows daily.
The emerging paradigm is a central coding agent with multiple specialized input tools. A canvas tool (like Paper) will be for visual prompting, an IDE (like Cursor) will be for code refinement, and a text prompt will be for direct commands, all interoperating with the same agent to build software.
The traditional, linear design process is obsolete. The new way of working is a fluid, 'start anywhere' model where an idea can begin in code, a document, a canvas, or a Slack thread, with creators bouncing between tools as needed to develop the concept.
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.
The debate between canvas-based and code-based design tools is a false choice. A canvas is an interface (a medium) while code is a foundation (a base). The future is a canvas that is directly anchored to and manipulates code, combining the benefits of both.
Figma's CEO argues that while agentic coding systems are powerful, they risk being too linear. True product innovation requires exploring a wide option space through design, using systems and components to ensure a cohesive user journey. Relying solely on code generation can lead to a suboptimal product, even if it's built quickly.
Tools like Figma's MCP act as a connector, allowing designers and engineers to work on the same component simultaneously from their preferred environments. This creates a new, fluid, back-and-forth workflow that resembles pair programming for design and code.