Figma’s blog post introduces a new workflow that closes the gap between coded user interfaces and visual design iteration. Traditionally, developers write code to build real UIs and then share static screenshots or links when they need design feedback. Figma’s update lets teams “capture” a working interface built in Claude Code—whether it’s running in production, staging, or on a local server—and import it directly into the Figma canvas as editable frames. Those aren’t flattened images; they become first-class design artifacts that teams can annotate, duplicate, revise, and explore visually.
The core idea behind this feature is to let designers, developers, and cross-functional teams work from the same concrete artifact instead of from screenshots or disparate tools. Claude Code first generates or iterates on an interface in code, and then with a simple capture-and-paste action, the interface lands inside Figma, where it can be rearranged, compared side by side with alternatives, or annotated for review. This approach shifts design discussions upstream, letting stakeholders react and iterate sooner without context loss.
Figma frames imported this way support multi-screen flows, preserving sequence and interaction context, which helps teams see the whole experience at once rather than treating screens in isolation. Once in Figma, the frames can be manipulated like any other design element: duplicating for variation, annotating for feedback, or combining with parts of existing design systems. This integration bridges the moment where code becomes tangible and where divergent design thinking matters most, not just what was built, but what’s worth building next.
The blog also notes that this workflow complements other Figma AI tools such as Figma Make, which turns prompts into prototypes, and highlights that moving between canvas and code, in either direction, is increasingly part of modern design practice.