Figma's MCP server only works if you own the Figma file

By The WAALEE Team · · 5 min read

Figma's MCP server only works if you own the Figma file

Figma shipped its Dev Mode MCP server last year, and by now most AI coding tools know how to talk to it. Point Claude Code, Cursor, or Windsurf at a Figma file and the agent pulls real component structure, variable names, and token values instead of squinting at a screenshot. It's a genuine upgrade over the old copy-paste-a-hex-code workflow. It's also completely useless the moment you don't have the Figma file, and that happens more often than the demos let on.

What the MCP server actually fixes

The problem it solves is real. Before Dev Mode MCP, handing a design to an AI coding agent meant a screenshot, or a prose description, or a developer eyeballing spacing in the browser inspector and rounding to the nearest 8px. The MCP server exposes the file as structured data: layer tree, variable definitions, component variants, the actual token names your design team used. An agent reading that produces on-brand code instead of a plausible guess.

The catch nobody puts in the demo

The server only reaches files you already have permission to open. Figma's own docs are blunt about it: your client can't navigate to a URL and pull tokens on your behalf, it needs a node-id from a file you can view or edit, and if you're on a Starter plan or a view-only seat you're capped at a handful of tool calls a month. None of that is a bug. It's just a different problem than the one most people reach for an extractor to solve.

  • A competitor's site you want to benchmark against, with no Figma access, obviously.
  • An inspiration site you found in the wild that was never yours to open.
  • Your own client's old site, where the Figma file is gone, on someone's laptop, or never existed because it was built straight in code.
  • An agency handoff where you got a live URL and a login, not a design file.

Read the tokens off the page instead

None of those situations are actually blocked, they just need a different entry point. If you can't get structured tokens out of a design file, get them out of the rendered result of that design file instead: point a headless browser at the live URL and read the computed styles straight off the DOM, after fonts, CSS, and layout have all resolved. That's not a workaround in the hacky sense. It's working from the same source of truth Figma itself is ultimately rendering toward, just from the other end.

Done right, the output looks the same as what Dev Mode MCP hands you: a real color palette, a type scale, a spacing rhythm, and W3C DTCG-format tokens your AI builder can consume directly, no re-typing hex codes into a prompt.

Three ways to get tokens in, with or without the Figma file

Here's an honest comparison of where each approach actually fits:

  • Figma Dev Mode MCP: The best option when you own or have edit/view access to the file. Live, bidirectional, and it understands components and variants, not just visual style. Gated by seat type and, on lower plans, a monthly call cap.
  • designlang: Open-source CLI that points a headless browser at any URL and reads the DOM directly, no Figma account needed. Emits DTCG tokens plus a bundled MCP server for Claude Code and Cursor.
  • WAALEE: Paste any live URL in the browser, get colors, type, spacing, W3C tokens, and AI-ready prompts for Claude, Lovable, v0, Cursor, and Bolt back in seconds. No install, no Figma access, no seat to buy.

Use the one that matches what you actually have

If you're on your own team's file with edit access, Dev Mode MCP is the right default, it's closer to the design intent and it can write back to the canvas. If what you have is a URL, whether it's a competitor, an old client site, or a reference you admire, DOM-based extraction gets you to the same kind of token file without needing anyone's permission to open anything. Most teams end up using both: Figma MCP for the system they own, a live-URL extractor for everything they're studying but don't.

Latest from the blog