figma-mcp

Servidor de Model Context Protocol (MCP) bidireccional y de alto rendimiento escrito en Rust que conecta asistentes de codificación de IA directamente con Figma Desktop.

Permite a los agentes de IA (Claude Code, Cursor, Windsurf, Antigravity, VS Code, Zed) dibujar UI directamente en el lienzo de Figma y leer los diseños existentes como árboles JSON estructurados, tokens de diseño, CSS y capturas de pantalla — sin necesidad de claves de API externas.

⚡ Aspectos destacados

• Rendimiento nativo en Rust puro: se inicia en < 1ms, utiliza ~3MB RAM, cero pausas del GC.

• Puente bidireccional: la IA puede tanto escribir UI (dibujar vectores, componentes, marcos, autolayout) como leer diseños (extraer jerarquía, calcular estilos, capturar el lienzo).

• Entorno de ejecución de JS en sandbox: impulsado por Boa (motor ECMAScript en Rust puro) para la ejecución segura de scripts de diseño.

• CDN de activos integrado: obtiene y normaliza automáticamente iconos SVG de 7 bibliotecas de iconos (Ionicons, Lucide, Tabler, Bootstrap, Fluent, Phosphor).

• Soporte multi-pestaña / multi-sesión: se conecta sin problemas a múltiples archivos de Figma abiertos simultáneamente.

• Privacidad 100% en localhost: toda la comunicación permanece estrictamente en 127.0.0.1:38451 mediante HTTP long-polling.

Related MCP server: Figma Dash MCP Server

🏛️ Arquitectura

┌─────────────────────────────────────────────────────────┐
│               Terminal (Standalone Server)              │
│                       figma-mcp                         │
│  • MCP SSE Transport (/sse, /message)                   │
│  • Sandboxed JS Runtime (Boa)                           │
│  • Built-in Asset & Icon Resolver                       │
│  • Async WebSocket & HTTP Long-Polling Bridge (Axum)    │
└───────────────▲─────────────────────────▲───────────────┘
                │ (ws://127.0.0.1:38451)  │ (http://127.0.0.1:38451/sse)
                │                         │
      ┌─────────┴─────────┐     ┌─────────┴─────────┐
      │   Figma Desktop   │     │ AI Assistant(s)   │
      │ (Plugin Bridge)   │     │ Antigravity/Cursor│
      └───────────────────┘     │ Claude Code / Zed │
                                └───────────────────┘

🚀 Inicio rápido

1. Lanzamiento en una línea con NPX (sin necesidad de toolchain de Rust)

Puedes lanzar figma-mcp en cualquier máquina Mac, Linux o Windows sin configuración previa:

npx figma-mcp

Esto descarga automáticamente el binario nativo precompilado para tu arquitectura e inicia el servidor.

O si configuras en Cursor / Claude Desktop / Windsurf / Antigravity MCP Settings:

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["-y", "figma-mcp", "--stdio"]
    }
  }
}

2. O compilar desde el código fuente (Rust)

Requisitos previos: Rust toolchain (cargo >= 1.80).

git clone https://github.com/BuiHung1612/figma-mcp.git
cd figma-mcp
cargo build --release
./target/release/figma-mcp

3. Instalar el plugin de Figma

1. Abre Figma Desktop.

2. Ve a Plugins → Development → Import plugin from manifest...

3. Selecciona el archivo: plugin/manifest.json de este repositorio.

4. Ejecuta el plugin (Plugins → Development → Figma MCP Bridge).

5. La interfaz del plugin mostrará un punto verde (Connected).

4. Configurar tu cliente MCP

Google Antigravity (Transporte SSE - Recomendado)

Añade a tu ~/.gemini/config/mcp_config.json o al .agents/mcp_config.json del proyecto:

{
  "mcpServers": {
    "figma-mcp": {
      "serverUrl": "http://127.0.0.1:38451/sse"
    }
  }
}

Claude Code / Cursor / Windsurf / VS Code

Puedes conectarte mediante SSE o stdio:

Opción A: Transporte SSE (Recomendado)

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://127.0.0.1:38451/sse"
    }
  }
}

Opción B: Subproceso stdio (mediante NPX)

{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["-y", "figma-mcp", "--stdio"]
    }
  }
}

🛠️ Referencia de herramientas MCP

figma-mcp expone 7 herramientas MCP de primera clase:

figma_get_selection

Inspección ultrarrápida, comprimida en tokens, de las capas/marcos seleccionados actualmente en el lienzo de Figma. Devuelve la jerarquía de layout y tipografía compactada con un 60-80% menos de tokens.

figma_inspect_node

Inspecciona un nodo específico por ID o nombre, devolviendo el contexto de diseño completo, CSS, reglas de auto-layout y tipografía.

figma_export_asset

Exporta cualquier nodo/capa de Figma directamente a PNG, JPG o SVG.

• outputPath: cuando se especifica (p. ej. src/assets/logo.png), guarda directamente en el disco y devuelve metadatos JSON mínimos en lugar de llenar la ventana de contexto con grandes cadenas base64.

figma_status

Comprueba el estado de la conexión del puente en vivo, las pestañas de Figma conectadas, el nombre del archivo activo y las estadísticas de latencia.

figma_write

Ejecuta comandos de dibujo de JavaScript dentro de la VM en sandbox para crear o modificar diseños en el lienzo de Figma.

• Admite auto-layout (layoutMode, itemSpacing, padding), tipografía, rellenos, trazos, radio de esquinas, sombras proyectadas y creación de componentes.

• Admite carga de iconos: figma.loadIcon("ionicons", "heart", { size: 24, fill: "#ff4757" }).

• Admite inserción de imágenes: figma.loadImage(url, { width: 300, height: 200 }).

figma_read

Lector universal para consultas avanzadas: get_design, scan_design, screenshot, export_svg, get_variables, get_styles, search_nodes. Admite outputPath para exportaciones de archivos.

figma_docs

Obtiene la documentación integrada, las reglas de diseño, las pautas de layout y los ejemplos de código para figma_write.

• section: "all" | "rules" | "layout" | "api" | "tokens" | "icons"

figma_rules

Audita el documento de Figma actual y genera reglas de coherencia y definiciones de tokens para guiar la generación de IA.

💻 Desarrollo y pruebas

# Run server directly in debug mode
cargo run

# Build release binary
cargo build --release

# Run automated MCP test suite
./scripts/test-rust-mcp.sh

# Rebuild Figma plugin bundle (if plugin-src/ is modified)
node scripts/build-plugin.js

📄 Licencia

MIT © BuiHung1612 — Libre de usar, modificar y distribuir. Consulta LICENSE para más detalles.