Figma MCP Bridge

Pairing with Hopp

Obwohl es andere großartige Figma-MCP-Server wie Figma-Context-MCP gibt, ist ein Problem die API-Limitierung für kostenlose Nutzer.

Das Limit für kostenlose Konten liegt bei 6 Anfragen pro Monat, ja pro Monat.

Figma MCP Bridge ist eine Lösung für dieses Problem. Es ist ein Plugin + MCP-Server, das Live-Figma-Dokumentdaten an KI-Tools streamt, ohne die Figma-API-Ratenbegrenzungen zu erreichen. Es ist also Figma-MCP für den Rest von uns ✊

Demo

Sehen Sie sich eine Demo zum Erstellen einer Benutzeroberfläche in Cursor mit Figma MCP Bridge an

Video ansehen

Schnellstart

1. Fügen Sie den MCP-Server zu Ihrem bevorzugten KI-Tool hinzu

Fügen Sie Folgendes zur MCP-Konfiguration Ihres KI-Tools hinzu (z. B. Cursor, Windsurf, Claude Desktop):

{
  "figma-bridge": {
    "command": "npx",
    "args": ["-y", "@gethopp/figma-mcp-bridge"]
  }
}

Das war's – keine Binärdateien zum Herunterladen oder Installieren.

2. Fügen Sie das Figma-Plugin hinzu

Laden Sie das Plugin von der Seite Latest Release herunter, gehen Sie dann in Figma auf Plugins > Development > Import plugin from manifest und wählen Sie die Datei manifest.json aus dem Ordner plugin/ aus.

3. Fangen Sie an, es zu benutzen 🎉

Öffnen Sie eine Figma-Datei, führen Sie das Plugin aus und beginnen Sie, Ihr KI-Tool zu nutzen. Der MCP-Server verbindet sich automatisch mit dem Plugin.

Wenn Sie mehr darüber erfahren möchten, wie es funktioniert, lesen Sie den Abschnitt Funktionsweise.

Verfügbare Tools

Tool	Beschreibung
`get_document`	Ruft den Dokumentbaum der aktuellen Figma-Seite ab
`get_selection`	Ruft die aktuell ausgewählten Knoten in Figma ab
`get_node`	Ruft einen bestimmten Figma-Knoten nach ID ab (Doppelpunkt-Format, z. B. `4029:12345`)
`get_styles`	Ruft alle lokalen Farb-, Text-, Effekt- und Rasterstile ab
`get_metadata`	Ruft Dateinamen, Seiten und Informationen zur aktuellen Seite ab
`get_design_context`	Ruft einen tiefenbegrenzten Baum ab, der für das Verständnis des Design-Kontexts optimiert ist
`get_variable_defs`	Ruft alle Variablensammlungen, Modi und Werte ab (Design-Tokens)
`get_screenshot`	Exportiert Knoten als PNG/SVG/JPG/PDF (base64-kodiert)
`save_screenshots`	Exportiert und speichert Screenshots direkt im lokalen Dateisystem

Lokale Entwicklung

1. Klonen Sie dieses Repository lokal

git clone git@github.com:gethopp/figma-mcp-bridge.git

2. Erstellen Sie den Server

cd server && npm install && npm run build

3. Erstellen Sie das Plugin

cd plugin && bun install && bun run build

4. Fügen Sie den MCP-Server zu Ihrem bevorzugten KI-Tool hinzu

Für die lokale Entwicklung fügen Sie Folgendes zur MCP-Konfiguration Ihres KI-Tools hinzu:

{
  "figma-bridge": {
    "command": "node",
    "args": ["/path/to/figma-mcp-bridge/server/dist/index.js"]
  }
}

Struktur

Figma-MCP-Bridge/
├── plugin/   # Figma plugin (TypeScript/React)
└── server/   # MCP server (TypeScript/Node.js)
    └── src/
        ├── index.ts      # Entry point
        ├── bridge.ts     # WebSocket bridge to Figma plugin
        ├── leader.ts     # Leader: HTTP server + bridge
        ├── follower.ts   # Follower: proxies to leader via HTTP
        ├── node.ts       # Dynamic leader/follower role switching
        ├── election.ts   # Leader election & health monitoring
        ├── tools.ts      # MCP tool definitions
        └── types.ts      # Shared types

