Servidor MCP de Figma

Un servidor ModelContextProtocol que permite a los asistentes de IA interactuar con archivos de Figma. Este servidor proporciona herramientas para ver, comentar y analizar diseños de Figma directamente a través de ModelContextProtocol.

Características

• Añade un archivo Figma a tu chat con Claude proporcionando la URL

• Leer y publicar comentarios sobre los archivos de Figma

Related MCP server: Figma MCP Server

Configuración con Claude

1. Descargue e instale la aplicación de escritorio Claude desde claude.ai/download

2. Obtén una clave API de Figma (figma.com -> haz clic en tu nombre en la esquina superior izquierda -> Configuración -> Seguridad). Otorga permisos File content y Comments .

3. Configura a Claude para que use el servidor MCP de Figma. Si este es tu primer servidor MCP, ejecuta lo siguiente en la terminal.

echo '{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "<YOUR_API_KEY>"
      }
    }
  }
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json

Si no es así, copia el bloque figma-mcp a tu claude_desktop_config.json

3. Reinicie Claude Desktop.

4. Busque el ícono del martillo con el número de herramientas disponibles en la interfaz de Claude para confirmar que el servidor está funcionando.

Ejemplo de uso

Inicie un nuevo chat con Claude Desktop y pegue lo siguiente

What's in this figma file?

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

Demostración de un uso más realista

https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3

Configuración de desarrollo

Corriendo con Inspector

Para fines de desarrollo y depuración, puede utilizar la herramienta Inspector de MCP. El Inspector proporciona una interfaz visual para probar y supervisar las interacciones con el servidor MCP.

Visita la documentación del Inspector para obtener instrucciones de configuración detalladas y pautas de uso.

El comando para probar localmente con Inspector es

npx @modelcontextprotocol/inspector npx figma-mcp

Desarrollo local

1. Clonar el repositorio

2. Instalar dependencias:

npm install

3. Construir el proyecto:

npm run build

4. Para desarrollo con reconstrucción automática:

npm run watch

Herramientas disponibles

El servidor proporciona las siguientes herramientas:

• add_figma_file : agrega un archivo Figma a tu contexto proporcionando su URL

• view_node : obtiene una miniatura de un nodo específico en un archivo Figma

• read_comments : Obtener todos los comentarios en un archivo Figma

• post_comment : Publica un comentario en un nodo en un archivo Figma

• reply_to_comment : Responder a un comentario existente en un archivo Figma

Cada herramienta está diseñada para proporcionar una funcionalidad específica para interactuar con archivos Figma a través de la interfaz ModelContextProtocol.