Figma introduces the MCP DevMode for translating designs into code

Figma has launched the Model Context Protocol (MCP) Dev Mode server — a new tool that enables AI models to more accurately convert design projects into fully functional code. Until now, the primary way to provide context for AI was by supplying a static design image or API response. With MCP, developers can now provide a much richer and more structured context directly from Figma to code assistants like GitHub Copilot, Cursor, Windsurf and Claude Code. This significantly improves the quality and accuracy of generated code.

The MCP server helps AI better understand how a project is structured in Figma, including which variables are used, styles are applied, and the organization of components. This is crucial because without this information, AI may generate code that technically works, but doesn't fit with the team's architecture or design. MCP addresses this challenge by assisting LLMs in adapting to a particular codebase and design choices.

It is especially useful that the MCP provides data through three different tools: one for code, one for images, and one for variables. This allows users to customize which type of information they need in each specific situation. For example, users can send the exact name of a color token or its syntax to LLM if it is already defined in Figma. Additionally, the server integrates with Code Connect to ensure that the generated code matches existing components and structures.

The MCP project is currently in beta and available to users with Dev or Full access levels. The Figma team is gathering feedback and working on the next steps, including remote access without a desktop app more integration with the codebase, and improvements to Code Connect. In the near future, Figma plans to add new features such as support for annotations, the Grid system, and other elements to enhance the accuracy of design ideas.