Syncing Figma designs with Claude Code — How I AI talk

What the video covers

Gui Seiz (designer) and Alex Kern (engineer) from Figma walk through how their team has eliminated the traditional linear handoff between design and code. Using Figma’s MCP, they pull a running web application directly into Figma, edit it collaboratively, and push changes back into the codebase through Claude Code — all shown live. The conversation is hosted by Claire Vo and includes detailed workflow demos.

Who it’s for

Product designers and engineers who work together on shipping features and are tired of design files being perpetually out of sync with production code. Especially relevant for teams already using Figma and considering AI-assisted code generation as part of their workflow.

Key takeaways

Bidirectional sync replaces linear handoff. The old workflow — design in Figma, hand off to engineering, wait for implementation, discover drift — is replaced by a loop. Code state is pulled into Figma (so designers work with the real product, not an approximation), and design changes are pushed back into the codebase without manual CSS adjustments.
MCP enables exporting all component states into Figma. One practical problem the demo solves: flows with multiple states (like a five-step signup process) where engineering has built states that never existed in the design file. The MCP pulls all states into Figma so designers can review and refine the full picture.
AI has shifted design work to two ends of the process. The team observes that AI has eliminated the rushed middle phase of design — the rapid production of mid-fidelity mockups. What remains is upstream planning (strategy, research, defining what to build) and downstream craft (polishing details, ensuring quality). The middle is increasingly automated.
Custom skills automate pre-flight checks. Alex demonstrates a custom /ship skill that runs pre-merge checks: lint fixes, CI monitoring, and quality gates — all automated before pushing code to production. This removes repetitive manual verification from the designer-to-code workflow.
Codebase structure determines AI effectiveness. A specific insight from the episode: teams that structure their codebase with clear component boundaries and consistent patterns get dramatically better results from AI code generation. Alex estimates AI can write 90% of code in a well-structured repository, far less in a messy one.

Worth watching if…

You want to see how a team at Figma itself works across the design-engineering boundary with AI, and you are evaluating whether Figma MCP and Claude Code could replace your current handoff process.