Framelink Figma MCP

Claude Code

1. Lancez ceci dans un terminal, dans le dossier de votre projet :

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. Démarrez Claude Code et tapez /mcp. framelink-figma devrait apparaître comme connecté.

Ajoutez --scope user pour le rendre disponible dans tous vos projets. Remplacez les espaces réservés par vos propres valeurs.

Claude Desktop

1. Ouvrez Settings → Developer → Edit Config. Cela ouvre claude_desktop_config.json. Ajoutez :

{
  "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. Enregistrez le fichier et redémarrez Claude Desktop. Remplacez les espaces réservés par vos propres valeurs.

Nécessite Node.js sur votre ordinateur. Le fichier se trouve dans ~/Library/Application Support/Claude/ sous macOS et dans %APPDATA%\Claude\ sous Windows.

Cursor

Ajouter à Cursor (s’ouvre dans un nouvel onglet)

Ou ajoutez-le à la main dans ~/.cursor/mcp.json (tous les projets) ou .cursor/mcp.json (ce projet) :

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

Nécessite Node.js sur votre ordinateur. Remplacez les espaces réservés par vos propres valeurs.

VS Code

Ajoutez-le à .vscode/mcp.json. VS Code demande le secret la première fois et le stocke de façon sécurisée :

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

Nécessite Node.js sur votre ordinateur.

Devin Desktop

1. Ajoutez-le à ~/.config/devin/mcp_config.json (macOS et Linux) ou %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. Actualisez la liste des serveurs MCP dans Cascade. Remplacez les espaces réservés par vos propres valeurs.

Devin Desktop est le nouveau nom de 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

Ou modifiez directement ~/.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>" }

Nécessite Node.js sur votre ordinateur. Remplacez les espaces réservés par vos propres valeurs.

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

Cela l’ajoute au projet en cours. Ajoutez -s user pour l’utiliser partout.

Tout client

La plupart des clients qui lancent des serveurs locaux acceptent cette forme :

{
  "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 place les serveurs sous context_servers dans ses réglages, avec les mêmes champs command, args et env.

Nécessite Node.js sur votre ordinateur. Remplacez les espaces réservés par vos propres valeurs.

Badge pour 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>

Il suit le mode clair ou sombre du lecteur. Ajoutez ?theme=light ou ?theme=dark pour le fixer, ou ?style=compact pour afficher le symbole sans le nom.

Carte pour site web

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

La carte apparaît à l’endroit de la balise. Ajoutez data-theme="dark" ou data-size="compact" à la balise pour la modifier. Le fichier contient tout ce qu’il lui faut : il ne fait aucune autre requête et ne dépose aucun 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>

Utilisez-la sur les pages qui n’autorisent pas les scripts. Ajoutez ?theme=light ou ?theme=dark à l’adresse pour fixer les couleurs.

JSON

La fiche sous forme de données pour vos pages et vos outils : nom, accroche, commande d’installation, outils et liens « Add to ». N’importe quel site peut la lire (CORS ouvert).

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

Ce que signifie chaque champ