Figma

Servidor MCP de Figma

Servidor MCP para interactuar con la API de Figma. Este servidor proporciona un conjunto completo de métodos de la API de Figma a través del Protocolo de Contexto del Modelo. A veces, en archivos de Figma grandes, es posible que tengas que indicarle que use depth = 1 para figma_get_file y luego aumentarlo cuando necesite más.

Herramientas

Este servidor implementa todos los métodos de la API de Figma como herramientas MCP:

Métodos de usuario

1. figma_get_me - Obtener el usuario actual

Métodos de archivo

2. figma_get_file - Obtener un archivo de Figma por clave
3. figma_get_file_nodes - Obtener nodos específicos de un archivo de Figma
4. figma_get_images - Renderizar imágenes de un archivo de Figma
5. figma_get_image_fills - Obtener rellenos de imagen en un archivo de Figma
6. figma_get_file_versions - Obtener el historial de versiones de un archivo de Figma

Métodos de comentarios

7. figma_get_comments - Obtener comentarios en un archivo de Figma
8. figma_post_comment - Añadir un comentario a un archivo de Figma
9. figma_delete_comment - Eliminar un comentario de un archivo de Figma
10. figma_get_comment_reactions - Obtener reacciones de un comentario
11. figma_post_comment_reaction - Añadir una reacción a un comentario
12. figma_delete_comment_reaction - Eliminar una reacción de un comentario

Métodos de equipo y proyecto

13. figma_get_team_projects - Obtener proyectos de un equipo
14. figma_get_project_files - Obtener archivos de un proyecto

Métodos de componentes

15. figma_get_team_components - Obtener componentes de un equipo
16. figma_get_file_components - Obtener componentes de un archivo
17. figma_get_component - Obtener un componente por clave
18. figma_get_team_component_sets - Obtener conjuntos de componentes de un equipo
19. figma_get_file_component_sets - Obtener conjuntos de componentes de un archivo
20. figma_get_component_set - Obtener un conjunto de componentes por clave

Métodos de estilos

21. figma_get_team_styles - Obtener estilos de un equipo
22. figma_get_file_styles - Obtener estilos de un archivo
23. figma_get_style - Obtener un estilo por clave

Métodos de webhooks (API V2)

24. figma_post_webhook - Crear un webhook
25. figma_get_webhook - Obtener un webhook por ID
26. figma_update_webhook - Actualizar un webhook
27. figma_delete_webhook - Eliminar un webhook
28. figma_get_team_webhooks - Obtener webhooks de un equipo

Métodos de análisis de biblioteca

29. figma_get_library_analytics_component_usages - Obtener datos de uso de componentes de análisis de biblioteca
30. figma_get_library_analytics_style_usages - Obtener datos de uso de estilos de análisis de biblioteca
31. figma_get_library_analytics_variable_usages - Obtener datos de uso de variables de análisis de biblioteca

Instalación

Instalación a través de Smithery

Para instalar mcp-figma para Claude Desktop automáticamente a través de Smithery:

npx @smithery/cli@latest install @thirdstrandstudio/mcp-figma --client claude

Requisitos previos

• Node.js (v16 o posterior)
• npm o yarn

Instalación del paquete

# Clone the repository
git clone https://github.com/thirdstrandstudio/mcp-figma.git
cd mcp-figma

# Install dependencies
npm install

# Build the package
npm run build

Configuración

Para usar este servidor MCP, necesitas configurar tu token de la API de Figma. Puedes hacerlo de una de las siguientes tres formas:

1. Variable de entorno

Crea un archivo .env en la raíz del proyecto o establece la variable de entorno directamente:

FIGMA_API_KEY=your_figma_api_key

2. Argumentos de línea de comandos

Al iniciar el servidor, puedes pasar tu token de la API de Figma como argumento de línea de comandos:

# Using the long form
node dist/index.js --figma-token YOUR_FIGMA_TOKEN

# Or using the short form
node dist/index.js -ft YOUR_FIGMA_TOKEN

Uso con Claude Desktop

Añade lo siguiente a tu claude_desktop_config.json:

Usando npx

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@thirdstrandstudio/mcp-figma", "--figma-token", "your_figma_api_key"]
    }
  }
}

Node.js directo (con variable de entorno)

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js"],  
      "env": {
        "FIGMA_API_KEY": "your_figma_api_key"
      }
    }
  }
}

Node.js directo (con argumento de línea de comandos)

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

Reemplaza /path/to/mcp-figma con la ruta real a tu repositorio.

Ejemplos

Obtener un archivo de Figma

// Get a Figma file
const result = await callTool("figma_get_file", { 
  fileKey: "abcXYZ123"
});

Obtener comentarios de un archivo

// Get comments from a file
const comments = await callTool("figma_get_comments", { 
  fileKey: "abcXYZ123",
  as_md: true 
});

Crear un webhook

// Create a webhook
const webhook = await callTool("figma_post_webhook", {
  event_type: "FILE_UPDATE",
  team_id: "12345",
  endpoint: "https://example.com/webhook",
  passcode: "your_passcode_here",
  description: "File update webhook"
});

Desarrollo

# Install dependencies
npm install

# Start the server in development mode
npm start

# Build the server
npm run build

# Run with a Figma API token
npm start -- --figma-token YOUR_FIGMA_TOKEN

Licencia

Este servidor MCP está licenciado bajo la Licencia MIT. Esto significa que eres libre de usar, modificar y distribuir el software, sujeto a los términos y condiciones de la Licencia MIT. Para más detalles, consulta el archivo LICENSE en el repositorio del proyecto.