How Figma Engineers Sync Designs with Claude Code and Codex

Why It Matters

The real‑time sync cuts development cycles and reduces errors caused by outdated design specs, giving product teams faster time‑to‑market. It also showcases AI’s role in unifying design and engineering, a competitive advantage for tech companies.

Key Takeaways

• Figma MCP pulls live production code into design files.
• Claude Code pushes design edits back to code automatically.
• Bidirectional sync eliminates linear design‑to‑code handoff.
• AI custom skills automate linting, CI checks before merge.
• Export all component states for accurate design documentation.

Pulse Analysis

Design and development teams have long struggled with stale design handoffs, where static Figma files arrive after code has already moved forward. By leveraging Figma’s Machine Code Pull (MCP), engineers can now ingest a live web application directly into the design canvas, preserving exact layout, spacing, and CSS values. This live import eliminates the need for manual recreation of components and ensures that designers are always working against the current production state. The approach aligns with the broader industry shift toward AI‑augmented tooling that bridges visual and code assets.

The counterpart of the workflow is Claude Code, an AI model that translates design edits made in Figma back into clean, production‑ready code. With a single push, changes such as color swaps, component resizing, or interaction tweaks are reflected in the repository, bypassing manual CSS adjustments. Integrated custom skills further automate pre‑merge linting, CI validation, and PR checklist enforcement, turning what used to be a multi‑step review into a seamless, automated gate. Teams can also export all component states—such as the five steps of a signup flow—directly into Figma, keeping documentation in sync with reality.

The implications extend beyond faster iteration. A bidirectional, AI‑driven loop reduces technical debt, cuts the risk of design‑code mismatches, and frees engineers to focus on higher‑order problems rather than repetitive UI tweaks. Companies that adopt this model gain a competitive edge by shortening time‑to‑market and improving product quality. As AI agents become more capable, we can expect the design‑first versus code‑first debate to dissolve, with real‑time collaboration becoming the new standard for digital product development.

Original Description

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 [e-mail]._