Figma

Figma MCP Server

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 de Figma a tu chat con Claude proporcionando la URL
• Lee y publica comentarios en archivos de Figma

Configuración con Claude

Instalación mediante Smithery

Para instalar Figma MCP Server para Claude Desktop automáticamente mediante Smithery:

npx -y @smithery/cli install @MatthewDailey/figma-mcp --client claude

1. Descarga e instala la aplicación de escritorio de Claude desde claude.ai/download

2. Obtén una clave de API de Figma (figma.com -> haz clic en tu nombre arriba a la izquierda -> configuración -> Seguridad). Concede los alcances File content y Comments.

3. Configura Claude para usar 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 lo es, copia el bloque figma-mcp en tu claude_desktop_config.json

3. Reinicia Claude Desktop.

4. Busca el icono de martillo con el número de herramientas disponibles en la interfaz de Claude para confirmar que el servidor está en ejecución.

Ejemplo de uso

Inicia un nuevo chat con Claude Desktop y pega 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

Ejecución con Inspector

Para fines de desarrollo y depuración, puedes usar la herramienta MCP Inspector. El Inspector proporciona una interfaz visual para probar y monitorear las interacciones del servidor MCP.

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

El comando para probar localmente con Inspector es

npx @modelcontextprotocol/inspector npx figma-mcp

Desarrollo local

1. Clona el repositorio
2. Instala las dependencias:

npm install

3. Compila el proyecto:

npm run build

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

npm run watch

Herramientas disponibles

El servidor proporciona las siguientes herramientas:

• add_figma_file: Añade un archivo de Figma a tu contexto proporcionando su URL
• view_node: Obtén una miniatura para un nodo específico en un archivo de Figma
• read_comments: Obtén todos los comentarios de un archivo de Figma
• post_comment: Publica un comentario en un nodo de un archivo de Figma
• reply_to_comment: Responde a un comentario existente en un archivo de Figma

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