Figma Code to Canvas: What the Demo Didn’t Show You

Figma and Anthropic's Code to Canvas integration lets you send a live browser UI to Figma as editable layers via Claude Code and MCP. The workflow involves installing Figma's MCP server, generating a UI with Claude Code, and typing 'Send this to Figma' — the result is a Figma frame with real layers, auto-layout, and editable text. Testing revealed key limitations: scroll-triggered animations cause missing sections (Claude can patch this by forcing all sections visible), CSS gradient text doesn't translate, and fixed sidebars render at viewport height rather than full content height. The integration also works in reverse — paste a Figma link into Claude Code to generate code from a design. The official MCP server is read-only, so direct Figma manipulation isn't possible. Best use cases are dashboards, settings pages, and admin panels that render fully without scroll interactions.