Skip to main content

Why does reading a Figma file still feel like archaeology in 2026?!

  • April 3, 2026
  • 4 replies
  • 113 views

Karthikeyan Sridhar

Senior engineer, 6 years in. I can read a codebase faster than I can read a Figma file.

Every Design - Dev handoff is a different puzzle and you're the one solving it on the clock. Here's what's started bothering me more recently — it's not just a me problem anymore.

My AI agent can't read Figma either.

I've been using Claude for few months. It's fast, it's good, and it's completely blind to design intent. I paste in a component description and it hallucinates spacing. I give it a screenshot and it gets the layout roughly right but the tokens wrong. There's no file format that bridges "what the designer built" and "what the agent needs to implement it."

What I actually want when I pick up a ticket:

— A file that tells me the flex direction, gap, padding, and alignment of every layer. Not a screenshot. A structured file.

— Token names, not hex values. color/background/primary not #6750A4. My codebase uses tokens. My agent should use tokens.

— A u/theme{} block for Tailwind v4 I can drop straight into my stylesheet.

— Something my MCP-connected agent can consume directly and start building from. We're talking about vibe coding entire features now — felt why is design-to-code still a manual copy-paste exercise?

I looked around for solution, but couldn't find one robust solution that could meet my needs & that's where me and my brother built a figma plugin called FigSpecs.

Yes it took a month for us to build it, but now it saves most of my time.

But genuinely, Is this a tooling problem? A process problem? A culture problem between design and engineering?

Or have we just collectively decided this friction is acceptable?

Curious how other teams are handling this in 2026 — especially those running AI-assisted workflows. Has anything actually changed for you at handoff, or is Figma still a black box your agents can't touch?

4 replies

kollu amrutha

Hey Karthikeyan, I felt this post. I've been dealing with the same frustration.

I was in the exact situation you described. AI agents would get the layout close but hallucinate spacing, miss token names, and approximate border radius values. Pasting screenshots into Claude gave me "almost right" components that still needed manual fixing every single time.

So I tried a different approach. Instead of having AI interpret what a design looks like, I built a tool that reads the Figma node data directly through the API. Exact padding, exact colors, exact typography. No screenshots involved. The AI model only sees pre-resolved values, not visuals.

I also added a verification script that runs on every PR and compares the component against the live Figma file. If anything has drifted, the PR doesn't merge.

We ended up shipping more than 60 components with 3,077 tests in 35 days this way. I wrote up the full approach if you're curious: https://dev.to/akollu72/how-we-shipped-60-design-system-components-in-5-weeks-using-figma-as-the-single-source-of-truth-1lkc

To your question, I think it's 100% a tooling problem. The structured data is already sitting in the Figma file. We just need tools that read it instead of looking at it.

Would love to hear how FigSpecs is working out for you!


Sean_Hoenderdos

This design-to-code gap is exactly what I am trying to understand. I am a UX/UI designer and full-stack developer. When teams use AI to turn design intent into frontend code, would it be useful to have a reviewer that flags UX/design-system drift in the PR and gives a concrete fix prompt? Or would that duplicate what designers already catch manually?


kollu amrutha

Sean, that's exactly what I built. The verify-figma script runs on every pull request and does precisely what you're describing. It fetches the live Figma data, compares it against the component source, and flags specific discrepancies: wrong typography variant, drifted spacing, incorrect border radius, raw hex values that should be tokens.
When it catches something, it tells you exactly what drifted, what the Figma file says the value should be, and where in the code the problem is. The PR doesn't merge until it's resolved.
To answer your question: it doesn't replace what designers catch. My designer still reviewed every component visually in Storybook via Chromatic. But she was reviewing for design intent, hierarchy, and feel, also to check the efficiency of the pipeline that I built. The script handled the mechanical checks like exact token values, spacing, and border radius. That split meant the designer's time went toward judgment calls, not pixel counting. And the script keeps catching drift long after the initial review, on every future PR, when nobody is manually checking anymore.


Arfan
  • New Member
  • June 2, 2026

Hey Karthikeyan, I felt this post. I've been dealing with the same frustration.

I was in the exact situation you described. AI agents would get the layout close but hallucinate spacing, miss token names, and approximate border radius values. Pasting screenshots into Claude gave me "almost right" components that still needed manual fixing every single time.

So I tried a different approach. Instead of having AI interpret what a design looks like, I built a tool that reads the Figma node data directly through the API. Exact padding, exact colors, exact typography. No screenshots involved. The AI model only sees pre-resolved values, not visuals.

I also added a verification script that runs on every PR and compares the component against the live Figma file. If anything has drifted, the PR doesn't merge.

We ended up shipping more than 60 components with 3,077 tests in 35 days this way. I wrote up the full approach if you're curious: https://dev.to/akollu72/how-we-shipped-60-design-system-components-in-5-weeks-using-figma-as-the-single-source-of-truth-1lkc

To your question, I think it's 100% a tooling problem. The structured data is already sitting in the Figma file. We just need tools that read it instead of looking at it.

Would love to hear how FigSpecs is working out for you!