Dev Mode MCP grounds AI code in your system

Figma's Dev Mode MCP Server feeds your actual design system — components, tokens, styles — into AI coding agents like Cursor and Claude Code, so generated code matches what your team already built. It's been live over a year and is now routine, not a novelty.

The Dev Mode MCP Server lets AI code agents (Cursor, Claude Code, VS Code with Copilot) query your live Figma file for real component and token data, instead of guessing from a screenshot. Figma's own team demoed this back in mid-2025, and it's now baseline expectation on teams doing AI-assisted design-to-code handoff. For design systems specifically, this raises the stakes on hygiene: messy or undocumented components produce messy AI-generated code, which is a strong argument for keeping your library cleanly named and properly tokenised. If you're contributing to or maintaining a design system, understanding roughly what MCP reads from your file is becoming as useful as understanding Auto Layout.

Related in Design systems

Established

Your design system is becoming an AI's reading list

Figma's Dev Mode MCP server exposes variables, component maps and Code Connect mappings directly to coding agents like Copilot, Cursor and Claude Code, instead of a flat screenshot. That means how you name and structure tokens now directly affects what an AI can build correctly.

figma.com4 Jun

Established

MCP + Design Systems Is Now Default Advice

Figma's design-systems team argued back in August 2025 that a well-structured system is what makes AI agents actually useful, not optional polish. Eight months on, that's the standard line, not a hot take.

figma.com6 Aug

Adoption

Design Tokens Go Agent-Ready via Dev Mode MCP

Figma's Dev Mode MCP server exposes tokens, variables and component maps straight to AI agents. That means sloppy token architecture no longer just confuses humans — it confuses agents too.

webdeveloper.com5 Jul