My Role
Designed and built the workflow that takes a finished frame to the repo.
Figma Designs to Claude Code
A finished frame goes in as a link, and the same screen comes back in the codebase, built from components the team already has.
Who’s Involved
A designer sends a finished frame, Claude writes the screen into the repo, and a developer picks it up from there to build the functionality.
How a Frame Moves
The link leaves Figma, MCP reads the frame, and Claude writes the screen into the repo, where a developer picks it up and builds the functionality.
Before & After
Playlist / Driving Playlist
Search
Playlist / Driving Playlist
24
- Thinking
- figma · get_design_context
node 12:4 · Driving Playlist
- Read
Card.tsx, Heading.tsx, Icon.tsx, Button.tsx
- Write
src/screens/Playlist.tsx
- Claude
Wrote Playlist.tsx. Opening the preview.
- Bash
git add src/screens/Playlist.tsx
- Bash
git commit -m "Add the Driving Playlist screen"
- Bash
git push
localhost:3000
+
</> Accept edits
Opus 4.6 1M
portfolio
Local
From the Panel to the Link
Before
By hand
A developer read the layers in Dev Mode and rebuilt the screen from what was on the panel.
Now
The link
The frame link is the brief, and the screen comes back in the repo as the starting point the developer builds the functionality on.
Best Practice
- Finish the frame first The components, auto layout, names, and variables need to be in place, because a loose frame comes back loose.
- Send one frame Send a link to that one frame, rather than the whole file.
- Use the repo’s components Code Connect points Claude at the button the team already ships.
- Check, then send back Look at the screen next to the frame, and say what is off.
What Claude Reads
- Layout It picks up auto layout, spacing, and what sits inside what.
- Variables Color, type, radius, and spacing come through by name.
- Components It uses the ones already in the repo, mapped with Code Connect.
- Picture A shot of the frame is there, so the screen can be checked against it.
- Notes They cover what the picture can’t show, such as a click, a wait, or a rule.