Integrations

Enables creating and manipulating designs in Figma through either a Figma plugin or directly via the Figma API, supporting operations like creating projects, frames, components, layouts, interactions, retrieving file information, and exporting assets.

Claude Figma MCP

Un servidor de Protocolo de Contexto de Modelo (MCP) que permite a Claude crear y manipular diseños en Figma a través de un complemento de Figma o directamente a través de la API de Figma.

Descripción general

Este proyecto ofrece dos enfoques para que Claude interactúe con Figma:

Enfoque del complemento : utiliza un complemento de Figma para ejecutar comandos en la interfaz de usuario de Figma
- Permite crear y manipular diseños desde cero.
- Requiere ejecutar el complemento Figma en la aplicación Figma
Enfoque de API : utiliza la API REST de Figma directamente
- Permite recuperar y exportar archivos Figma existentes
- Funciona sin abrir Figma, pero tiene capacidades de creación más limitadas.
- Requiere una clave API de Figma

Instalación

Uso de NPM (recomendado)

Instalar el paquete globalmente:

npm install -g claude-figma-mcp

O ejecútelo directamente con npx:

npx claude-figma-mcp

Ejecución desde una fuente local

Clonar este repositorio
Instalar dependencias con npm install
Construya el código TypeScript con npm run build
Ejecute el servidor con npm start (modo HTTP) o npm run start:cli (modo STDIO)

Configuración de la integración de Claude Desktop

Enfoque estándar (paquete NPM)

Agregue lo siguiente a su archivo de configuración de Claude Desktop:

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

Enfoque de la API de Figma

Si prefieres usar la API de Figma directamente (más confiable pero con menos capacidades de creación):

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

Opción de servidor simplificada

Para entornos donde el servidor estándar tiene problemas, ofrecemos un servidor simplificado:

{
  "mcpServers": {
    "figma-mcp": {
      "command": "node",
      "args": [
        "/path/to/claude-figma-mcp/simple-mcp-server.js"
      ]
    }
  }
}

Configuración del complemento de Figma (solo enfoque del complemento)

Abra Figma y vaya a Menú → Complementos → Desarrollo → Importar complemento desde manifiesto...
Seleccione el archivo figma-plugin/manifest.json de este repositorio
El complemento ahora debería estar disponible en el menú de complementos de Figma.

Uso

Enfoque del complemento

Inicie el servidor MCP en modo HTTP
Abra Figma y ejecute el complemento de integración Claude MCP
Haga clic en "Conectarse al servidor MCP" en la interfaz de usuario del complemento
En Claude, use la herramienta Figma MCP para interactuar con Figma

Enfoque API

Inicie el servidor MCP con su clave API de Figma
En Claude, use la herramienta Figma MCP para interactuar con los archivos Figma
No es necesario abrir Figma: las operaciones se realizan directamente a través de la API

Herramientas disponibles

Herramientas de enfoque de complemento

create_project : Crea un nuevo proyecto de Figma
create_frame : Crea un nuevo marco/mesa de trabajo
create_rectangle : Crea un elemento rectangular
create_text : Crea un elemento de texto
create_component : Crea componentes de UI predefinidos (botones, entradas, etc.)
create_layout : crea patrones de diseño comunes (encabezados, pies de página, etc.)
create_interaction : Crea conexiones de prototipos interactivos entre elementos
export_frame : Exportar un marco como imagen

Herramientas de enfoque API

get_file : recupera información sobre un archivo Figma
get_file_nodes : Obtener nodos específicos de un archivo Figma
get_comments : recupera comentarios de un archivo Figma
post_comment : Agregar un comentario a un archivo Figma
get_team_components : enumera los componentes de un equipo
export_image : Exporta un marco o nodo como una imagen

Ejemplo de indicaciones de Claude

Ejemplos de enfoques de complementos

Can you create a login screen in Figma? It should have a logo at the top, email and password input fields, and a login button.

I need a dashboard layout in Figma with a header, sidebar navigation, and a main content area with 4 card components showing different statistics.

Ejemplos de enfoque API

Show me the contents of my Figma file with ID abcde12345

Export the frame named 'Homepage' from my Figma file abcde12345 as a PNG

Configuración

El servidor se puede configurar utilizando variables de entorno o argumentos de línea de comandos:

Variables de entorno

PORT : puerto del servidor HTTP (predeterminado: 3000)
WEBSOCKET_PORT : Puerto del servidor WebSocket para la comunicación del complemento Figma (predeterminado: 8080)
FIGMA_API_KEY : Clave API de Figma (necesaria para el enfoque API)

Argumentos de la línea de comandos

--port : puerto del servidor HTTP
--websocket-port : puerto del servidor WebSocket
--figma-api-key : Clave API de Figma
--stdio : Ejecutar en modo stdio (para la integración de Claude Desktop)

Solución de problemas

Problemas de conexión con Claude Desktop

Si tiene problemas con el servidor predeterminado, pruebe la opción de servidor simplificado:

node /path/to/claude-figma-mcp/simple-mcp-server.js

El complemento no se puede conectar al servidor

Cerciorarse:

El servidor MCP se está ejecutando en modo HTTP
Los puertos no están bloqueados por un firewall
El puerto WebSocket (predeterminado: 8080) coincide tanto en la configuración del servidor como en el complemento

Clave API no reconocida

Asegúrate de que tu clave API de Figma sea:

Válido y cuenta con los permisos necesarios
Establecido correctamente en la variable de entorno o en el argumento de la línea de comandos

Contribuyendo

¡Agradecemos sus contribuciones! No dude en enviar una solicitud de incorporación de cambios.

Licencia

Este proyecto está licenciado bajo la licencia MIT: consulte el archivo de LICENCIA para obtener más detalles.

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested