I tried everything.

Sharing design as screenshots, descriptions, MCP connections so the agent reads Figma directly.

Same result every time. Tokens hardcoded as hex values.
Visually everything looked good, but tokens completely sat outside the design system!

After a lot of trail and error, I found that token names and color values lived in two different places in Figma's data.

Reason:
Figma's API separates node structure from variable definitions intentionally. Both reside in separate files. Node data from /files/{key}/nodes, variable data from /files/{key}/variables. Clean architecture in theory. Painful in practice for anyone building on top of it, which ended up in hardcoded value referenced by agent in first look via .JSON.

MCP gave agent access to the file. Not understanding of the design.

*What actually worked: A structured spec file.
*

Button  91×40px
└─ Content (flex row) · justify-center · gap 8px · p 10px 16px
   ├─ Icon  20×20px · token: color/icon/on-primary
   └─ Label 14px SemiBold · token: color/text/on-primary

Tokens: color/background/primary, color/text/on-primary

*along with Tailwind v4 u/theme{} block that injects token name before agent reads hexcode in .JSON file.
*

@theme {
  --color-background-primary:  #6750A4;
  --spacing-button-py:         10px;
  --spacing-button-px:         16px;
  --radius-button:             20px;
}

Practically to generate this manually would take more time, that's were I built a figma plugin that could generate both these files per component which helped me to solve this design - development gap.

Q: Curious to learn, is there anyone else hitting this with MCP workflows? How are you handling token fidelity?

figma #webdev #tailwindcss #AI