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: mcp-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.