Framelink Figma MCP

Claude Code

1. Run this in a terminal, in your project folder:

claude mcp add --transport stdio framelink-figma --env "FIGMA_API_KEY=<YOUR_FIGMA_API_KEY>" -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio

1. Start Claude Code and type /mcp. framelink-figma should show as connected.

Add --scope user to make it available in every project. Replace the placeholders with your own values.

Claude Desktop

1. Open Settings → Developer → Edit Config. It opens claude_desktop_config.json. Add:

{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

1. Save the file and restart Claude Desktop. Replace the placeholders with your own values.

Needs Node.js on your computer. The file lives in ~/Library/Application Support/Claude/ on macOS and %APPDATA%\Claude\ on Windows.

Cursor

Añadir a Cursor (se abre en una pestaña nueva)

Or add it by hand to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project):

{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

Needs Node.js on your computer. Replace the placeholders with your own values.

VS Code

Add it to .vscode/mcp.json. VS Code asks for the secret the first time and stores it securely:

{
  "servers": {
    "framelink-figma": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "${input:figma-api-key}"
      }
    }
  },
  "inputs": [
    {
      "type": "promptString",
      "id": "figma-api-key",
      "description": "FIGMA_API_KEY",
      "password": true
    }
  ]
}

Needs Node.js on your computer.

Devin Desktop

1. Add it to ~/.config/devin/mcp_config.json (macOS and Linux) or %APPDATA%\devin\mcp_config.json (Windows):

{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

1. Refresh the MCP server list in Cascade. Replace the placeholders with your own values.

Devin Desktop is the new name for Windsurf.

Codex

codex mcp add framelink-figma --env "FIGMA_API_KEY=<YOUR_FIGMA_API_KEY>" -- npx -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio

Or edit ~/.codex/config.toml directly:

[mcp_servers.framelink-figma]
command = "npx"
args = ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio"]
env = { FIGMA_API_KEY = "<YOUR_FIGMA_API_KEY>" }

Needs Node.js on your computer. Replace the placeholders with your own values.

Gemini CLI

gemini mcp add -e "FIGMA_API_KEY=<YOUR_FIGMA_API_KEY>" framelink-figma npx -- -y figma-developer-mcp --figma-api-key=YOUR_KEY --stdio

This adds it to the current project. Add -s user to use it everywhere.

Any client

Most clients that start local servers accept this shape:

{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_KEY",
        "--stdio"
      ],
      "env": {
        "FIGMA_API_KEY": "<YOUR_FIGMA_API_KEY>"
      }
    }
  }
}

Zed puts servers under context_servers in its settings, with the same command, args and env fields.

Needs Node.js on your computer. Replace the placeholders with your own values.

Insignia para README

[![Framelink Figma MCP on mcp.tc](https://mcp.tc/i/framelink-figma/badge.svg)](https://mcp.tc/i/framelink-figma)

<a href="https://mcp.tc/i/framelink-figma"><img src="https://mcp.tc/i/framelink-figma/badge.svg" alt="Framelink Figma MCP on mcp.tc" height="20"></a>

Sigue el modo claro u oscuro de quien lee. Añade ?theme=light o ?theme=dark para fijarlo, o ?style=compact para mostrar el símbolo sin la palabra.

Tarjeta para web

<script src="https://mcp.tc/w/framelink-figma.js" async></script>

La tarjeta aparece donde esté la etiqueta. Añade data-theme="dark" o data-size="compact" a la etiqueta para cambiarla. El archivo contiene todo lo que necesita, así que no hace otras solicitudes ni instala cookies.

iframe

<iframe src="https://mcp.tc/embed/framelink-figma" title="Framelink Figma MCP on mcp.tc" width="420" height="200" loading="lazy" allow="clipboard-write" style="border:0;border-radius:8px;max-width:100%"></iframe>

Úsalo en páginas que no permiten scripts. Añade ?theme=light o ?theme=dark a la dirección para fijar los colores.

JSON

La ficha como datos para tus propias páginas y herramientas: nombre, descripción corta, comando de instalación, herramientas y los enlaces «Add to». Cualquier web puede leerla (CORS abierto).

https://mcp.tc/i/framelink-figma.json

Qué significa cada campo