Code to Canvas (React to Figma) is DOM capture, not intelligent translation — 60% fidelity¶
Insight: According to Josh Cusick, sending a live React app to Figma via "Code to Canvas" achieved only about 60% accuracy — text wrapping was incorrect, grid structure was absent, and shadows rendered inconsistently. The feature is DOM capture, not intelligent translation: modern frontends obscure semantic meaning through hashed class names and compiled CSS-in-JS, leaving no system-level context for Figma to map components back to design tokens or libraries.
Detail: Cusick built a New York Times clone with React, TypeScript, and Material UI using Claude Code, then instructed Claude to "send the main page to Figma." The DOM serialization converted class names into layer names (e.g., "MuiButtonBase-root" became "MuiButtonBaseRoot"). The core confusion: "If I'm a designer, why wouldn't I just design it in Figma first? If I'm a developer, why do I need it back in Figma?" The practical value may be shortening feedback loops — developers sending live implementations to designers for review, making "design reviews the real implementation, not a mock."
Sources
Related: code-to-design-vs-system-parity (this batch) — COMPLEMENTS