local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

Enables AI assistants to interact with Figma files, providing tools for viewing file content, reading and posting comments, replying to comments, and viewing specific nodes in Figma designs.
Mentioned in a demo link, suggesting integration for sharing visual demonstrations of the MCP server's functionality with Figma files.

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

Configuración con Claude

Descargue e instale la aplicación de escritorio Claude desde claude.ai/download
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 .
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

Reinicie Claude Desktop.
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

Clonar el repositorio
Instalar dependencias:

npm install

Construir el proyecto:

npm run build

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.

You must be authenticated.

A

security – no known vulnerabilities

F

license - not found

A

quality - confirmed to work

Tools

Permite que los asistentes de IA interactúen con archivos de Figma a través del ModelContextProtocol, lo que permite ver, comentar y analizar diseños de Figma directamente en las interfaces de chat.

Related Resources

Reddit Discussion about this server

Figma MCP Server