AI อะไรเนี่ย

Tools

Claude Code to Figma: Turn production code into editable Figma designs

Claude Code to Figma: Turn production code into editable Figma designs

Figma just made it easier to bring Claude Code workflows straight into the design canvas. You can capture a real, functioning UI from a browser—whether it’s production, staging, or localhost—and convert it into editable frames in Figma. No more screenshots or “run it locally” handoffs: code and canvas finally talk to each other.

What it does

Claude Code to Figma lets developers, designers, and hobbyists capture pages, states, and full flows from a live app, then paste them into any Figma file. Each capture becomes a Figma frame you can organize, duplicate, refine, and share. You can even capture multiple screens in one session so the full flow stays in context. The idea: code is great for converging (one build, one path, one state); the canvas is great for diverging (see the whole experience, compare options, shape direction together). This bridge helps teams move between both without losing momentum.

Why it matters

  • See the whole system at once — Side-by-side comparisons on the canvas make patterns, gaps, and inconsistencies easier to spot, especially in multi-step flows.
  • Explore variations without re-implementing — Duplicate frames, rearrange steps, and test structural changes without rewriting code just to try an idea.
  • Decide earlier, together — Designers, engineers, and PMs can react to the same artifact at the same fidelity. Shared view = questions surface while decisions are still easy to shape.
  • Roundtrip back to code — Pair this with the Figma MCP server: bring a Figma frame back into your coding environment with a prompt and a link, so design-informed code generation stays in the loop.

Whether you start with a prompt in Figma Make or with code in Claude Code, the goal is the same: get to something tangible, then take it further. Claude Code to Figma applies that same “copy to canvas” idea to code-first workflows—different starting points, same outcome.

How to try it

Use Claude Code to capture a screen, then send or copy it to your clipboard and paste into any Figma file. For setup and supported clients, see the Figma MCP server guide and developer docs for MCP tools like Claude Code to Figma.

Try it: Introducing Claude Code to Figma — read the full post and start capturing from your next Claude Code session into Figma.