← back
Building the Engine While Flying the Plane: Launching the Figma MCP Server — Jesse Lumarie, Figma
Takeaway
Design-to-code integrations need structured visual context, real component reuse, and repeatable evaluation.
Summary
- Figma built its first MCP server in roughly three months while transport specifications and client feature support were changing.
- A React/Tailwind representation of Figma’s scene graph, supplemented by screenshots, gave agents useful design context.
- Embedding base64 images consumed excessive context, so images were exposed separately instead.
- Code Connect replaces verbose visual implementations with references to customers’ established components, preserving accessibility and internationalization.
- Evaluation evolved from manual spreadsheet grading into a web workflow with automated runs and LLM judges.
figmadesign-to-codecode-connect
Original description
Figma did not have 20% projects. Jesse Lumarie gave one to the MCP server anyway, one day a week, because he had seen an internal demo and wanted non designers to be able to pull from Figma. That side project became the company's first MCP server in about three months, and then one of the fastest growing products Figma has ever shipped. The build happened while the ground moved. Weeks in, a new version of the spec deprecated the transport they had chosen, and client support was so uneven that a compatibility matrix was a real artifact they maintained. The interesting decisions are about representation. Figma's canvas is a scene graph in C++, close to the HTML DOM, and they had three ways to hand it to a model. They picked React and Tailwind on a hunch that models had seen the most of it, and the output is pixel perfect. Passing images inline as base64 blew up the context window and got cut. Pixel perfect turned out to be only half the problem, because an enterprise does not want a beautiful generated button, it wants its own accessible internationalized one, so Code Connect sends a pointer to the real component instead of markup. Two hours grading an eval by hand in a spreadsheet convinced them never to do that again, and evals now run hundreds of times a week behind LLM judges. Speaker info: https://x.com/jesselumarie / jesselumarie Timestamps: 0:00 - A 20% project at a company without 20% projects 2:02 - Uneven client support, and a spec that moved 2:55 - What the local server gave developers 3:52 - Three ways to represent a scene graph 4:47 - Why images alone did not work 5:40 - Grading evals by hand, once 7:32 - Code Connect, and why pixel perfect is not enough 9:24 - Elicitation and sampling, and hacking around them 13:55 - Shipping local first, then remote 15:43 - How early all of this still is