How to Install Figma MCP in Claude Desktop
Official Figma integration — access design files, components, and tokens directly in your AI coding workflow
What Figma MCP does
The official Figma MCP server gives AI coding agents direct access to Figma design files, eliminating the gap between design and implementation. Extract tokens, components, layouts, and styles without switching context. Features: - Read file contents, frames, and component definitions - Extract design tokens (colors, typography, spacing, border radius) - Get component variants and their properties - Export specific frames as images - Access Auto Layout constraints and responsive properties - Read comments and annotations on frames - Navigate file structure and page hierarchy - Get precise measurements and coordinates Real-world impact: Before Figma MCP: Describe the design verbally, AI guesses styles After Figma MCP: AI reads the exact hex values, font weights, and spacing from the Figma file and implements pixel-perfect components One of the January 2026 launch partners for Anthropic's MCP Apps — renders interactive design previews directly inside Claude.
Installation steps
- 1Copy the config below
- 2Open claude_desktop_config.json
- 3Paste inside "mcpServers": {}
- 4Restart Claude Desktop
Configuration
File location: ~/Library/Application Support/Claude/claude_desktop_config.json
{
"figmaMcp": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp"
],
"env": {
"FIGMA_API_KEY": "figd_..."
}
}
}Install in other clients
For maintainers
If you maintain Figma MCP, add this badge to your README to show it's verified on CuratedMCP:
[](https://curatedmcp.com/marketplace/figma-mcp)