Framelink Figma MCP

Claude Code

1. Eseguilo in un terminale, nella cartella del tuo progetto:

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. Avvia Claude Code e digita /mcp. framelink-figma dovrebbe risultare collegato.

Aggiungi --scope user per renderlo disponibile in tutti i progetti. Sostituisci i segnaposto con i tuoi valori.

Claude Desktop

1. Apri Settings → Developer → Edit Config. Si apre claude_desktop_config.json. Aggiungi:

{
  "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. Salva il file e riavvia Claude Desktop. Sostituisci i segnaposto con i tuoi valori.

Richiede Node.js sul tuo computer. Il file si trova in ~/Library/Application Support/Claude/ su macOS e in %APPDATA%\Claude\ su Windows.

Cursor

Aggiungi a Cursor (si apre in una nuova scheda)

Oppure aggiungilo a mano in ~/.cursor/mcp.json (tutti i progetti) o in .cursor/mcp.json (questo progetto):

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

Richiede Node.js sul tuo computer. Sostituisci i segnaposto con i tuoi valori.

VS Code

Aggiungilo a .vscode/mcp.json. VS Code chiede il segreto la prima volta e lo conserva in modo sicuro:

{
  "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
    }
  ]
}

Richiede Node.js sul tuo computer.

Devin Desktop

1. Aggiungilo a ~/.config/devin/mcp_config.json (macOS e Linux) o a %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. Aggiorna l’elenco dei server MCP in Cascade. Sostituisci i segnaposto con i tuoi valori.

Devin Desktop è il nuovo nome di 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

Oppure modifica direttamente ~/.codex/config.toml:

[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>" }

Richiede Node.js sul tuo computer. Sostituisci i segnaposto con i tuoi valori.

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

Così lo aggiungi al progetto corrente. Aggiungi -s user per usarlo ovunque.

Qualsiasi client

La maggior parte dei client che avviano server locali accetta questa forma:

{
  "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 mette i server sotto context_servers nelle sue impostazioni, con gli stessi campi command, args ed env.

Richiede Node.js sul tuo computer. Sostituisci i segnaposto con i tuoi valori.

Badge per il 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>

Segue la modalità chiara o scura di chi legge. Aggiungi ?theme=light o ?theme=dark per fissarla, oppure ?style=compact per mostrare il simbolo senza la scritta.

Scheda per il sito

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

La scheda compare dove si trova il tag. Aggiungi data-theme="dark" o data-size="compact" al tag per cambiarla. Il file contiene tutto ciò che serve, quindi non fa altre richieste e non imposta cookie.

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>

Usalo nelle pagine che non consentono script. Aggiungi ?theme=light o ?theme=dark all’indirizzo per fissare i colori.

JSON

La scheda come dati per le tue pagine e i tuoi strumenti: nome, descrizione breve, comando di installazione, tool e i link «Aggiungi a». Qualsiasi sito può leggerla (CORS aperto).

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

Cosa significa ogni campo