Funktionsweise

Es gibt zwei Hauptkomponenten für die Figma MCP Bridge:

1. Das Figma-Plugin

Das Figma-Plugin ist die Benutzeroberfläche für die Figma MCP Bridge. Sie führen dies innerhalb der Figma-Datei aus, für die Sie den MCP-Server verwenden möchten, und es ist dafür verantwortlich, Ihnen alle benötigten Informationen zu beschaffen.

2. Der MCP-Server

Der MCP-Server ist das Herzstück der Figma MCP Bridge. Da sich das Figma-Plugin über eine WebSocket-Verbindung mit dem MCP-Server verbindet, ist der MCP-Server verantwortlich für:

Die Handhabung von WebSocket-Verbindungen vom Figma-Plugin
Die Weiterleitung von Tool-Aufrufen an das Figma-Plugin
Das Routing von Antworten zurück an das Figma-Plugin
Die Handhabung der Leader-Wahl (da wir jeweils nur eine WS-Verbindung zu einem MCP-Server haben können)

┌─────────────────────────────────────────────────────────────────────────────┐
│                              FIGMA (Browser)                                │
│  ┌───────────────────────────────────────────────────────────────────────┐  │
│  │                         Figma Plugin                                  │  │
│  │                    (TypeScript/React)                                 │  │
│  └───────────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      │ WebSocket
                                      │ (ws://localhost:1994/ws)
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                          PRIMARY MCP SERVER                                 │
│                         (Leader on :1994)                                   │
│  ┌─────────────────────────────────────────────────────────────────────┐    │
│  │  Bridge                                    Endpoints:               │    │
│  │  • Manages WebSocket conn                  • /ws    (plugin)        │    │
│  │  • Forwards requests to plugin             • /ping  (health)        │    │
│  │  • Routes responses back                   • /rpc   (followers)     │    │
│  └─────────────────────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────────────────────┘
                           ▲                              ▲
                           │ HTTP /rpc                    │ HTTP /rpc
                           │ POST requests                │ POST requests
                           │                              │
         ┌─────────────────┴───────────┐    ┌─────────────┴───────────────┐
         │    FOLLOWER MCP SERVER 1    │    │    FOLLOWER MCP SERVER 2    │
         │                             │    │                             │
         │  • Pings leader /ping       │    │  • Pings leader /ping       │
         │  • Forwards tool calls      │    │  • Forwards tool calls      │
         │    via HTTP /rpc            │    │    via HTTP /rpc            │
         │  • If leader dies →         │    │  • If leader dies →         │
         │    attempts takeover        │    │    attempts takeover        │
         └─────────────────────────────┘    └─────────────────────────────┘
                    ▲                                      ▲
                    │                                      │
                    │ MCP Protocol                         │ MCP Protocol
                    │ (stdio)                              │ (stdio)
                    ▼                                      ▼
         ┌─────────────────────────────┐    ┌─────────────────────────────┐
         │      AI Tool / IDE 1        │    │      AI Tool / IDE 2        │
         │      (e.g., Cursor)         │    │      (e.g., Cursor)         │
         └─────────────────────────────┘    └─────────────────────────────┘

Figma MCP Bridge

Figma MCP Bridge

Demo

Schnellstart

1. Fügen Sie den MCP-Server zu Ihrem bevorzugten KI-Tool hinzu

2. Fügen Sie das Figma-Plugin hinzu

3. Fangen Sie an, es zu benutzen 🎉

Verfügbare Tools

Lokale Entwicklung

1. Klonen Sie dieses Repository lokal

2. Erstellen Sie den Server

3. Erstellen Sie das Plugin

4. Fügen Sie den MCP-Server zu Ihrem bevorzugten KI-Tool hinzu

Struktur

Funktionsweise

1. Das Figma-Plugin

2. Der MCP-Server

Resources

Looking for Admin?

Latest Blog Posts

MCP directory API