Architecture and Representation Strategies

Figma’s approach to the Model Context Protocol (MCP) focused on translating a complex C++ scene graph into a format LLMs could reliably interpret. The team evaluated three representations: abstract XML/JSX, React/Tailwind, and raw images. They chose React/Tailwind because models are heavily trained on this syntax, allowing for pixel-perfect output when pasted into a standard HTTP server.

Crucially, the team avoided passing base64 images directly into the context window, as it caused token bloat and poor performance. Instead, they used images as supplementary context alongside the code, which significantly improved agentic output quality. To handle enterprise requirements, they integrated 'Code Connect,' which replaces generic markup with pointers to a company's internal, battle-tested, and accessible component library. This reduces context window usage while ensuring the generated code adheres to organizational standards.

Iterative Evaluation and Process

Early in the project, the team attempted to grade AI outputs by hand in a spreadsheet, a process they abandoned after two hours. They shifted to an automated evaluation pipeline using LLM judges, which now runs hundreds of times per week. This allows engineers to test prompt changes against a suite of toy repositories rapidly.

When the MCP spec evolved and deprecated their initial transport choice (server events), the team maintained a compatibility matrix to track uneven support across clients like VS Code and Cursor. They prioritized a local-first architecture using an Electron-based IPC bridge, which satisfied enterprise security concerns regarding data privacy and provided the fastest path to product-market fit.

Hacking Around Spec Limitations

Because many MCP features were experimental or inconsistently implemented across clients, the team used 'elicitation' and 'sampling' workarounds to improve user experience. When a component was not 'Code Connected,' the server would prompt the user for permission to scan their codebase for matches, effectively mimicking native elicitation workflows. They also added optional query arguments to tool calls to capture framework-specific context, providing a signal to identify where translation layers were failing. This pragmatic, 'build-while-flying' approach allowed them to ship a high-growth product despite a rapidly shifting technical landscape.