Code to Canvas with Claude Code — Figma talk

What the video covers

Figma’s official demonstration of the Code to Canvas workflow, showing how Claude Code connects to Figma through MCP to turn production code into editable Figma design files. The demo covers the reverse of the typical design-to-code pipeline: starting from a running application, extracting its component structure, and importing it into Figma where designers can edit and refine the interface.

Who it’s for

Design engineers and product designers working in teams where the codebase has evolved past what the Figma files reflect. This workflow is particularly relevant for teams with legacy applications where no accurate Figma source of truth exists, or for teams where engineering ships faster than design can keep Figma files updated.

Key takeaways

The code-to-design direction solves a real synchronization problem. Most teams experience design file drift: code evolves through bug fixes, engineering decisions, and A/B tests, while Figma files stay frozen at the last major design update. This workflow pulls the current state of production back into Figma.
MCP is the connection layer. The Figma MCP server allows Claude Code to read from and write to Figma files programmatically. This is not a screenshot-based import — it understands component structure, layers, and properties.
Designers can edit live code state in Figma. Once production code is imported into Figma, designers can make modifications using familiar Figma tools, then push those changes back to the codebase. The round-trip eliminates the need for designers to learn code editors or for engineers to interpret design files.
The workflow depends on codebase structure. Projects with clear component boundaries and consistent naming produce better imports. Projects with deeply nested or inconsistently structured code require more manual cleanup after import.

Worth watching if…

You want to understand Figma’s official MCP integration with Claude Code and evaluate whether it can close the gap between your production code and your Figma design files.