Figma MCP
MCP server for design-to-code, Code Connect, screenshots and variables from Figma files.
The bridge between my Figma files and the agent — it turns a design reference into something the agent can actually read and build from.
Overview
Figma is where I design before I build, so closing the loop between design and code matters. The Figma MCP server lets an agent read a selected frame, pull design variables and screenshots, and use Code Connect mappings to translate components into my codebase's primitives instead of generic markup.
Setup
The Figma MCP server runs against the Figma desktop app (or a remote endpoint) and is
added to the project's MCP configuration. I authenticate through Figma rather than
pasting any token into the repo — never commit credentials to .mcp.json.
Tools it exposes
- Design context and metadata for a selected frame or component.
- Screenshots of a node, so the agent can see what it's implementing.
- Variable definitions (the design tokens) behind a design.
- Code Connect mappings linking Figma components to code components.
When to use it
During the Design and Development phases, whenever I'm implementing a design from Figma. It's the engine behind the Component from Figma prompt: read the frame and its variables, then generate a themed component that maps onto Morpha primitives.