Skip to content
How I AIHow I AI

How Figma engineers sync designs with Claude Code and Codex

Most teams are still passing static design files back and forth, and most Figma files are already out of date by the time they reach engineering. Gui Seiz (designer) and Alex Kern (engineer) from Figma walk through the exact workflow their team uses to bridge that gap with AI, live onscreen. They demo how to pull a running web app directly into Figma using the Figma MCP, edit it collaboratively, and push it back to code. The old linear waterfall workflow is gone. What replaces it is a fluid, bidirectional loop where design and code inform each other in real time. *What you’ll learn:* 1. How to use Figma’s MCP to pull production code directly into Figma files 2. A workflow for pushing design changes from Figma back into your codebase using Claude Code without manual CSS adjustments 3. How to export multiple code states (like all five states of a signup flow) into Figma so designers can work with what actually exists in production 4. Why AI has shifted design work upstream to planning and downstream to craft, eliminating the rushed middle phase of execution 5. How to create custom skills that automate pre-flight checks, lint fixes, and CI monitoring before pushing code to production 6. How to structure your codebase so AI can write 90% of your code more effectively *Brought to you by:* Optimizely—Your AI agent orchestration platform for marketing and digital teams: https://www.optimizely.com/howIAI *In this episode, we cover:* (00:00) Introduction to Gui and Alex from Figma (02:56) How AI has transformed Figma’s internal workflows (05:17) The collapse of linear design-to-code workflows (07:28) Demo: Pulling production code into Figma using MCPs (10:49) Using Figma for precise design manipulation and team collaboration (14:10) Demo: Pushing Figma designs back into code with Claude Code (16:06) How AI has changed the role of software engineers (18:43) The shift to upstream planning and downstream craft (22:31) Demo: Exporting multiple code states back into Figma (25:23) Synchronous vs. asynchronous collaboration with AI (28:00) Eliminating design and engineering toil with AI (29:03) Demo: Custom skills for automating pre-flight checks (34:06) Code first or design first? (35:24) Using AI to learn and explore codebases *Detailed workflow walkthroughs from this episode:* • How Figma's Team Syncs Design and Code with Claude Code and Codex: https://www.chatprd.ai/how-i-ai/how-figma-team-syncs-design-and-code-with-claude-code-and-codex • Automate Your Pre-Merge PR Checklist with a Custom AI `/ship` Skill: https://www.chatprd.ai/how-i-ai/workflows/automate-your-pre-merge-pr-checklist-with-a-custom-ai-ship-skill • Automate Design Documentation by Exporting All Component States from Code to Figma: https://www.chatprd.ai/how-i-ai/workflows/automate-design-documentation-by-exporting-all-component-states-from-code-to-figma • Create a Bidirectional Sync Between Production Code and Figma Designs with AI: https://www.chatprd.ai/how-i-ai/workflows/create-a-bidirectional-sync-between-production-code-and-figma-designs-with-ai *Tools referenced:* • Figma: https://www.figma.com/ • From Claude Code to Figma: Turning production code into editable Figma designs: https://www.figma.com/blog/introducing-claude-code-to-figma/ • Codex: https://codex.ai/ • Claude Code: https://claude.ai/code • Buildkite: https://buildkite.com/ *Other references:* • Balsamiq: https://balsamiq.com/ *Where to find Gui Seiz:* X: https://x.com/guiseiz LinkedIn: https://www.linkedin.com/in/guiseiz/ *Where to find Alex Kern:* X: https://x.com/kernio LinkedIn: https://www.linkedin.com/in/alexanderskern/ *Where to find Claire Vo:* ChatPRD: https://www.chatprd.ai/ Website: https://clairevo.com/ LinkedIn: https://www.linkedin.com/in/clairevo/ X: https://x.com/clairevo _Production and marketing by https://penname.co/._ _For inquiries about sponsoring the podcast, email jordan@penname.co._

Gui SeizguestClaire VohostAlex Kernguest
Mar 10, 202640mWatch on YouTube ↗

At a glance

WHAT IT’S REALLY ABOUT

Figma teams use MCP to sync designs, code, and AI agents

  1. Figma’s Gui Seiz (design) and Alex Kern (engineering) demonstrate workflows where AI collapses the traditional linear “design then build” process into rapid, bidirectional iteration between code and Figma.
  2. Using the Figma MCP as a connector, they show how to import a live app/UI from a codebase into Figma for precise, collaborative editing, then export those design changes back into code automatically.
  3. They also demo the reverse: extracting missing UI states from code (e.g., signup flow variations) into Figma so designers can work from the true implemented product state rather than stale mockups.
  4. Finally, Alex shares how custom “skills” (prompt macros) like /ship automate repetitive engineering processes (tests, lint, CI monitoring, retries), reframing docs/SOPs into executable automation.

IDEAS WORTH REMEMBERING

5 ideas

AI makes code and design equally cheap to prototype.

Gui argues AI collapses the cost curve: instead of starting with low-fidelity wireframes because code is “expensive,” teams can jump straight to functional prototypes in either medium and iterate faster.

MCP enables high-accuracy design↔code translation, not screenshot guessing.

Rather than relying on vision models interpreting images, the workflow uses MCP-mediated, semi-structured design/code data exchange, improving fidelity when importing UIs into Figma and exporting changes back to the repo.

Importing production-like UI into Figma fixes the “stale file” problem.

They demonstrate pulling a locally hosted page into Figma so designers can start from what actually exists in code, avoiding outdated screenshots and misaligned artifacts.

Direct manipulation in Figma remains the fastest precision-edit interface.

Gui emphasizes that dragging, eyeballing color/spacing, and collaborative cursor-based editing beat long prompts for fine motor design changes (e.g., “slightly more cheerful yellow”).

Engineers can implement design changes without constantly referencing visuals.

Alex describes spending more time in terminal/Claude Code; once the design is linked via MCP, the agent can reconcile differences and apply patches to the codebase with less manual pixel-pushing.

WORDS WORTH SAVING

5 quotes

AI basically collapsed that, and it's just as cheap to riff in code as it is to riff in design.

— Gui Seiz

Send all five states of the sign-up flow to Figma.

— Alex Kern

This feels like pair programming for designers and engineers.

— Claire Vo

I often have two, three, up to five maybe Claude Code instances running all at the same time.

— Alex Kern

Momentum begets momentum.

— Gui Seiz

Design–code drift and “sources of truth”Figma MCP as structured connectorCodex → Figma import of existing UIFigma → Claude Code export to implement pixel-perfect changesCode → Figma extraction of missing UI statesSynchronous vs asynchronous collaboration in shared canvasesCustom skills as automation for repo workflows (/ship)

High quality AI-generated summary created from speaker-labeled transcript.

Get more out of YouTube videos.

High quality summaries for YouTube videos. Accurate transcripts to search & find moments. Powered by ChatGPT & Claude AI.

Add to Chrome