Servidor MCP de Figma

Estudio Third Strand

insignia de herrería

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.

imagen

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

Related MCP server: MCP GPT Image 1

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.

mcp-figma