Claude Code to Figma
Claude Code to Figma
Claude Code to Figma lets you capture web pages, states, and flows built in Claude Code and bring them directly onto the Figma canvas as editable frames.
What runs in your browser — whether from localhost, staging, or production — can now become a starting point for exploration in Figma. Once captured, each screen is fully editable. You can reorganize layouts, compare alternatives side by side, annotate decisions, and refine direction before moving forward.
This helps you:
- Explore multiple approaches without rewriting code
- Compare flows and states in one place
- Share work for feedback without requiring a local setup
- Move from implementation to exploration — and back again
Ideas already move from canvas to production through the Figma MCP server. With Claude Code to Figma, that path is now two-way.
You can learn more about using this feature in our developer docs