Figma-Context-MCP — Claude Code MCP server: setup guide
MCP server that feeds layout data and styles from Figma to your coding assistant. Turn design links into code without pasting screenshots.
claude mcp add figma-context-mcp -e FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-developer-mcpWhat Figma-Context-MCP does
This server runs the figma-developer-mcp package via npx to connect your coding assistant to the Figma API. Instead of sending raw JSON node trees, it strips redundant properties and forwards clean layout and style data. The model context stays focused.
You paste a link to a frame or group into the agent chat. The assistant fetches node attributes through the MCP connection and writes UI code in your target framework.
Without a valid FIGMA_API_KEY, the server cannot retrieve documents. Generate a personal access token in Figma before adding the server to your editor config.
What it helps with
- implement UI components directly from Figma links
- extract layout dimensions and styling without manual inspection
- generate frontend code from a specific frame or group
Example prompts for the agent
- Build a responsive React header using the design at this Figma link
- Read the styling and padding from this Figma frame link to update our CSS
- Generate a login form component based on this Figma group
How to install Figma-Context-MCP
Platform CLI
claude mcp add figma-context-mcp -e FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-developer-mcpReplace <…> with your own values
Platform CLI
codex mcp add figma-context-mcp --env FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-developer-mcpReplace <…> with your own values
Config file
{
"mcpServers": {
"figma-context-mcp": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"figma-context-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-developer-mcp"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e FIGMA_API_KEY=<FIGMA_API_KEY> figma-context-mcp npx -y figma-developer-mcpReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Figma-Context-MCP
How to install Figma-Context-MCP in Claude Code?
Run claude mcp add figma-context-mcp -e FIGMA_API_KEY=<FIGMA_API_KEY> -- npx -y figma-developer-mcp with your Figma personal access token.
What does Figma-Context-MCP do?
It extracts layout and visual attributes from Figma URLs and supplies them to the AI agent in a simplified structure.
What credentials does Figma-Context-MCP require?
It requires a Figma personal access token configured via the FIGMA_API_KEY environment variable or the --figma-api-key flag.
