How 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._

GSGui SeizguestCVClaire VohostAKAlex Kernguest

Mar 11, 2026·40m·Watch on YouTube ↗

📖 CHAPTERS

1. 1

   Why design vs. code is no longer a linear workflow

   Claire sets up the classic "design first or code first" debate, and Alex and Gui immediately reframe it as context-dependent. They preview a new back-and-forth loop where designs and code continuously inform each other instead of following a strict handoff process.

2. 2

   AI collapses the cost of prototyping (and reshapes team roles)

   Gui explains how AI makes it almost as cheap to explore in code as it is to explore in design, breaking the old fidelity ladder from wireframes to high-fidelity mocks. Claire and Alex discuss how this reduces mechanical work and increases time spent on higher-leverage problem solving and craft.

3. 3

   The core problem: design and production drift apart

   Gui frames a common pain: Figma files fall behind the codebase, while production diverges from design intent. The team positions MCP as a practical connector to reconcile these parallel sources of truth.

4. 4

   Codex → Figma: Import a real page from a codebase into a Figma frame

   Gui demonstrates asking Codex (with Figma MCP/skills available) to send a locally hosted “budget allocation” page into Figma. The result is an editable Figma representation of the UI, enabling immediate direct manipulation and team collaboration.

5. 5

   Why direct manipulation still matters (precision beats prompting)

   Gui and Claire argue that even with strong coding tools, precise visual iteration is faster with drag-and-drop and visual controls. They highlight human-in-the-loop strengths like fine motor adjustments and taste judgments (e.g., color mood).

6. 6

   Figma → Claude Code: Turn updated designs back into code automatically

   Alex copies the Figma link and uses Claude Code with the Figma MCP to pull design changes into the repository. The agent converts the Figma state into code and reconciles it with the existing codebase, applying the patch so the app matches the updated design.

7. 7

   How engineering work changes: terminal-centric, parallel AI sessions

   Alex describes spending more time in the terminal and less time juggling browser/design references for mechanical UI updates. He runs multiple Claude Code instances simultaneously to parallelize different workstreams like design reconciliation, exploration, and documentation.

8. 8

   Code → Figma: Generate missing design states from the codebase

   Alex shows the reverse direction: when code has more states than the design file, he can instruct the agent to send all signup-flow states into Figma. The agent reads the codebase, identifies the relevant states, and imports them side-by-side for designers to iterate on.

9. 9

   A new collaboration model: asynchronous by default, sync spikes for momentum

   Claire likens the workflow to pair programming between design and engineering. Alex favors asynchronous work for throughput, while both note the unique creative energy of synchronous “jam sessions” in shared canvases like Figma.

10. 10

    Reducing design toil alongside engineering toil

    Claire calls out that designers also face repetitive “versioning” and consistency labor, not just engineers. The group frames AI + MCP as a way to eliminate low-leverage busywork and focus talent on higher-level decisions and craft.

11. 11

    Skills as the new SOP: Alex’s custom /ship automation

    Alex explains how he writes (or has AI write) reusable “skills” that function like macros for recurring workflows. He demos a /ship skill that runs preflight checks, pushes changes, monitors CI (Buildkite/GitHub), and even applies minor fixes automatically within safety constraints.

12. 12

    Turn onboarding docs into executable skills

    Claire generalizes the lesson: the “things to do before opening a PR” wiki pages in most orgs can be converted into skills for consistent enforcement. Alex agrees that this shifts best practices from optional memory to default automation.

13. 13

    Lightning round: design-first vs code-first, learning, and prompting tactics

    They close with quick takes: Gui picks design-first, Alex picks code-first—validating the need for bi-directional sync. They share how AI helps them learn (shaders, codebase lore) and reveal their (very human) prompting tricks when agents get stuck.