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.
Code to 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, but needs cleanup. The important thing is the layer tree reflects the actual DOM, so edits are meaningful rather than destructive.
Figma to design system doc
With the page now in Figma, I asked Claude to generate a design system one-pager covering tokens for colors, spacing, typography, and components only. Then I had it 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.
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 into 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 instead of 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.