Skip to content
Sign in

BlogTutorials

Figma and Claude Code: a round-trip design workflow

By Attuna · · 4 min read

A Figma to Claude Code workflow no longer has to be one-way. With Figma’s remote MCP server, Claude Code can read a frame’s structure and variables to build it, and with Figma’s Code to canvas feature it can capture the running result back into Figma as editable layers. That gives designers a loop: design in Figma, build in the real codebase, review the built screens in Figma alongside the originals, and decide what changes where. This guide walks through the loop and the decisions at each step.

Connecting the server is covered separately in how to use Figma MCP with Claude Code. This article assumes it’s set up.

Why a round trip

Design-to-code handoff assumes the design is finished when the code starts. In practice, building reveals things a frame can’t: real content lengths, responsive behaviour, states nobody drew. A round trip lets those discoveries flow back to where the design team works, instead of living only in the codebase.

Step 1: design with the build in mind

Figma’s guide to structuring files for better code recommends components for anything that repeats, variables for colour, spacing, radius and typography, descriptive layer names, auto layout, and annotations for behaviour a static frame can’t show. Do this for the frames you’re about to build. It’s the difference between the agent receiving your tokens and receiving pixel values.

Step 2: build section by section

Link a selection rather than a whole page. Figma advises generating code for smaller sections or individual components, because large selections can stall or truncate.

Prompt
Build the header section of this frame:
https://www.figma.com/design/<file>/<name>?node-id=<id>

Use our components in src/components/ui and map Figma variables to
the tokens in src/app/globals.css. List any variable without a
matching token instead of hard-coding it. Then do the same for the
next section when I confirm.

Step 3: fill in what the frame didn’t show

This is the step design-to-code tools skip. Before review, ask for the states and widths the design didn’t cover, using the product’s existing patterns:

Prompt
The frame shows the populated desktop state only. Add empty, loading
and error states using our existing patterns, and make the page work
from 360px wide. Render each state on a temporary route so I can
capture them for review.

Step 4: capture the build back into Figma

Figma’s Code to canvas lets an agent capture a running UI into Figma. Per the docs, it requires a supported MCP client connected to the remote Figma server, and Claude Code is on the supported list. The docs’ example prompt:

Prompt
Start a local server for my app and capture the UI in a new Figma file.

The agent starts the server, adds the script the capture needs and opens a browser; the first capture happens automatically, and a toolbar lets you capture more screens or a single element. Captures can go to a new file in your drafts, an existing Design file you can edit, or the clipboard.

Two limits worth knowing, both from Figma’s documentation:

  • Flat layers. Code to canvas captures the running UI “as flat layers, without a connection to your libraries”. If the target file has a library with variables, matching variables are bound automatically, so add the library before capturing.
  • Remote server only. The capture tools aren’t available on Figma’s desktop server, which can also shadow the remote tools. The docs suggest checking with claude mcp list and removing a figma-desktop entry if present.

Step 5: review in Figma

Put the captured screens beside the original frames and the new states. Review the way the team already reviews design: comments on specific layers, side-by-side comparison, a single place to see every state. Decide, for each difference, where it should be fixed:

  • The build was wrong: fix in code; the frame stays the source of truth.
  • The frame was incomplete: update the design, so the next build starts right.
  • The system is missing something: add a component or variable, in both places.

Step 6: close the loop in code

Bring the decisions back to Claude Code as specific changes, with the Figma comments or frames linked. Keep each round small. When a decision applies beyond this screen, write it into your project instructions so it isn’t rediscovered next time; see CLAUDE.md for UI design.

When not to round-trip

  • Small changes to existing UI. Review them in the browser; capturing adds overhead.
  • Teams that design in code. If the codebase is the source of truth, Figma becomes a review surface at most.
  • Pixel-perfect component work. Flat captures are for reviewing screens, not maintaining a library.

The broader question of where design tools and agents each belong is in AI design agents vs traditional design tools, and the full stage-by-stage process in the design engineering workflow.

The context Figma doesn’t hold

Figma describes specific screens precisely. It doesn’t hold the references, principles and preferences that should shape screens nobody has drawn yet. Attuna, in private beta, keeps those in a project your agent reads over MCP, so Claude Code can have both open at once: Figma for the frames, Attuna for the direction.

Sources