The question: does the new Claude Code + Figma MCP integration support a real bidirectional workflow, or is it mostly a one-way screenshot dump?
Setup. The MCP server (figma-remote-mcp) is configured in Claude Code. On first use it injects a capture.js script into your HTML. From there you hand Claude a Figma file URL and a local page path, and it handles the rest.
Direction 1: code → Figma. I sent /evalkit/index.html — a fully coded marketing page — to an existing Figma file. It came in as live-rendered structure, not a flat screenshot. Auto layout was partially applied: some sections were clean, others were nested in frames that didn't need to exist. Usable, not pristine. The important thing is the layer tree reflects the actual DOM, so edits are meaningful rather than destructive.
Direction 2: Figma → design system doc. With the page now in Figma, I asked Claude to generate a design system one-pager — tokens for colors, spacing, typography, and components only. Then: split the doc to cover the app designs and the marketing site separately. It ran for five and a half minutes and produced a structured page breaking out both contexts.
Direction 3: back to Figma. The capture toolbar (left in place by the script) let me send the generated design system page back into Figma without re-running the full command. That closed the loop.
What this is and isn't. The three-step sequence — coded UI → Figma → documented design system → back to Figma — works. It's rough. Auto layout needs cleanup. The design system output is a first draft, not a finalized spec. But the scaffolding is there in minutes, not hours, which changes what's worth doing manually.
The more interesting question is what the loop enables over multiple iterations: refine in code, push to Figma, update the doc, pull back in. That's what I haven't tested yet.