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.

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).

Historically, design workflows moved from low-to-high fidelity due to tool constraints. AI tools like Codex remove these barriers, allowing designers to begin with functional wireframes in code for immediate interaction testing, bypassing static sketches.

Production code often evolves past design files, creating workflow friction. Figma's MCP tool uses AI to pull live application states directly into design files and push updates back to code, creating a synchronized source of truth.

The handoff between AI generation and manual refinement is a major friction point. Tools like Subframe solve this by allowing users to seamlessly switch between an 'Ask AI' mode for generative tasks and a 'Design' mode for manual, Figma-like adjustments on the same canvas.

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 current model of separate design files and codebases is inefficient. Future tools will enable designers to directly manipulate production code through a visual canvas, eliminating the handoff process and creating a single, shared source of truth for the entire team.

Documenting every UI state is tedious for designers. Now, engineers can use an AI agent to parse the live codebase and automatically export all existing states (e.g., all five steps of a signup flow) directly into a Figma file for designers to review and refine.

Notion built a `/figma` command that enters a "verification loop." It uses multi-modal tools to open the browser, visually compare its coded implementation to the original Figma file, and automatically iterate on the code until it matches. This moves beyond simple generation to a self-correcting system.