mcp-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 de Modelo. En ocasiones, con archivos Figma grandes, es posible que deba indicarle que use profundidad = 1 para figma_get_file y que la aumente cuando sea necesario.

Herramientas

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

Métodos de usuario

figma_get_me - Obtener el usuario actual

Métodos de archivo

figma_get_file - Obtener un archivo Figma por clave
figma_get_file_nodes : obtiene nodos específicos de un archivo Figma
figma_get_images : renderiza imágenes desde un archivo Figma
figma_get_image_fills : obtiene rellenos de imagen en un archivo Figma
figma_get_file_versions : obtiene el historial de versiones de un archivo Figma

Métodos de comentarios

figma_get_comments - Obtener comentarios en un archivo Figma
figma_post_comment - Agregar un comentario a un archivo Figma
figma_delete_comment : elimina un comentario de un archivo Figma
figma_get_comment_reactions - Obtener reacciones a un comentario
figma_post_comment_reaction - Agregar una reacción a un comentario
figma_delete_comment_reaction - Eliminar una reacción de un comentario

Métodos de equipo y de proyecto

figma_get_team_projects - Obtener proyectos en un equipo
figma_get_project_files - Obtener archivos en un proyecto

Métodos de componentes

figma_get_team_components - Obtener componentes en un equipo
figma_get_file_components - Obtener componentes en un archivo
figma_get_component - Obtener un componente por clave
figma_get_team_component_sets - Obtener conjuntos de componentes en un equipo
figma_get_file_component_sets - Obtener conjuntos de componentes en un archivo
figma_get_component_set - Obtener un conjunto de componentes por clave

Métodos de estilo

figma_get_team_styles - Obtener estilos en un equipo
figma_get_file_styles - Obtener estilos en un archivo
figma_get_style - Obtener un estilo por clave

Métodos de webhook (API V2)

figma_post_webhook - Crear un webhook
figma_get_webhook - Obtener un webhook por ID
figma_update_webhook - Actualizar un webhook
figma_delete_webhook - Eliminar un webhook
figma_get_team_webhooks - Obtener webhooks para un equipo

Métodos de análisis de bibliotecas

figma_get_library_analytics_component_usages : obtiene datos de uso del componente de análisis de la biblioteca
figma_get_library_analytics_style_usages : Obtener datos de uso del estilo de análisis de la biblioteca
figma_get_library_analytics_variable_usages : obtiene datos de uso de variables de análisis de la biblioteca

Instalación

Instalación mediante herrería

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

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

Prerrequisitos

Node.js (v16 o posterior)
npm o hilo

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, debes configurar tu token de API de Figma. Puedes hacerlo de tres maneras:

1. Variable de entorno

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

FIGMA_API_KEY=your_figma_api_key

2. Argumentos de la línea de comandos

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

# 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

Agregue lo siguiente a su 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"]
    }
  }
}

Reemplace /path/to/mcp-figma con la ruta real a su repositorio.

Ejemplos

Obtener un archivo 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 cuenta con la licencia MIT. Esto significa que puede usar, modificar y distribuir el software libremente, sujeto a los términos y condiciones de la licencia MIT. Para más detalles, consulte el archivo de LICENCIA en el repositorio del proyecto.