From Claude Code to Figma: Turning production code into editable Figma designs

This article introduces a workflow that captures live browser UIs built with Claude Code and converts them into editable Figma frames.

• •Claude Code to Figma lets developers capture production, staging, or localhost interfaces directly onto the Figma canvas as editable frames
• •Captured screens can be copied to clipboard and pasted into any Figma file, enabling teams to annotate, duplicate, and explore variations without code changes
• •Multiple screens can be captured in a single session to preserve flow sequence and context
• •The Figma MCP server enables a roundtrip workflow, bringing Figma frames back into coding environments via prompt and link
• •This mirrors Figma Make's prompt-to-prototype capability, applying the same canvas-based exploration to code-first workflows