"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. After generation, layers may contain raw color values and text styles that should instead reference existing design system definitions. Components can be newly improvised rather than reusing library instances. Because Claude Code operates outside Figma governance, every color value can be isolated, components can be improvised, and modifications can require re-locating related elements from scratch. Visual QA may pass, but structural QA fails because the output does not follow design system rules. The goal is to make Claude Code comply with Figma governance by enforcing rules for variables, styles, and component libraries.
Read at Medium
Unable to calculate read time
Collection
[
|
...
]