Figma Dev Mode
intermediateDefinition
A mode in Figma built for handing design off to code. It surfaces measurements, tokens, and the structure of a selection, and it hosts the Figma MCP server so an AI assistant can read the frame you've selected and generate matching code.
In the wild
You toggle Dev Mode, select the checkout frame, and enable the MCP server in the sidebar. Now Claude Code can call get_design_context on that exact selection.
More from Design with MCP
Code Connect
A Figma feature that maps design components to their real implementations in your codebase. When an agent generates code from a frame, Code Connect tells it to reuse your actual components and props instead of writing fresh markup, so the output matches what you already ship.
Design Token
A named value for a design decision — a color, a spacing step, a font size — stored once and referenced everywhere. Tokens keep design and code in sync: change the token and every place that uses it updates. Pulling tokens rather than hardcoding hex and pixels is what keeps generated code on-system.
Design-to-Code
The workflow of turning a visual design — a Figma frame, a Stitch screen — directly into working front-end code, usually by giving an AI agent structured access to the design through an MCP server. The agent reads the design's layout, tokens, and components instead of you re-typing them by hand.
DESIGN.md
A natural-language file format from Stitch that captures a design's intent — layout, components, styling notes — as portable text. Because it's plain language, it can be extracted from an existing URL and carried across projects or tools, giving an agent a readable brief instead of an opaque design file.
Frame & Node
The basic units of a design file. A node is any element — a rectangle, text, a group; a frame is a container node that holds a layout, often a whole screen or component. When you scope an AI request, you're pointing it at a specific node (usually a frame) by selecting it or pasting a link to it.
Google Stitch
A free, AI-native design tool from Google Labs that generates high-fidelity UI — up to several connected screens — from a natural-language description. It ships an MCP server, so coding agents can pull its generated screens straight into a project without switching to a separate app.