Key Takeaways
- Anthropic released the MCP spec in November 2024; Lumarie said OpenAI, Cursor and VS Code did not support it yet, and VS Code only reached GA in July.
- Figma ships React plus Tailwind rather than its raw C++ scene graph, on the hunch that models were already trained on that code — and the output is meant to be pixel perfect.
- The first eval was two hours of hand-grading in Excel; today an automated eval with LLM judges runs hundreds of times a week.
- Figma launched local first, then a remote server in September, GA'ing both in October 2025.
Figma built its first MCP server in about three months, and it started as an unofficial side project. Jesse Lumarie, a software engineer at Figma for roughly three years, told the AI Engineer audience he began prototyping a plugin-based MCP server one day a week — “kind of my 20% project that we didn’t really have 20% projects, but I really wanted to work on it, so I did.” The server hit general availability in October 2025 and, by his account, became part of one of the fastest growing products Figma has ever had — an outcome the team did not expect.
Building against a spec nobody had finished implementing
The timing was the hard part. Anthropic published the MCP spec in November 2024, and Lumarie said everyone in AI started experimenting — but almost nobody had shipped client support. Once his team got access to the feature in Cursor, they could ideate against something real.
Then the ground moved. “A few weeks later, after we started getting our initial architecture sorted, a new version of the spec dropped,” he said, deprecating the transport they had planned to use: server-sent events. Clients were adding features at wildly different paces. Claude Desktop had early support; Claude Code, he said, “wasn’t really supported with all the complete set of features.” OpenAI and VS Code had nothing until that spec update, and VS Code did not reach GA until July — and even then, in many cases only tools were implemented.
VS Code eventually got there: “truly like the golden client,” in his words. But “it was hard to kind of understand what you were building towards because clients supported so many different things.” The team shipped anyway, convinced the protocol would be powerful regardless of which subset survived. Weighing that same bet? Our breakdown of MCP versus plain CLI access for agents covers it from the consumer side.
Why Figma sends React and Tailwind, not its own scene graph
Figma’s canvas is a scene graph in C++ — “a graph of connected nodes, not unlike the HTML DOM,” as Lumarie put it. That left three candidate serializations. The first was an internal representation close to JSX and XML; he called it “abstract and sparse,” but said it “didn’t have super rigorous fidelity.” The second was what Figma internally calls D2R — a React and Tailwind representation that already existed because Figma Sites needed a way to turn the scene graph into HTML. The third was a plain image.
They bet on React and Tailwind, and the reasoning was about the models, not the format: “lots of the models were sort of RL’d on this React Tailwind type of code.” The fidelity claim is unusually falsifiable. Paste the Figma MCP output into a simple HTTP server, Lumarie said, and “it should be pixel perfect. And if it’s not, file a bug.”
Images mattered, but only as a supplement. In early 2025, he said, agents “weren’t great at converting images directly to HTML or CSS” — yet “having the code context plus the image actually had better agentic output.” One approach they abandoned outright: stuffing base64 image data into the code. “That was just a terrible idea. It just blew up the context window and was bad all around. Don’t do that.” Images are now hoisted out of the scene graph to the top level.
Pixel-perfect was only half the problem
Here is the line that reframes the whole project: “An enterprise doesn’t care if it’s pixel perfect if it’s not using its battle tested, accessible and internationalized components.”
A perfect Tailwind rendering of a button is, in a large codebase, wrong twice over. It doesn’t reference the primary button you already ship — losing its accessibility and internationalization properties — and it burns context describing something your repo already has.
Code Connect, Figma’s feature for linking design components to codebase components, became the fix. When the MCP server recognizes a code-connected component, it stops shipping the full markup and passes back what Lumarie called “effectively a pointer” — collapsing a large block of React and Tailwind into a small component that says: use the button component.
The eval that started in a spreadsheet and ended in a web app
Checking those claims started out brutally manual. They mixed quantitative signals — did the output use variables, the expected theming, the right spot — with qualitative ones: does it look good, and did it “make good decisions with incomplete information?”
Then they graded it by hand. “We spent like two hours grading an eval into an Excel spreadsheet, and we said, we’re never doing that again. It was awful.” His advice was blunt: “Don’t do eval by hand if you can help it.”
There was also a data problem specific to design: open-source code is abundant, but open-source code that ships with matching .fig files is not, so the team had to build toy repos or automate the pairing. They eventually coded a web app for grading, and today the eval runs “hundreds of times a week,” with engineers kicking it off against prompt changes and LLM judges replacing humans wherever possible. Our practical guide to evals for teams walks through the same progression.
Faking elicitation and sampling with ordinary tools
Two spec features the team badly wanted were elicitation — asking the user a question and passing the answer back to the server — and sampling, which lets a server query the client’s LLM. Lumarie noted sampling is “unfortunately deprecated, but it’s fine because you’re able to work around it.”
The workflow they imagined: ask permission to map the user’s codebase for code connections, then let the model find the matches. Most clients hadn’t implemented either feature, and where sampling did work — VS Code — “you could only really query it as a general agent, not specific to the codebase.”
So they simulated both with tools. When the server returns context for a component that isn’t code connected, it sends down a prompt asking whether the user wants to map it — mimicking elicitation. If the user agrees, a second prompt asks the agent to scan the code for matches — mimicking sampling. Results come back in a specified format and get committed in bulk.
Server instructions had a similar story: the field was in the spec, but Lumarie said no clients implemented it, and it wasn’t highlighted in the docs until Anthropic published a blog post about it. Until then, the team appended usage instructions to every tool call. They also added optional query arguments to calls like get design context, asking what language and framework the user is on — a soft signal, and he said so: “This is imperfect — agents lie.”
One tooling plug: the MCP inspector. “If you haven’t used it and you’re developing an MCP server, you’re doing yourself a disservice.”
Why the first server was local
Before the beta, the team wanted four things: launch quickly, hold the highest possible bar for security, respect file permissions, and respect pricing and packaging so there were no abuse vectors.
When the spec added OAuth in March 2025, they had to choose between staying local and moving to a remote server over streamable HTTP. “We punted,” Lumarie said — before that there was no auth spec to build from, and they could relay auth from the web app to the desktop app instead. Figma’s desktop app is Electron running figma.com, with an IPC bridge to a Node process that reaches the file system; the team exposed a server-events server in Node so clients could talk to it locally. Enterprises liked that their data wasn’t going anywhere. Above all, “this architecture was our fastest path to getting something into the hands of users to understand product market fit.”
The internal launch was, in his words, “extremely honest” — a line that got a laugh. They worked out the kinks, shipped, and started on the remote server immediately. It launched in September, both servers GA’d in October 2025, and read and write capabilities followed. Teams sequencing their own rollout may recognize the pattern from our notes on adopting coding agents at work.
What happens next
Lumarie’s closing argument was that none of this is settled. “We’re so early,” he said. “The MCP spec is only two years old and we’re still figuring out the best way to do things.” The features his team wanted most were unimplemented, uneven across clients, or deprecated — and the workarounds they shipped are workarounds, not architecture.
His second takeaway was organizational. He wasn’t staffed on MCP, and he wasn’t staffed on Make in your local codebase either — Figma’s agent product for GitHub and local repos, which grew out of hacking at an offsite after the team saw research that designers wanted to write production code. Both got built because Figma gave engineers leeway to run with things.
Quick poll
Which mattered more for Figma's MCP output quality?
Lumarie's framing: pixel-perfect output is "really only half the story" — enterprises need their own accessible, internationalized components.
FAQ
What is the Figma MCP server? It moves context between production code and design in both directions, Lumarie said, so AI tools don’t have to build a dedicated Figma integration. The local server lets a coding agent pull what a developer would normally get from Figma’s dev mode — component data, spacing, variables.
What is Code Connect and why does it matter for MCP? Code Connect links design components to components in your codebase. When the MCP server sees a code-connected component, it sends a pointer instead of a full markup dump — preserving accessibility and internationalization properties while using far less context.
When did the Figma MCP server become generally available? The local server came first, the remote server launched in September, and both GA’d in October 2025, per Lumarie’s talk. Read and write capabilities came after.
