Code Connect
advancedDefinition
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.
In the wild
Your design system's Button is linked via Code Connect. Generating a frame that uses it yields `<Button variant="primary">` rather than a hand-rolled `<button>` with inline styles.
More from Design with MCP
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.
Figma Dev Mode
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.
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.