How Figma's Team Syncs Design and Code with Claude Code and Codex

The old design handoff assumed a one-way trip: an idea became a Figma file, the Figma file became code, and production slowly drifted away from the original design. Figma designer Gui Seiz and engineer Alex Kern are replacing that handoff with a loop.

In this episode of How I AI, they move a live interface from code into Figma, edit it collaboratively, bring the changes back into Claude Code, and export five code-only product states for designers to work on. Then Alex shows the skill that handles his pre-merge checklist.

Their argument is practical: code and design no longer need to be competing sources of truth. They can be different working surfaces connected by agents and the Figma MCP server.

AI collapsed the old fidelity ladder

Product teams used to increase fidelity in stages because code was expensive. Sketches and grayscale wireframes made it possible to debate an idea before engineering time was committed. AI has made functional prototypes cheap enough to enter the conversation much earlier.

Gui treats many vibe-coded outputs as functional wireframes: malleable things the team can touch, test, and replace. The right path now depends on the scale of the problem. A bug, a feature, and a new product may each move through code and design in a different order.

That flexibility creates more exploration capacity. The team can test several ideas instead of spending days de-risking one concept in meetings. Engineers spend less time threading values through call sites; designers spend less time documenting every state by hand. More time can go to the problem and the craft.

Move the current product into Figma

Gui begins with a locally running financial-tracking app whose implementation has become more current than its design file. That is normal: production contains changes, edge cases, and polish that never made it back to Figma.

send the budget allocation page to Figma

With the Figma MCP server connected to Codex, he asks:

The agent reads the local page and imports it as an editable Figma frame. This is more useful than dropping in a screenshot. The result can be selected, moved, recolored, and rearranged with the same direct-manipulation tools designers already use.

Direct manipulation is the important human interface. A designer can move an object with one gesture instead of describing its position in a hundred words. Nobody should have to prompt for the precise shade of a cheerful yellow when a color picker makes the choice immediate.

The Figma file also becomes a multiplayer surface. Several teammates can explore the imported interface together, point at alternatives, and see each other work. A coding agent session is powerful, but it is not yet a replacement for a shared canvas full of live cursors.

The code-to-Figma synchronization workflow details the setup and the full round trip. The key is to start from a locally running state the agent can inspect, then confirm the imported frame before treating it as the basis for a new design.

Bring the chosen design back into code

After Gui edits the budget-allocation page, Alex copies the URL of the chosen Figma component into Claude Code and asks:

Claude uses the same MCP connection in the other direction. It reads the design data, compares it with the repository, and applies the relevant changes to the existing codebase. This is not a vision model guessing from a PNG. The agent is translating structured design information into the structure of the application.

Alex still checks the result, but much of the mechanical work has disappeared. He does not need to inspect every spacing value and manually reproduce it in CSS. The implementation in the episode comes back looking like the selected Figma variant.

bring the changes from this component, into my code base. And which component is it? It's the...budget allocations page.

That changes how he spends engineering time. Alex often has two to five Claude Code sessions running on separate tasks: reconciling a design, investigating the codebase, or grounding a technical specification in the repository. His attention moves toward problem solving and coordination instead of syntax changes.

Export the product states that design never captured

The loop also solves the opposite drift problem. Sometimes code contains flows and states that do not exist in the design file at all. Alex demonstrates with a signup flow that has five implemented states.

Instead of recreating each one for his design partner, he tells the agent:

The agent reads the repository, identifies the five states, and imports them one by one into the same Figma file. The designer receives a side-by-side inventory of the real product behavior, including states that might otherwise require running the application and triggering a very specific error.

The multi-state design-documentation workflow turns that demo into a repeatable audit. Name the exact component or flow, enumerate the expected states, and check that every imported frame is editable and correctly labeled.

This removes a familiar kind of design toil: final-final files, hand-built state matrices, stale screenshots, and painstaking documentation of hover, error, and success conditions. The codebase already knows those states. The agent can expose them where a designer can work.

send all five states of the signup flow to Figma

Use skills for the process everyone forgets

Alex closes with a workflow outside Figma: a custom slash-ship skill. He thinks of skills as large macros, reusable prompts that can be invoked at a consistent point in the development loop.

Shipping into Figma's large repository involves preflight work: inspect the commit, run lint, identify the correct Bazel build commands, push the branch, monitor GitHub pull-request checks, and read Buildkite results. Manually babysitting that sequence created enough friction that Alex encoded it.

The skill runs the checks, pushes the work, waits for CI, and can fix minor issues such as lint failures. It retries up to five times with a one-hour timeout. Guardrails explicitly prohibit force-pushing and committing credentials. When Alex reaches a state he believes is ready, he runs slash ship and walks away.

The AI pre-merge checklist workflow shows how to convert a team's existing repository checklist into an executable skill. Start with the real commands and failure modes from your own environment; generic instructions are not enough for a large codebase.

I point out that nearly every engineering organization has a wiki page titled some version of what to do before opening a pull request. Those pages depend on memory and good intentions. A shared skill can put the process directly inside the workflow and make the default behavior more consistent.

The source of truth is the connected loop

Figma does not become a perfect mirror of production, and the repository does not become a replacement for visual collaboration. The useful unit is the connection between them: export the state you have, manipulate it in the surface best suited to the decision, then bring the chosen result back.

That loop supports both asynchronous and synchronous work. An engineer can export states and send a link across time zones. A team can also jump into the same file and riff together while momentum is high. When exploration has done its job, they can converge and return to deeper individual work.

Gui calls this a decadent moment for product development. Faster building can move design upstream into the question of what should exist, while also leaving more time downstream for craft. Small fixes and ambitious polish no longer have to fall below the cut line simply because the mechanics are expensive.

Three practical rules for the new handoff

First, choose the working surface based on the decision. Use code for behavior and functional exploration. Use Figma for precise visual manipulation and multiplayer collaboration. Use an agent to carry structured context between them.

Second, verify every transfer. Confirm that the imported Figma frame represents the running product, that the chosen design maps onto the correct component, and that all requested states arrived. A connection reduces copying; it does not remove the need to inspect the result.

Third, encode recurring process separately from creative work. A ship skill should know repository commands, CI systems, retry limits, and forbidden operations. The design loop should remain flexible enough for the team to explore.

The future is not design first or code first. Gui still chooses design and Alex still chooses code. What has changed is that neither choice traps the work. The artifact can move, become editable, gather another discipline's judgment, and come back.