Gives AI coding tools such as Cursor and Cline access to Figma design file data for implementing designs.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add figma-context-1yhy --env FIGMA_API_KEY='<FIGMA_API_KEY>' -- npx figma-mcp '--figma-api-key={{config.FIGMA_API_KEY}}' --stdio~/.codex/config.toml
[mcp_servers.figma-context-1yhy]
command = "npx"
args = ["figma-mcp", "--figma-api-key={{config.FIGMA_API_KEY}}", "--stdio"]
env = { FIGMA_API_KEY = "<FIGMA_API_KEY>" }
# codex mcp add figma-context-1yhy --env FIGMA_API_KEY='<FIGMA_API_KEY>' -- npx figma-mcp '--figma-api-key={{config.FIGMA_API_KEY}}' --stdio~/.cursor/mcp.json
{
"mcpServers": {
"figma-context-1yhy": {
"command": "npx",
"args": [
"figma-mcp",
"--figma-api-key={{config.FIGMA_API_KEY}}",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}.vscode/mcp.json
{
"servers": {
"figma-context-1yhy": {
"type": "stdio",
"command": "npx",
"args": [
"figma-mcp",
"--figma-api-key={{config.FIGMA_API_KEY}}",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"figma-context-1yhy": {
"command": "npx",
"args": [
"figma-mcp",
"--figma-api-key={{config.FIGMA_API_KEY}}",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}claude_desktop_config.json
{
"mcpServers": {
"figma-context-1yhy": {
"command": "npx",
"args": [
"figma-mcp",
"--figma-api-key={{config.FIGMA_API_KEY}}",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}.trae/mcp.json
{
"mcpServers": {
"figma-context-1yhy": {
"command": "npx",
"args": [
"figma-mcp",
"--figma-api-key={{config.FIGMA_API_KEY}}",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>"
}
}
}
}Environment variables
FIGMA_API_KEY
Replace the placeholders with your own credentials and keep them out of version control.