"Claude Code can now write directly to the Figma canvas through Figma MCP. You describe an interface in natural language; it builds it. Visually, the result can be pixel-perfect. But click into any layer and you'll find #5C6AC4 where color/brand/primary should be, 14 where text/body-sm is defined, a freshly minted one-off component where an existing Button instance is sitting right there in the library."
"The problem isn't capability. It knows how to call the Figma API, how to query a library, how to bind a variable. It just doesn't know that in your project, it must. Nobody told it the rules, so it made up its own. Figma has its own governance system: variables, styles, component libraries, naming conventions. But Claude Code operates entirely outside that system."
"Every color value is isolated. Every component is improvised. Every modification requires re-locating everything from scratch. It passes visual QA. It fails structural QA. The question is straightforward: How do you make Claude Code work within design system governance, instead of freestyling, in Figma?"
Claude Code can write directly to the Figma canvas and generate pixel-perfect interfaces from natural-language descriptions. Layer inspection reveals that colors, typography, and components are often created as one-off values rather than using existing design system definitions. The issue is not model capability to call the Figma API or bind variables, but missing governance rules that specify how outputs must align with project standards. Figma already provides governance through variables, styles, component libraries, and naming conventions, but Claude Code operates outside that system. The result is visual correctness with structural failures, including isolated color values, improvised components, and costly rework when modifications require relocating elements.
Read at Medium
Unable to calculate read time
Collection
[
|
...
]