Claude Agentes de IA Talk to Figma MCP

Permite que tus agentes de IA lean, analicen y modifiquen diseños de Figma.

Funciona con tus herramientas de agentes favoritas:

• Claude Desktop

• Claude Code

• Cursor

• Antigravity

• Windsurf

• VS Code + GitHub Copilot

• Cline

• Roo Code

👩🏽💻 ¿Para quién es?

Equipos de UX/UI

Automatiza tareas de diseño repetitivas y mantén la consistencia de marca sin esfuerzo manual:

• Auditorías de accesibilidad automatizadas - Detecta y soluciona problemas de contraste en segundos

• Actualizaciones masivas de estilos - Cambia colores, tipografía o espaciado en todo el documento con un solo comando

• Análisis de jerarquía visual - Obtén retroalimentación instantánea sobre la estructura de tu diseño

Desarrolladores

Genera código listo para producción directamente desde los diseños:

• Componentes de React/Vue/SwiftUI - Del diseño al código en un solo paso

• Código con tokens de diseño - Mantén el diseño y el desarrollo sincronizados

• Reduce la fricción en la entrega - Menos iteraciones de ida y vuelta con el equipo de diseño

Ventaja clave: A diferencia del MCP oficial de Figma, que requiere una licencia de Dev Mode, este MCP funciona con cualquier cuenta de Figma (incluso las gratuitas).

Related MCP server: Figma Console MCP Server

💡 Casos de uso reales

Accesibilidad:

"Encuentra todo el texto con una relación de contraste <4.5:1 y sugiere colores que cumplan con WCAG AA"

Cambio de marca:

"Cambia #FF6B6B por #E63946 en todos los botones principales de todo el documento"

Análisis de diseño:

"Analiza la jerarquía visual de esta pantalla y sugiere mejoras basadas en principios de diseño"

Entrega a desarrollo:

"Genera el componente de React para 'CardProduct' incluyendo PropTypes y estilos en módulos CSS"

⚡️ Instalación rápida

Configuración: 5 minutos | Primera automatización: 2 minutos

Requisitos

• Node.js instalado

• Figma Desktop

• Cliente de IA:

  • Claude Desktop

  • Claude Code

  • Cursor

  • Antigravity

  • Windsurf

  • VS Code + GitHub Copilot

  • Cline

  • Roo Code

Paso 1: Instalar e iniciar el websocket

Permite que el agente envíe comandos a Figma.

Abre tu terminal, navega a la carpeta donde deseas instalar la herramienta y ejecuta:

npx claude-talk-to-figma-mcp

💡 Consejo: Este comando es "todo en uno" (clona, instala e inicia). En sesiones posteriores, si ya estás dentro de la carpeta del proyecto your-project/claude-talk-to-figma-mcp, simplemente puedes ejecutar bun run socket.

Paso 2: Instalar el plugin en Figma

Permite que Figma reciba comandos del agente y devuelva respuestas.

En Figma Desktop ve a Menú → Plugins → Development → Import plugin from manifest → dentro de la carpeta donde instalaste el MCP, selecciona src/claude_mcp_plugin/manifest.json

Paso 3: Configura tu herramienta de agente

Permite que el agente utilice las herramientas de lectura y modificación del MCP.

Claude Desktop

Descarga claude-talk-to-figma-mcp.dxt (desde la sección Assets de la última versión) y haz doble clic. Claude se configura automáticamente.

Cursor

1. Abre Cursor Settings → Tools & Integrations

2. Haz clic en "New MCP Server" para abrir el archivo mcp.json

3. Añade esta configuración:

{
  "mcpServers": {
    "ClaudeTalkToFigma": {
      "command": "npx",
      "args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]
    }
  }
}

4. Guarda el archivo y reinicia Cursor

Otras herramientas de agentes

Para otras herramientas (Claude Code, Windsurf, VS Code + GitHub Copilot, Cline, Roo Code), puedes seguir las instrucciones en el capítulo "Configure your Agentic Tool" de la guía de instalación detallada.

Paso 4: Empieza a trabajar

1. Abre el plugin en Figma

2. Copia el ID del canal (código en negrita dentro del cuadro verde)

3. Escribe en el chat: Connect to Figma, channel {tu-ID}

✅ ¡Listo para diseñar con IA!

Sesiones de trabajo posteriores

Para usar el MCP de nuevo en el trabajo diario, no necesitas repetir todo el proceso:

1. Inicia el socket: En la terminal, entra en la carpeta del proyecto your-project/claude-talk-to-figma-mcp y ejecuta bun run socket (o npm run socket).

2. Abre el plugin en Figma: Lo encontrarás en tu lista de plugins recientes.

3. Conecta la IA: Copia el ID del canal y dile a tu agente: Connect to Figma, channel {tu-ID}.

🤖 Multi-Agente y ejecución paralela

Este servidor MCP admite ejecución paralela segura de forma nativa, permitiendo que múltiples agentes de IA (por ejemplo, sub-agentes de Claude Code o enjambres de equipos) trabajen simultáneamente en tu archivo de Figma sin bloquear el plugin. Una cola de comandos integrada procesa las solicitudes secuencialmente en el lado del servidor, evitando que la API de Figma agote el tiempo de espera.

Nota: Debido a que múltiples agentes pueden modificar el documento simultáneamente, confiar en el contexto implícito de la página no es seguro. Como resultado, los comandos con estado como set_current_page están bloqueados. Todos los agentes deben proporcionar explícitamente el parámetro parentId previsto al ejecutar cualquier comando de creación o modificación estructural (por ejemplo, create_frame, create_text).

(¡Un agradecimiento especial a @mmabas77 por diseñar y contribuir con esta función!)

🐳 Alternativa: Usar Docker

Si prefieres Docker o necesitas ejecutar el servidor WebSocket en un entorno de equipo, consulta la guía de instalación de Docker en la documentación detallada de instalación.

🛠️ Capacidades

Análisis de diseño

• Obtener información del documento, selección actual, estilos

• Escanear texto, auditar componentes, exportar recursos

Creación de elementos

• Formas, texto, marcos con control total de estilo

• Clonar, agrupar, organizar elementos

Modificación

• Colores, bordes, esquinas, sombras

• Auto-layout, tipografía avanzada

• Componentes locales y componentes de la biblioteca de equipo

Consulta la lista completa de comandos.

📚 Documentación

• Instalación detallada — Configuración manual, Cursor, Windsurf y otros IDEs

• Comandos disponibles — Referencia completa de herramientas

• Solución de problemas — Errores comunes y cómo solucionarlos

• Contribución — Arquitectura, pruebas, guía de contribución

• Registro de cambios — Historial de versiones

🙏 Créditos

Basado en cursor-talk-to-figma-mcp de Sonny Lazuardi. Adaptado para Claude Desktop y ampliado con nuevas herramientas por Xúlio Zé.

Si quieres conocer todas las contribuciones al proyecto, puedes visitar el capítulo "Contributors" de la guía de contribución.

Licencia MIT

📊 Estado del proyecto

✅ Producción estable - Herramienta lista para el uso diario en equipos de diseño y desarrollo

🚀 En desarrollo activo:

• Soporte completo para variables de Figma

• Exportación mejorada a Tailwind CSS/SwiftUI

¿Necesitas algo específico?

Propón nuevas ideas en GitHub Issues

Tu retroalimentación y contribuciones mantienen vivo el proyecto. ❤️