Figma MCP Bridge
Figma MCP Bridge
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 del documento 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 ✊
Demo
Mira una demo de cómo construir una interfaz de usuario en Cursor con Figma MCP Bridge
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 (ej. 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 lanzamientos más recientes, 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 pedirle cosas a tu herramienta de IA. El servidor MCP se conectará automáticamente al plugin.
Si quieres saber más sobre cómo funciona, lee la sección Cómo funciona.
Herramientas disponibles
Herramienta | Descripción |
| Obtiene el árbol del documento de la página actual de Figma |
| Obtiene los nodos seleccionados actualmente en Figma |
| Obtiene un nodo específico de Figma por ID (formato de dos puntos, ej. |
| Obtiene todos los estilos locales de pintura, texto, efectos y cuadrícula |
| Obtiene el nombre del archivo, las páginas y la información de la página actual |
| Obtiene un árbol con límite de profundidad optimizado para entender el contexto del diseño |
| Obtiene todas las colecciones de variables, modos y valores (tokens de diseño) |
| Exporta nodos como PNG/SVG/JPG/PDF (codificado en base64) |
| Exporta y guarda capturas de pantalla directamente en el sistema de archivos local |
Desarrollo local
1. Clona este repositorio localmente
git clone git@github.com:gethopp/figma-mcp-bridge.git2. Construye el servidor
cd server && npm install && npm run build3. Construye el plugin
cd plugin && bun install && bun run build4. 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 typesCó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. A medida que el plugin de Figma se conecta con el servidor MCP a través de una conexión WebSocket, el servidor MCP es responsable de:
Manejar las conexiones WebSocket desde el plugin de Figma
Reenviar las llamadas de herramientas al plugin de Figma
Enrutar las respuestas de vuelta al plugin de Figma
Manejar 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
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
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