🎨 Setup Guide: Figma MCP Server für Antigravity

Diese Anleitung beschreibt die Installation des Figma MCP-Servers zur Nutzung mit LLMs wie Gemini in der Antigravity-Umgebung.

---

🛠 Step 1: Figma Personal Access Token erstellen

Damit der Server auf deine Designs zugreifen kann, benötigst du einen Sicherheitsschlüssel.

1. Logge dich in deinem Browser bei Figma ein.
2. Navigiere zu Settings > Security.
3. Scrolle zum Bereich Personal Access Tokens.
4. Klicke auf Generate new token.
5. Konfiguration:

• Name: z.B. Antigravity MCP
• Scopes: Wähle mindestens Files > file_content:read.

6. Wichtig: Kopiere den Token sofort. Er wird danach nie wieder angezeigt.

---

📦 Step 2: MCP Server & Tools installieren

Wir nutzen das Standard-Paket und tsx, um TypeScript-Dateien direkt auszuführen.

Important

Nutze nicht figma-developer-mcp. Dieses Paket unterstützt den benötigten stdio-Modus nicht korrekt. Verwende ausschließlich figma-mcp-server.

Öffne dein Terminal und führe aus:

npm install figma-mcp-server -g
npm install tsx -g

---

🔧 Step 3: Server-Patch (Kritisch)

Das Paket figma-mcp-server gibt beim Start eine Debug-Meldung aus. Diese Nachricht bricht das JSON-Protokoll von Antigravity (Fehler: invalid character...). Du musst diese Zeile deaktivieren.

1. Suche die Datei: ~/.config/nvm/versions/node/v24.12.0/lib/node_modules/figma-mcp-server/mcpServer.ts
2. Öffne sie in einem Texteditor.
3. Suche die Zeile:

dotenv.config({ path: path.resolve(__dirname, ".env") });

4. Kommentiere sie aus:

// dotenv.config({ path: path.resolve(__dirname, ".env") });

5. Speichere die Datei.

---

⚙️ Step 4: Antigravity Konfiguration

Trage den Server in deine globale MCP-Konfiguration ein.

1. Klicke in Antigravity auf die drei Punkte (Menü).
2. Gehe zu MCP Servers > Manage MCP Servers.
3. Klicke auf View Raw Config.
4. Füge den folgenden Block in das mcpServers-Objekt ein:

{
  "mcpServers": {
    "figma-remote": {
      "command": "/home/tristan/.config/nvm/versions/node/v24.12.0/bin/tsx",
      "args": [
        "/home/tristan/.config/nvm/versions/node/v24.12.0/lib/node_modules/figma-mcp-server/mcpServer.ts"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "DEIN_KOPIERTER_TOKEN_HIER"
      }
    }
  }
}

Note

Falls der Server nicht verbindet, stelle sicher, dass in der env-Sektion sowohl FIGMA_ACCESS_TOKEN als auch FIGMA_API_KEY mit deinem Token hinterlegt sind.

---

🚀 Step 5: Neustart & Test

1. Starte den Server in Antigravity neu.
2. Prüfe, ob 32 Tools (wie get_file, get_nodes) geladen wurden.
3. Teste die KI mit folgendem Prompt:

"Analysiere diese Figma Datei mit deinem get_file Tool: [LINK ZU DEINEM DESIGN]"