Gives coding agents simplified layout and style data from Figma files to implement designs.
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add figma-context --env FIGMA_API_KEY='<FIGMA_API_KEY>' --env YOUR_KEY='<YOUR_KEY>' -- npx -y figma-developer-mcp~/.codex/config.toml
[mcp_servers.figma-context]
command = "npx"
args = ["-y", "figma-developer-mcp"]
env = { FIGMA_API_KEY = "<FIGMA_API_KEY>", YOUR_KEY = "<YOUR_KEY>" }
# codex mcp add figma-context --env FIGMA_API_KEY='<FIGMA_API_KEY>' --env YOUR_KEY='<YOUR_KEY>' -- npx -y figma-developer-mcp~/.cursor/mcp.json
{
"mcpServers": {
"figma-context": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>",
"YOUR_KEY": "<YOUR_KEY>"
}
}
}
}.vscode/mcp.json
{
"servers": {
"figma-context": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-developer-mcp"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>",
"YOUR_KEY": "<YOUR_KEY>"
}
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"figma-context": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>",
"YOUR_KEY": "<YOUR_KEY>"
}
}
}
}claude_desktop_config.json
{
"mcpServers": {
"figma-context": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>",
"YOUR_KEY": "<YOUR_KEY>"
}
}
}
}.trae/mcp.json
{
"mcpServers": {
"figma-context": {
"command": "npx",
"args": [
"-y",
"figma-developer-mcp"
],
"env": {
"FIGMA_API_KEY": "<FIGMA_API_KEY>",
"YOUR_KEY": "<YOUR_KEY>"
}
}
}
}Environment variables
FIGMA_API_KEYYOUR_KEY
Replace the placeholders with your own credentials and keep them out of version control.