Skip to main content
Glama
deenesjakoruzh
gethopp

Figma MCP Bridge

by gethopp
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Hybrid

Figma MCP Bridge

Emparejamiento con Hopp

Aunque existen otros servidores MCP de Figma increíbles como Figma-Context-MCP, un problema es la limitación de la API para usuarios gratuitos.

El límite para cuentas gratuitas es de 6 solicitudes por mes, sí, por mes.

Figma MCP Bridge es una solución a este problema. Es un plugin + servidor MCP que transmite datos de documentos de Figma en vivo a herramientas de IA sin alcanzar los límites de tasa de la API de Figma, así que es Figma MCP para el resto de nosotros ✊

Admite múltiples archivos de Figma conectados simultáneamente; abre el plugin en cada archivo y tu agente de IA puede consultar cualquiera de ellos mediante fileKey. Las configuraciones de un solo archivo funcionan exactamente igual que antes sin necesidad de cambios.

Demo

Mira una demo de cómo construir una interfaz de usuario en Cursor con Figma MCP Bridge

Mira el video

Related MCP server: Figma Bridge MCP

Inicio rápido

1. Añade el servidor MCP a tu herramienta de IA favorita

Añade lo siguiente a la configuración MCP de tu herramienta de IA (por ejemplo, Cursor, Windsurf, Claude Desktop):

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

Eso es todo: no hay binarios que descargar o instalar.

2. Añade el plugin de Figma

Descarga el plugin desde la página de última versión, luego en Figma ve a Plugins > Development > Import plugin from manifest y selecciona el archivo manifest.json de la carpeta plugin/.

3. Empieza a usarlo 🎉

Abre un archivo de Figma, ejecuta el plugin y empieza a enviar prompts a tu herramienta de IA. El servidor MCP se conectará automáticamente al plugin.

Para trabajar en múltiples archivos, simplemente abre el plugin en cada archivo de Figma. El puente mantiene todas las conexiones activas y tu agente de IA puede dirigirse a cualquiera de ellos mediante fileKey.

Si quieres saber más sobre cómo funciona, lee la sección Cómo funciona.

Herramientas disponibles

Herramienta

Descripción

list_files

Lista todos los archivos de Figma conectados (admite flujos de trabajo de múltiples archivos)

get_document

Obtiene el árbol de documentos de la página actual de Figma

get_selection

Obtiene los nodos seleccionados actualmente en Figma

get_node

Obtiene un nodo específico de Figma por ID (formato de dos puntos, ej. 4029:12345)

get_styles

Obtiene todos los estilos locales de pintura, texto, efectos y cuadrícula

get_metadata

Obtiene el nombre del archivo, las páginas y la información de la página actual

get_design_context

Obtiene un árbol con límite de profundidad optimizado para entender el contexto del diseño

get_variable_defs

Obtiene todas las colecciones de variables, modos y valores (tokens de diseño)

get_screenshot

Exporta nodos como PNG/SVG/JPG/PDF (codificado en base64)

save_screenshots

Exporta y guarda capturas de pantalla directamente en el sistema de archivos local

Todas las herramientas aceptan un parámetro opcional fileKey cuando hay múltiples archivos de Figma conectados. Usa list_files para descubrir los archivos conectados y sus claves.

Desarrollo local

1. Clona este repositorio localmente

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

2. Construye el servidor

cd server && npm install && npm run build

3. Construye el plugin

cd plugin && bun install && bun run build

4. Añade el servidor MCP a tu herramienta de IA favorita

Para el desarrollo local, añade lo siguiente a la configuración MCP de tu herramienta de IA:

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

Estructura

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

Cómo funciona

Hay dos componentes principales en Figma MCP Bridge:

1. El plugin de Figma

El plugin de Figma es la interfaz de usuario para Figma MCP Bridge. Lo ejecutas dentro del archivo de Figma para el que quieres usar el servidor MCP, y es responsable de obtener toda la información que necesitas.

2. El servidor MCP

El servidor MCP es el núcleo de Figma MCP Bridge. Mantiene un registro de conexiones WebSocket identificadas por fileKey, por lo que se pueden conectar múltiples archivos de Figma simultáneamente. El servidor es responsable de:

  • Gestionar las conexiones WebSocket de una o más instancias del plugin de Figma

  • Enrutar las llamadas a herramientas al archivo correcto basado en fileKey

  • Reenviar las respuestas al cliente de IA

  • Gestionar la elección del líder (ya que solo podemos tener una conexión WS a un servidor MCP a la vez)

┌─────────────────────────────────────────────────────────────────────────────┐
│                              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