The Model Context Protocol is barely two years old, and Figma turned it into one of its fastest-growing products ever by refusing to wait for the spec to stabilize. Jesse Lumarie, the software engineer who led the company’s MCP server effort, describes the development arc as “building the engine while flying the plane” — a phrase that captures the chaos of shipping a product against a protocol that changed under their feet. Speaking on the AI Engineer podcast, Lumarie walked through the technical dead ends, the eval automation journey, and the architectural bets that turned an unofficial side project into a flagship enterprise offering.

The starting point was almost whimsical. Lumarie and a small group inside Figma — self-dubbed “the MC Peeps” — began building on a one-day-a-week basis, a de facto 20% project with no formal mandate. Their conviction was simple: even if they couldn’t predict which spec features would survive, the product would be powerful regardless. “We didn’t know exactly what the MCP server spec would be supported, but we knew that it would be extremely powerful and a great product for us to utilize,” Lumarie said.

The Spec Was a Moving Target — and Clients Were Worse

The MCP spec, released by Anthropic in November 2024, spent its first year in constant flux. For months, only Anthropic’s own ecosystem used it. Cursor, OpenAI, and VS Code had no support at all. When Figma’s team finally got access to the feature in Cursor, they could prototype a real product — but only for a narrow slice of the market.

Then the spec itself shifted. Within weeks of the team starting work, a new spec version deprecated the server-events transport they had planned to use. Client support remained fragmented through 2025: Claude had early support and Claude Desktop followed, but Claude Code lacked the full feature set. OpenAI and VS Code only added support after the spec update. VS Code didn’t reach general availability until July 2025 — and even then, many clients implemented only a subset of features, with tools being the most widely supported piece. VS Code eventually emerged as what Lumarie calls the “golden client” for full spec coverage.

The takeaway for anyone building on MCP today is blunt. “If there’s one thing you want to take away from this talk it’s that we’re so early,” Lumarie said. “The MCP spec is only two years old and we’re still figuring out the best way to do things.”

Why Figma Bet on React Tailwind — and an Image

The core technical problem was representing Figma’s scene graph — a C++-backed canvas of connected nodes, analogous to the HTML DOM — to an AI agent. The team had three candidate representations:

Representation Description Verdict
Internal scene-graph format Abstract, sparse, akin to JSX/XML Rejected: lacked rigorous fidelity
D2R (React Tailwind) Existing converter from Figma’s Sites product; produces pixel-perfect HTML Chosen as primary serialization
Plain image Screenshot of the node Rejected as sole context: 2025-era agents were poor at converting images to code
See also  The Only Investing Video You’ll Ever Need (Start With $100)

The D2R output was pixel-perfect — Lumarie invites listeners to file a bug if they find otherwise — and the team suspected models would handle it well since they were already trained heavily on React and Tailwind patterns. But the winning combination was code plus image. The image alone failed at code conversion; pairing it with the code context produced measurably better agentic output.

One early mistake nearly sank the approach: passing base64 image data inline in the code blew up the context window and was abandoned. The final approach abstracted images out of the scene graph and listed them at the top level, with an image of the current node passed alongside the serialized code.

From Two-Hour Excel Grading to LLM Judges

The eval journey is a cautionary tale about manual testing at AI-product velocity. Initial evals mixed quantitative checks — Did it use variables? Did it use the expected theming? Did it use the right spot? — with qualitative judgment about whether the output looked good and made sound decisions with incomplete information.

The first iteration involved two hours of hand-grading into an Excel spreadsheet. Lumarie describes the process as so painful the team vowed never to repeat it. They built a web app to streamline grading and eventually automated the loop with LLM judges. The structural challenge: open-source code with attached Figma files is rare, so the team had to create their own test fixtures or build automated systems to generate them.

The result is a system that now runs hundreds of times per week, and engineers can kick it off to grade prompt changes without human review. Lumarie’s advice is distilled to a single line: “Don’t do eval by hand if you can help it.”

The Missing Link: Enterprise Component Libraries

Pixel-perfect React Tailwind output was only half the story. Enterprises don’t want pixel-perfect code if it bypasses their battle-tested, accessible, internationalized component libraries. “An enterprise doesn’t care if it’s pixel perfect if it’s not using its battle tested accessible and internationalized components,” Lumarie noted.

Figma’s existing Code Connect feature — which links design components to components in a user’s codebase — became the bridge. The MCP server needed to invoke Code Connect so agents would use the correct production components. The benefit was twofold: correctness (a primary button in the codebase would be referenced rather than recreated, preserving accessibility and i18n properties) and context efficiency (a large block of React Tailwind code collapses into a small pointer like “use Button component”).

See also  Nvidia mesmerizes markets: is it too early to doubt the AI bull market?

A verbose React Tailwind representation becomes a sparse component reference, letting the agent pull in the real component. This is the difference between generating code that looks right and generating code that can actually ship.

Hacking Around Missing Spec Features

Two MCP spec features the team wanted — elicitation (asking the user a question and passing the answer back to the server) and sampling (having the server query the client’s LLM) — were either unimplemented in clients or deprecated. Sampling was deprecated outright, and even where VS Code supported it, the query went to a general agent rather than one that was codebase-aware.

The team hacked around both using tools. When the server detected a design component that wasn’t code-connected, it sent a prompt asking the user if they wanted to map the unlinked component — mimicking elicitation. If the user said yes, a second prompt had the agent scan the codebase for potential matches — mimicking sampling. The agent returned matches in a specified format, and the server created code connections in bulk.

The team also added optional query arguments to tool calls — for example, “get design context” asks users what language and framework they’re using. It’s an imperfect signal. “This is imperfect, agents lie, but it was at least a signal for us to understand like oh this type of user this felt user may not have had a good experience,” Lumarie admitted. But it helped the team detect whether the React Tailwind translation layer was failing for certain codebases.

Throughout the build, Lumarie leaned on the MCP Inspector, an open-source tool he recommends without reservation. “If you haven’t used it and you’re developing an MCP server, you’re doing yourself a disservice,” he said. “It’s a really great tool and it’s open source.”

Local First, Remote Second: The Architecture Bet

The team’s launch priorities were: ship quickly, maintain the highest security bar, respect file permissions, and avoid pricing-abuse vectors. When the spec introduced OAuth in March 2025, the team faced a choice: build the remote server immediately or stay local. They punted on remote until a later spec revision provided an OAuth spec to build against.

The local architecture leveraged Figma’s Electron desktop app: the front end runs figma.com, an IPC bridge connects to a Node process that accesses the user’s file system, and a server-events server in Node lets clients talk directly locally. This architecture was the fastest path to users and had strong enterprise appeal — data never left the machine.

The internal launch received what Lumarie diplomatically calls “extremely honest” reception. Community feedback turned positive. The remote server launched in September 2025, both servers were generally available in October 2025, and read/write capabilities followed.