Skip to main content
Glama
deenesjakoruzh
gethopp

Figma MCP Bridge

by gethopp
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Hybrid

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 ✊

Es unterstützt mehrere gleichzeitig verbundene Figma-Dateien; öffnen Sie das Plugin in jeder Datei, und Ihr KI-Agent kann jede davon über den fileKey abfragen. Setups mit nur einer Datei funktionieren genau wie zuvor, ohne dass Änderungen erforderlich sind.

Demo

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

Video ansehen

Related MCP server: Figma Bridge MCP

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.

Um mit mehreren Dateien zu arbeiten, öffnen Sie einfach das Plugin in jeder Figma-Datei. Die Bridge hält alle Verbindungen aktiv und Ihr KI-Agent kann jede davon über den fileKey ansteuern.

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

Verfügbare Tools

Tool

Beschreibung

list_files

Listet alle verbundenen Figma-Dateien auf (unterstützt Workflows mit mehreren Dateien)

get_document

Ruft den Dokumentenbaum 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

Alle Tools akzeptieren einen optionalen fileKey-Parameter, wenn mehrere Figma-Dateien verbunden sind. Verwenden Sie list_files, um verbundene Dateien und deren Schlüssel zu entdecken.

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 der 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 Informationen zu liefern, die Sie benötigen.

2. Der MCP-Server

Der MCP-Server ist das Herzstück der Figma MCP Bridge. Er verwaltet eine Registrierung von WebSocket-Verbindungen, die nach fileKey sortiert sind, sodass mehrere Figma-Dateien gleichzeitig verbunden sein können. Der Server ist verantwortlich für:

  • Die Handhabung von WebSocket-Verbindungen von einer oder mehreren Figma-Plugin-Instanzen

  • Das Routing von Tool-Aufrufen an die richtige Datei basierend auf dem fileKey

  • Das Weiterleiten von Antworten zurück an den KI-Client

  • 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)         │
         └─────────────────────────────┘    └─────────────────────────────┘

This server cannot be installed

A
license - permissive license
-
quality - not tested
A
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
1wRelease cycle
18Releases (12mo)
Commit activity
Issues opened vs closed

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

  • mcp-figma

    tranhoangtu-it
    A
    license
    -
    quality
    D
    maintenance
    Bridges AI clients to Figma Desktop via Plugin API and WebSocket, enabling real-time design manipulation without rate limits.
    1,334
    MIT

  • Figma MCP Go

    tunglt1810
    A
    license
    -
    quality
    A
    maintenance
    Figma MCP server with full read/write access via plugin bridge — no API token, no rate limits. 83 tools for design automation: styles, variables, components, prototypes, and content.
    8
    MIT

  • figma-mcp-rust

    alvinindra
    A
    license
    -
    quality
    A
    maintenance
    An MCP server that enables AI tools to read and write Figma designs via a plugin bridge, bypassing the Figma REST API and rate limits.
    22
    MIT

View all related MCP servers

Related MCP Connectors

  • Figma MCP Server

    The Figma MCP server brings Figma design context directly into your AI workflow.

  • anythingmcp

    Self-hosted MCP gateway: turn any API, database or MCP server into AI connectors — no code.

  • mcp

    MCP server connecting AI agents to non-custodial staking data across 130+ networks.

View all MCP Connectors

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/gethopp/figma-mcp-bridge'

If you have feedback or need assistance with the MCP directory API, please join our Discord server