By playing, you agree to uListen's Terms and Privacy Policy and YouTube's Terms of Service.

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 SeizguestClaire VohostAlex Kernguest

Mar 11, 202640mWatch on YouTube ↗

Summaries, chapters, transcripts, and FAQs on this page are made by uListen, not YouTube.

WHAT IT’S REALLY ABOUT

Figma teams use MCP to sync designs, code, and AI agents

Figma’s Gui Seiz (design) and Alex Kern (engineering) demonstrate workflows where AI collapses the traditional linear “design then build” process into rapid, bidirectional iteration between code and Figma.
Using the Figma MCP as a connector, they show how to import a live app/UI from a codebase into Figma for precise, collaborative editing, then export those design changes back into code automatically.
They also demo the reverse: extracting missing UI states from code (e.g., signup flow variations) into Figma so designers can work from the true implemented product state rather than stale mockups.
Finally, Alex shares how custom “skills” (prompt macros) like /ship automate repetitive engineering processes (tests, lint, CI monitoring, retries), reframing docs/SOPs into executable automation.

IDEAS WORTH REMEMBERING

5 ideas

AI makes code and design equally cheap to prototype.

Gui argues AI collapses the cost curve: instead of starting with low-fidelity wireframes because code is “expensive,” teams can jump straight to functional prototypes in either medium and iterate faster.

MCP enables high-accuracy design↔code translation, not screenshot guessing.

Rather than relying on vision models interpreting images, the workflow uses MCP-mediated, semi-structured design/code data exchange, improving fidelity when importing UIs into Figma and exporting changes back to the repo.

Importing production-like UI into Figma fixes the “stale file” problem.

They demonstrate pulling a locally hosted page into Figma so designers can start from what actually exists in code, avoiding outdated screenshots and misaligned artifacts.

Direct manipulation in Figma remains the fastest precision-edit interface.

Gui emphasizes that dragging, eyeballing color/spacing, and collaborative cursor-based editing beat long prompts for fine motor design changes (e.g., “slightly more cheerful yellow”).

Engineers can implement design changes without constantly referencing visuals.

Alex describes spending more time in terminal/Claude Code; once the design is linked via MCP, the agent can reconcile differences and apply patches to the codebase with less manual pixel-pushing.

WORDS WORTH SAVING

5 quotes

AI basically collapsed that, and it's just as cheap to riff in code as it is to riff in design.

— Gui Seiz

Send all five states of the sign-up flow to Figma.

— Alex Kern

This feels like pair programming for designers and engineers.

— Claire Vo

I often have two, three, up to five maybe Claude Code instances running all at the same time.

— Alex Kern

Momentum begets momentum.

— Gui Seiz

Read the available transcript

Design–code drift and “sources of truth”Figma MCP as structured connectorCodex → Figma import of existing UIFigma → Claude Code export to implement pixel-perfect changesCode → Figma extraction of missing UI statesSynchronous vs asynchronous collaboration in shared canvasesCustom skills as automation for repo workflows (/ship)

High quality AI-generated summary created from speaker-labeled transcript.

Get more out of YouTube videos.

Read along on your phone, search it beside the video, or ask your favorite AI app what was said.