Figma MCP Server

Figma MCP Server

Un servidor MCP local con cobertura completa de la API REST de Figma. Funciona con Claude Desktop, Cursor, VS Code, la CLI de Gemini y cualquier cliente MCP. Disponible en npm y en el Registro MCP oficial.

Cómo funciona

Cada endpoint de la API REST de Figma se expone como una herramienta MCP autodescriptiva, descubierta automáticamente al inicio desde tools/figma/, por lo que añadir un endpoint es simplemente añadir un archivo. Los parámetros requeridos se validan antes de cada llamada. Se ejecuta sobre stdio.

Requisitos previos

Requiere Bun ≥ 1.2. Es nativo de Bun, así que ejecútalo con bunx, no con npx (Node no es compatible).

Clave de API de Figma

Crea un token de acceso personal en Figma en Configuración > Seguridad > Tokens de acceso personal > Generar nuevo token. Proporciónalo como FIGMA_API_KEY, idealmente en el bloque env de la configuración de tu cliente (ver más abajo).

Configura tu cliente

Todos los clientes usan el mismo servidor. Apunta command a bunx, o a su ruta absoluta (which bunx) si el cliente no puede encontrarlo en PATH.

{
  "mcpServers": {
    "figma": {
      "command": "bunx",
      "args": ["figma-mcp-server"],
      "env": {
        "FIGMA_API_KEY": "your_figma_api_key_here"
      }
    }
  }
}

Ubicaciones de los archivos de configuración:

• Claude Desktop: Configuración > Desarrollador > Editar configuración (claude_desktop_config.json)
• Cursor: ~/.cursor/mcp.json, o .cursor/mcp.json por proyecto
• Gemini CLI: ~/.gemini/settings.json

Reinicia el cliente después de editar su configuración.

VS Code

Usa .vscode/mcp.json (espacio de trabajo) o tu mcp.json de usuario, con una clave servers. En lugar de codificar el token, define una entrada para que VS Code lo solicite de forma segura:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "figma-api-key",
      "description": "Figma API Key",
      "password": true
    }
  ],
  "servers": {
    "figma": {
      "command": "bunx",
      "args": ["figma-mcp-server"],
      "env": {
        "FIGMA_API_KEY": "${input:figma-api-key}"
      }
    }
  }
}

• Con ${input:figma-api-key}, VS Code te solicita la clave la primera vez que el servidor se inicia y luego la almacena en el almacenamiento secreto de tu sistema operativo.
• Para volver a introducirla o borrarla: Paleta de comandos → MCP: List Servers → selecciona el servidor → restablece/edita sus entradas.

Cobertura de herramientas

Cobertura completa de la API REST de Figma (endpoints no obsoletos), 50 herramientas en:

• Archivos y nodos (archivos, árboles de nodos, renderizado de imágenes, rellenos de imagen, metadatos, historial de versiones)
• Variables / tokens de diseño (lectura, publicados, modificación masiva)
• Componentes, conjuntos de componentes y estilos (ámbitos de archivo, publicados y de equipo)
• Comentarios y reacciones
• Carpetas (carpetas de nivel superior, subcarpetas, archivos, metadatos)
• Usuarios
• Recursos de desarrollo
• Webhooks (v2)
• Analíticas de biblioteca (acciones y usos de componentes, estilos y variables)
• Organización: registros de actividad, registros de desarrollador, uso de IA (Enterprise)
• Incrustaciones y pagos

Consulta la lista de herramientas de tu cliente MCP para obtener la lista completa y siempre actualizada de nombres de herramientas y parámetros.

Requisitos del plan

La mayoría de las herramientas funcionan con el token de acceso personal de cualquier plan. Estas requieren niveles superiores:

• Variables (list_file_variables, get_published_variables, modify_variables): organización Enterprise.
• Analíticas de biblioteca (get_library_*): plan Organization o Enterprise.
• Registros de actividad, registros de desarrollador, uso de IA: organización Enterprise con un token de acceso de administrador o de plan.

---

Licencia MIT · Por @planetabhi ⋛⋋( ⊙◊⊙)⋌⋚