Descriptions:
Host Claire Vo interviews Alex (engineer) and Ghee (designer) from Figma about the new design-to-code and code-to-design workflows their team has built using the Model Context Protocol (MCP) as a connector between Figma and Claude Code. Rather than dragging PNG mockups into a vision model, the MCP enables structured data translation directly between the Figma design file and the codebase — a distinction the video argues produces significantly higher accuracy than purely vision-based approaches.
The practical workflow demonstrated includes using a Claude Code agent to read a codebase, identify all states in a given user flow (such as a five-state signup screen), and import each state individually into Figma so that design partners can work against up-to-date representations of the actual shipped UI. Alex describes routinely running two to five Claude Code instances in parallel — some reconciling design file drift with the codebase, others writing specs, answering exploratory questions, or working on new features — spending most of his working time inside the terminal rather than switching between browser and code editor.
The conversation also covers how AI has collapsed the cost difference between sketching in design tools and riffing in code, blurring the traditional linear handoff between design and engineering. For teams navigating the intersection of Figma, Claude Code, MCP, and agentic workflows, this episode offers specific, replicable patterns from practitioners at one of the central tools in the design-engineering stack.
📺 Source: How I AI · Published March 11, 2026
🏷️ Format: Workflow Case Study
