How I AIHow Figma engineers sync designs with Claude Code and Codex
CHAPTERS
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.
- •The "which comes first" question is increasingly irrelevant—"it depends" on the work
- •Figma’s internal process is shifting alongside industry changes
- •The episode will demonstrate real workflows, not just theory
- •Design and code are treated as living artifacts that can sync both directions
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.
- •Traditional linear workflow (wireframe → hi-fi → code) is breaking down
- •Functional prototypes can be generated immediately, often starting in code
- •More exploration (divergence) becomes feasible because iteration is cheaper
- •Engineers and designers spend less time on mechanics, more on problem-solving and quality
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.
- •Figma artifacts are rarely perfectly up-to-date with production
- •Code often contains states/workflows missing from design files
- •Screenshot-based "design sync" approaches go stale quickly
- •A shared substrate is needed to keep design and code aligned
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.
- •Using MCP/skills to translate a running/local UI into Figma
- •Design is imported as editable elements, not just screenshots
- •Figma becomes the multiplayer canvas for broad collaboration
- •Great for teams where designers aren’t fully IDE-native (yet)
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).
- •Prompting exact visual tweaks can be slow and imprecise
- •Visual editing enables rapid iteration on layout, spacing, and color
- •Humans excel at subjective evaluation (e.g., “more cheerful yellow”)
- •Figma remains a high-bandwidth interface for craft decisions
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.
- •Engineer workflow: take a Figma URL and apply changes in code
- •Structured/semantic translation via MCP improves reliability vs. pure vision
- •Reconciliation happens against the local codebase, not a blank project
- •Outcome: pixel-matched UI updates without manual CSS spelunking
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.
- •Less context switching between browser and editor for certain changes
- •Multiple concurrent agent sessions to parallelize tasks
- •AI is used for exploration, codebase Q&A, and spec/doc generation
- •Engineering time shifts away from rote work toward coordination and judgment
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.
- •Common reality: codebase leads, design file lags (especially edge states)
- •Agent interprets “five states” by inspecting code, not manual enumeration
- •States are imported as editable Figma artifacts arranged for review
- •Enables designers to work from real implemented behavior
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.
- •MCP enables rapid back-and-forth without heavy handoffs
- •Async work scales globally, but sync sessions unlock creative momentum
- •Shared-space collaboration (seeing cursors) still feels uniquely powerful
- •Teams can alternate between divergence (jam) and convergence (deep work)
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.
- •Design toil: copying, consistency checks, endless “final_final” versions
- •AI can remove rote work for both designers and engineers
- •More engaged teams when effort is spent on meaningful problems
- •Better outcomes when polish and iteration become cheaper
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.
- •Skills = reusable, invocation-based automation embedded in workflow
- •/ship runs lint/tests/build steps and repository-specific guardrails
- •Automates CI babysitting: monitors checks and reacts to failures
- •Includes safety policies (avoid force-push, prevent credential leakage)
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.
- •SOPs/docs can be converted into skills for consistent execution
- •Reduces reliance on people remembering best practices under pressure
- •Scales institutional knowledge across teams via tooling
- •Makes compliance and quality checks the path of least resistance
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.
- •Gui: design-first; Alex: code-first—no universal ordering
- •AI as an upskilling tool: Gui learning shaders via natural language
- •AI as a codebase historian: Alex uncovers naming origins via git history
- •Prompting tactics range from gentle coaching to adding urgency (“my boss is mad”)
