How Figma engineers sync designs with Claude Code and Codex
Figma engineers Gui Seiz and Alex Kern demonstrate how Figma MCP (Model Context Protocol) enables seamless bidirectional syncing between design and code, eliminating the traditional linear workflow where designs and implementation drift apart. The episode showcases a "code-design-code sandwich" workflow where teams can rapidly prototype, collaborate, and iterate by pulling code into Figma for visual refinement, then automatically converting design changes back into production code—fundamentally changing how design and engineering teams work together in the AI era.
Key takeaways
- • AI has collapsed the cost difference between prototyping in code versus design, allowing teams to create functional wireframes immediately rather than static mockups, enabling more exploration and experimentation.
- • The Figma MCP acts as a bridge between design and code by reading codebases, understanding UI states, and automatically importing them into Figma as editable components, keeping design files in sync with production reality.
- • Designers can now focus on higher-level creative decisions and planning stages rather than pixel-perfect specifications, since AI handles the mechanistic implementation work, freeing up both designers and engineers for problem-solving.
- • Multi-player collaboration in Figma remains superior to code-based prompting for precise visual editing and team brainstorming, making it the ideal tool for synchronous design refinement before handoff to engineering.
- • Converting internal SOPs and best practices into skills (reusable prompts) allows engineering teams to automate routine processes like pre-flight checks, linting, and CI monitoring, reducing toil and enforcing standards systematically.
- • MCPs and skills enable engineers to query codebases for institutional knowledge (like service naming history), learn from open-source libraries, and upskill themselves without context-switching away from their IDE.
Recommendations (5)
"I often have two, three, up to five maybe Claude Code instances running all at the same time working on different aspects of the work that I'm tracking."
Alex Kern · ▶ 1:04
Mentioned (5)
More from these creators
Claude Code for personal productivity: a step-by-step tutorial | Hilary Gridley
How Stripe deploys 1,300 AI-written PRs per week
How Microsoft's AI VP automates everything with Warp | Marco Casalaina
From journalist to app developer using Claude Code
Palantir CEO on Iran, AI Weapons and America's Advantage | a16z American Dynamism Summit
5 steps to generate consistent brand images with Midjourney