How I AIHow Figma engineers sync designs with Claude Code and Codex
CHAPTERS
- 0:00 – 2:51
Prototyping energy returns: designers and engineers riffing together
Gui and Claire set the tone: AI is bringing back high-momentum prototyping “spikes” where teams iterate together quickly. They frame the episode as a new, shared workflow where design and code become fluid and collaborative rather than sequential handoffs.
- •Momentum comes from teams riffing together in the same shared space
- •AI enables faster experimentation and tighter design–engineering feedback loops
- •The episode will explore bi-directional flows between code and Figma using MCP connectors
- 2:51 – 4:04
Meet the guests + why the “design first vs code first” debate no longer fits
Claire introduces Alex (engineer) and Gui (designer) from Figma and sets up the central tension: which comes first, design or code? The guests immediately push toward a more contextual answer and promise demos in both directions.
- •Guests represent both sides: engineering and design at Figma
- •The show’s premise: designs aren’t static artifacts in Figma or code anymore
- •The episode will demonstrate workflows that go code → design → code (and back)
- 4:04 – 7:03
AI transforms internal Figma workflows by collapsing the cost of iteration
Gui explains how AI disrupts the traditional linear, fidelity-increasing design-to-code process. Because it’s now cheap to prototype in code and design, the team constantly re-invents workflows based on the task and scope.
- •Traditional linear workflow (wireframes → high fidelity → build) is breaking down
- •AI makes it nearly as cheap to riff in code as in design
- •Teams dynamically choose process depending on feature scale, bug vs product work
- •AI increases exploration capacity: go wide (diverge) and still go deep (craft)
- 7:03 – 7:53
From mechanistic work to problem-solving: how engineering time shifts
Alex describes how AI reduces tedious syntax and plumbing work, freeing engineers to focus on higher-level problem solving. Claire connects this to historical scarcity in design and engineering resources and how AI changes cost structures.
- •Less time on mechanical coding; more time on problem-solving
- •Lower cost of generating high-quality outputs enables more iteration and polish
- •Engineering and design both benefit from shifting effort to higher-leverage decisions
- 7:53 – 10:57
Demo setup: sources of truth drift between production code and Figma
Gui sets up the common real-world issue: the design file and the production code diverge, leaving teams without a reliable shared source of truth. The demo uses Codex connected to Figma via MCP to pull a real UI into Figma for editing.
- •Design files often lag behind production; production contains untracked states
- •Goal: import an existing app page from code into Figma accurately
- •Codex + Figma MCP/skills act as the bridge between code and design artifacts
- 10:57 – 13:05
Demo: Pulling a production page into Figma via MCP for precise editing
They execute the import: a locally running web app page is brought into Figma as editable objects rather than screenshots. Gui highlights the value of direct manipulation and multiplayer collaboration that’s hard to replicate in terminal-first AI workflows.
- •MCP imports the ‘budget allocation’ page into Figma as editable layers/frames
- •Figma enables high-precision changes (dragging, aligning, color picking) faster than prompts
- •Multiplayer collaboration lets the whole team iterate in parallel
- •This acts as a bridge for designers not yet comfortable working directly in IDEs
- 13:05 – 15:12
Why Figma still matters: fine-motor control, visual judgment, and team collaboration
Gui and Claire argue that despite advances in code-based prompting, design tools still excel at precision and human taste. The chapter emphasizes that humans remain essential for nuanced visual decisions and rapid tactile iteration.
- •Direct manipulation beats long prompts for small, precise changes
- •Humans excel at fine visual judgment (“is that yellow happy?”)
- •Figma’s collaborative canvas accelerates exploration and shared understanding
- 15:12 – 16:58
Demo: Pushing updated Figma designs back into the codebase with Claude Code
Alex takes the updated Figma component and uses Claude Code with the Figma MCP to translate the design changes back into production code. The agent reconciles differences and applies a patch so the running app matches the updated Figma design.
- •Engineer copies a Figma link and asks Claude Code to apply component changes
- •MCP supports structured translation from Figma design data → code changes
- •Agent identifies diffs, reconciles with the repo, and applies patches automatically
- •Result: app updates to match Figma without manual pixel-perfect implementation
- 16:58 – 19:11
How AI changes engineering work: terminal-centric, multi-agent parallelism
Alex explains he now spends much more time in the terminal, often running multiple Claude Code instances at once. These agents handle reconciliation, exploration, Q&A about the codebase, and drafting specs/docs—shifting the engineer’s role toward orchestration and reasoning.
- •Terminal becomes the main workspace; less need to constantly check the browser
- •Multiple AI sessions run in parallel for different tasks
- •AI helps with codebase exploration, answering questions, and writing specs/docs
- •Emphasis moves from execution to coordination and decision-making
- 19:11 – 22:55
Upstream planning and downstream craft: a ‘decadent’ era of abundance
Gui describes work moving upstream into planning and exploration, because building is faster and cheaper. With AI, more ideas make it above the cut line, and teams can invest more in craft and polish after deciding what to build.
- •More time for planning/riffing before committing to implementation
- •Faster build cycles allow higher ambition and more polished craft
- •The question becomes ‘what should we build?’ more than ‘can we afford to build it?’
- 22:55 – 25:46
Demo: Codebase-first design—importing multiple UI states from code into Figma
Alex shows the reverse direction: when the codebase has workflows that aren’t represented in Figma, an agent can extract multiple states and lay them out in a Figma file. This gives designers an editable, comprehensive baseline for iteration without manually recreating every edge case.
- •Problem: code contains states/flows missing from design files
- •Command: import ‘all five states of the signup flow’ into Figma
- •Agent reads the codebase and generates Figma frames for each state side-by-side
- •Designers can now iterate on real states, not screenshots or incomplete specs
- 25:46 – 29:24
Synchronous vs asynchronous collaboration: why shared canvases still win
Alex favors asynchronous work by default, but both he and Gui emphasize the unique value of real-time, shared-space collaboration. Gui notes that AI has re-enabled high-energy synchronous jams that avoid slow version handoffs and “USB stick” style workflows.
- •Async is efficient, but real-time collaboration creates unique momentum
- •Shared spaces enable parallel freestyle work while maintaining context
- •AI reduces handoff friction and brings back rapid prototyping sessions
- •Teams can ‘jam’ synchronously, then converge asynchronously for depth
- 29:24 – 34:07
Eliminating engineering (and design) toil with custom skills: the /ship automation
Alex explains how he writes (or has AI write) custom ‘skills’—prompt macros that automate repetitive workflows. He demonstrates a /ship skill that runs pre-flight checks, pushes code, monitors CI, and can auto-fix minor issues, turning best-practice docs into executable automation.
- •Skills function like reusable macros embedded into daily workflow
- •/ship automates tests, linting, build commands, pushing, and CI monitoring
- •Uses dev boxes and a personal config repo to bootstrap consistent tooling
- •Safety/guardrails: avoid force-push, prevent credential leaks, bounded retries/timeouts
- 34:07 – 40:21
Wrap-up: code-first vs design-first answers, learning with AI, and prompting tricks
Claire summarizes the bi-directional workflow and closes with lightning-round questions. Gui chooses design-first, Alex chooses code-first; both highlight AI as a learning engine (shaders, codebase lore), and they share humorous prompting strategies for stuck models.
- •Recap: designs and code can continuously sync via MCPs + skills
- •Lightning round: Gui = design first; Alex = code first
- •AI as an upskilling tool: learning shaders, exploring repo history and ‘lore’
- •Prompting tactics: urgency/frustration cues vs gentle ‘parenting’ encouragement
