Button renders flawlessly. Icon crisp, label bold, padding spot-on. Then I check the code.
Hex. Everywhere. #6750A4, #whatever. No tokens. My AI agent—fed screenshots, descriptions, even direct Figma access via MCP—just guessed.
I’ve chased this ghost for weeks. Twenty years covering Valley hype, and here I am, wrestling Figma’s API like it’s 2012 all over again.
Why the Hell Do AI Agents Ignore Figma’s Design Tokens?
Figma’s no dummy. Clean separation: node structure in one endpoint, variables in another. /files/{key}/nodes for the layout. /files/{key}/variables for tokens. Smart architecture, right? Keeps things modular.
But for AI agents? Disaster. They grab the JSON first pass, snag those hex values baked into nodes, and call it a day. No cross-referencing. MCP—Figma’s multiplayer canvas protocol or whatever they’re calling it now—gives read access. Doesn’t teach context.
“Figma’s API separates node structure from variable definitions intentionally. Both reside in separate files.”
That’s the original poster’s pain point, nailed. Theory meets reality: agents prioritize speed over fidelity. They’ve got deadlines, not design system PhDs.
And Figma? Crickets. They’re too busy with their $20 billion valuation, chasing Adobe’s throne. But who’s paying? Devs gluing together half-baked exports.
Look, this echoes Sketch’s downfall a decade back. Remember? Plugins galore, but token sync? Nightmare. Teams bolted on tools like Tokens Studio just to survive. Figma swore they’d do better. Now AI’s here, and it’s déjà vu.
My bold call: Without API fusion—smarter endpoints merging nodes and vars—Figma risks an AI exodus. Devs will flock to whatever tool (Framer? Penpot?) bakes tokens natively. Who’s making money? Not the plugin hustlers. Figma’s enterprise sales team, sure. But indie devs? Screwed.
Does MCP Fix Design Token Hell? Spoiler: Nope
MCP sounds fancy. Direct file reads, collaborative vibes. I tried it. Agent sees the canvas. Parses layers. Still spits hex.
Here’s why. Access ≠ understanding. Agent’s like a tourist with a map—sees the colors, not the system. Tokens live isolated. Node refs? Buried or absent.
Trail of errors: Screenshots? Vague. Descriptions? Noisy. Full file dumps? Overwhelm. AI hallucinates fidelity.
One sentence fix? Nah. But a pattern emerged.
The Structured Spec Hack That Cracked It
What worked: A dead-simple spec file. Per-component breakdown.
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
Pair that with Tailwind v4’s @theme block. Injects names before hex tempts the agent.
@theme { –color-background-primary: #6750A4; –spacing-button-py: 10px; –spacing-button-px: 16px; –radius-button: 20px; }
Manually? Soul-crushing. So the poster built a Figma plugin. Exports spec + theme auto. Boom—design-dev gap bridged.
Cynical me says: Why invent wheels when Figma could ship this? Plugin economy thrives on their oversights. Devs pay for fixes Figma should own.
I’ve seen this movie. Style dictionaries in 2015. Atomic design buzz. Same cycle: Tools lag, hackers hack, VCs fund the next shiny thing.
Unique twist—prediction: Open-source this plugin, watch it explode. Tailwind + Figma devs are legion. Could force Figma’s hand on API merges. Or get acquired. Valley classic.
But short-term? Roll your own. Test obsessively. Agents lie.
Who’s Really Winning from Figma’s Token Split?
Not you. Not the agent builders hyping ‘autonomous UI gen.’ Figma’s API guardians, maybe—keeps the moat high. Plugin makers? Absolutely. Tokens Studio, Zeroheight, now this spec exporter.
Valley math: Pain = profit. Every hardcoded hex is a plugin sale. Every MCP fail? Upsell to enterprise consulting.
Skeptical vet take: Ditch blind faith in AI. Spec files aren’t sexy, but they work. Until Figma wakes up.
🧬 Related Insights
- Read more: Sweden’s $137M Revolt: Ditching iPads for Pencils in Every Classroom
- Read more: 79% of Requests to Your Site Aren’t Humans – Raw Logs Don’t Lie
Frequently Asked Questions
What causes AI agents to hardcode Figma design tokens as hex? Figma’s API splits node data and variables into separate endpoints—agents grab hex from nodes first, ignoring token refs.
Does Figma MCP solve design token issues with AI? No—MCP provides file access but no smarts to link nodes to variables; agents still default to raw hex values.
How do I make AI agents use Figma tokens properly? Create a structured spec file per component + Tailwind @theme block; automate with a Figma plugin for scale.
