{ "video": { "id": "ZIYYsAzaLlA", "title": "Building the Engine While Flying the Plane: Launching the Figma MCP Server — Jesse Lumarie, Figma", "duration": 1006, "upload_date": null, "channel": "AI Engineer", "source": "AI Engineer" }, "analysis": { "video_id": "ZIYYsAzaLlA", "title": "Building the Engine While Flying the Plane: Launching the Figma MCP Server — Jesse Lumarie, Figma", "one_liner": "Figma engineer Jesse Lumarie recounts building Figma's first MCP server in ~3 months on a spec that kept changing under them — why they serialized the C++ scene graph as React + Tailwind rather than XML or images, how Code Connect collapses generated code into a pointer to your real component, and how they faked elicitation and sampling with plain tool calls because no client had implemented them.", "summary": "Lumarie traces the Figma MCP server from a self-started 20%-time Figma plug-in prototype to a GA product, built while the MCP spec itself was in flux — a new spec version deprecated the server-sent-events transport they'd architected around, and client support was so uneven that the March 2025 compatibility matrix showed most clients implementing only tools. The technical core is representation: they picked a React + Tailwind serialization of Figma's scene graph (the same 'D2R' machinery behind Figma Sites) over an internal JSX/XML form or a plain image, betting models were RL'd on that kind of code, then layered Code Connect on top so the agent gets a sparse pointer to the enterprise's real accessible, internationalized component instead of pixel-perfect-but-useless markup. Where the spec had features clients hadn't shipped — server instructions, elicitation, sampling — they emulated them inside tool responses and descriptions. They shipped local-first (Electron IPC to a Node process) as the fastest path to product-market fit, launched the remote server in September and GA'd both in October 2025, ending up one of Figma's fastest-growing products.", "key_points": [ "Timeline: Anthropic released the MCP spec in November 2024, when OpenAI, Cursor and VS Code had no support; Figma launched the local server ~mid-2025, the remote server in September, and GA'd both in October 2025 — it became one of Figma's fastest-growing products ever, which the team did not expect.", "The spec moved under them: a new version deprecated server-sent events, the transport their initial architecture was built on; Claude Desktop had early support while Claude Code lagged, and VS Code — 'truly like the golden client' for eventually covering the whole spec — didn't reach GA until July. In many clients only tools were supported.", "Three candidate serializations of Figma's C++ scene graph (a connected node graph 'not unlike the HTML DOM'): an internal JSX/XML-ish form that was 'abstract and sparse' but low-fidelity; 'D2R', the React + Tailwind representation already built for Figma Sites; and a plain image. They chose React + Tailwind on the hunch models were RL'd on that code shape. Paste today's MCP output into a simple HTTP server and it should be pixel perfect — 'if it's not, file a bug.'", "Images: agents in early 2025 were bad at image-to-HTML/CSS, so the image is supplementary context, not the source — but code context plus the image produced better agentic output than either alone. Their first attempt passed base64 image data inline into the code, which blew up the context window; images are now abstracted out of the scene graph and hoisted to the top level.", "Pixel-perfect is only half the story: 'an enterprise doesn't care if it's pixel perfect if it's not using its battle tested accessible and internationalized components.' Code Connect links design components to codebase components, so instead of a large block of React/Tailwind the server sends back what is effectively a pointer — a small component that says use the button component — improving fidelity and cutting context.", "Evals started as two hours of hand-grading into an Excel spreadsheet ('we're never doing that again'), mixing quantitative checks (did it use variables? the expected theming? the right spot?) with qualitative ones (does it look good? did it make good decisions with incomplete information?). They built a web app for grading and now run an eval hundreds of times a week with LLM judges that engineers kick off against prompt changes. A specific data problem: plenty of open-source code exists, but almost none of it has .fig files attached, so they had to create their own repos or automate.", "Emulating missing spec features: server instructions were in the spec but implemented by no client and barely documented until an Anthropic blog post, so they stuffed instructions into every tool call to teach the LLM how to use the server. They wanted elicitation (ask the user a question, return the answer to the server) combined with sampling (server queries the client's LLM — now deprecated) to offer to map a user's codebase for Code Connect. Clients didn't implement them, and even VS Code's sampling could only query a general agent, not one with codebase context.", "The workaround: when the server sees a component that isn't code-connected, it returns a prompt asking the user whether to map it (mimicking elicitation); on yes, another prompt has the agent scan the code for matches in a specified format and send them back in bulk (mimicking sampling) to create many code connections at once. He also plugs the open-source MCP Inspector — 'if you haven't used it and you're developing an MCP server, you're doing yourself a disservice.'", "They added optional query arguments to tool calls like get_design_context so agents report the user's language and framework — 'imperfect, agents lie,' but enough signal to tell whether a bad experience traces back to the React/Tailwind translation layer not fitting that codebase.", "Local-first architecture and why: after OAuth landed in the March 2025 spec they punted on remote, because until then there was no auth spec to build from. The Figma desktop app is Electron running figma.com, with an IPC bridge to a Node process that reaches the user's file system and exposes a local server-events server clients talk to directly. Enterprises liked that data went nowhere, and it was the fastest path to users, product-market fit and real use cases. Their four beta goals were: launch quickly, highest possible security bar, respect file permissions, and respect pricing/packaging so there were no abuse vectors.", "Internal launch reception was 'extremely honest'; they worked out the kinks, got positive community feedback, and started on the remote server immediately after launching the local one." ], "takeaways": [ "Choose the serialization your models already know. Figma bet on React + Tailwind over their own abstract XML-ish format because models are RL'd on that code, and validated it with evals rather than taste.", "Don't ship pixel-perfect generated markup to enterprises — give the agent a pointer to their existing component. Code Connect mappings both raise fidelity (accessibility, i18n come free) and shrink the context you send.", "Never hand-grade evals twice. Build tooling and LLM judges early, mix quantitative checks (variables, theming, spacing) with qualitative ones, and expect to manufacture your own eval corpus when paired data (code + .fig files) doesn't exist in the open.", "Never inline base64 images into generated code — hoist them out of the representation and reference them at the top level; pass a screenshot alongside code context rather than instead of it.", "Treat missing client support as an implementation detail, not a blocker: emulate server instructions inside tool descriptions and elicitation/sampling with sequenced tool prompts, and add optional tool arguments (language, framework) to get user signal the protocol won't give you.", "Ship local before remote when auth is unsettled — it was Figma's fastest path to product-market fit and it was the answer enterprises wanted on data residency anyway." ], "topics": [ "mcp", "agents", "design-to-code", "evals", "developer-tools", "context-engineering", "protocol-design", "product-launch" ], "tools": [ "Figma", "Figma MCP server", "Model Context Protocol (MCP)", "Anthropic", "Claude Desktop", "Claude Code", "Cursor", "VS Code", "OpenAI", "MCP Inspector", "React", "Tailwind", "Figma Dev Mode", "Figma Code Connect", "Figma Sites", "FigJam", "Figma Make", "Make in your local codebase", "Electron", "Node", "Excel", "GitHub" ], "quotes": [ { "text": "An enterprise doesn't care if it's pixel perfect if it's not using its like battle tested accessible and internationalized components.", "at": "07:10", "url": "https://www.youtube.com/watch?v=ZIYYsAzaLlA&t=430s" }, { "text": "We spent like two hours grading an eval into an Excel spreadsheet. And we said, we're never we're never doing that again. It was awful. Don't do eval by hand if you can help it.", "at": "06:06", "url": "https://www.youtube.com/watch?v=ZIYYsAzaLlA&t=366s" }, { "text": "Our first attempt was just passing B 64 data into the code and that was just a terrible idea. It it just blew up the context window and was bad all around. um don't do that.", "at": "05:15", "url": "https://www.youtube.com/watch?v=ZIYYsAzaLlA&t=315s" }, { "text": "If there's one thing you want to take away from this talk it's that we're so early like this has not been a long time. The MC MCP spec is only two years old and we're still figuring out the best way to do things.", "at": "15:51", "url": "https://www.youtube.com/watch?v=ZIYYsAzaLlA&t=951s" } ], "words": 3822 }, "summary_url": "/#ZIYYsAzaLlA", "transcript": { "html": "/transcripts/ZIYYsAzaLlA.html", "txt": "/transcripts/ZIYYsAzaLlA.txt", "vtt": "/transcripts/ZIYYsAzaLlA.vtt" } }