Claude Agentes de IA hablan con Figma MCP

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

Instala desde este repositorio Git

Este fork está empaquetado para Codex, Claude Desktop, Claude Code, Cursor, Windsurf, Cline, Roo Code y cualquier cliente compatible con servidores MCP stdio locales.

Codex:

codex plugin marketplace add Desrid/desrid-html-to-figma --ref main
codex plugin add desrid-html-to-figma@desrid-html-to-figma

Cliente MCP genérico: usa el .mcp.json raíz o configura el comando desde GitHub:

{
  "mcpServers": {
    "desrid_html_to_figma": {
      "command": "npx",
      "args": [
        "--yes",
        "--package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz",
        "desrid-html-to-figma-server"
      ]
    }
  }
}

Claude Desktop: abre desrid-html-to-figma.dxt desde GitHub Releases.

Todos los clientes también necesitan el plugin local de desarrollo de Figma y el puente WebSocket. Consulta la guía de instalación para múltiples agentes o la guía de Codex.

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 coherencia de marca sin esfuerzo manual:

• Auditorías de accesibilidad automatizadas: detecta y corrige problemas de contraste en segundos

• Actualizaciones de estilos por lotes: cambia colores, tipografía o espaciado en todo el documento con un solo comando

• Análisis de jerarquía visual: recibe comentarios instantáneos sobre la estructura de tu diseño

Desarrolladores

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

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

• Código con design tokens: mantén el diseño y el desarrollo sincronizados

• Menos fricción en el traspaso: reduce las iteraciones de ida y vuelta con el equipo de diseño

Ventaja principal: 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).

💡 Casos de uso reales

Accesibilidad:

"Encuentra todos los textos con una relación de contraste inferior a 4.5:1 y sugiere colores que cumplan con WCAG AA"

Rebranding:

"Cambia #FF6B6B a #E63946 en todos los botones primarios del documento"

Análisis de diseño:

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

Entrega al desarrollo:

"Genera el componente de React para 'CardProduct' incluyendo PropTypes y estilos en CSS modules"

⚡️ 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: Instala y arranca el WebSocket

Permite que el agente envíe comandos a Figma.

Abre tu terminal, navega hasta la carpeta donde quieras instalar la herramienta y ejecuta:

npx --yes --package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz desrid-html-to-figma

💡 Consejo: este comando descarga el paquete de GitHub Releases con su versión e inicia el puente local. Si tienes un clon, ejecuta npm run socket en sesiones posteriores.

Paso 2: Instala el plugin en Figma

Permite que Figma reciba comandos del agente y devuelva respuestas.

En Figma Desktop, ve a Menú → Plugins → Desarrollo → Importar plugin desde manifest y, 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 use las herramientas de lectura y modificación del MCP.

Claude Desktop

Descarga desrid-html-to-figma.dxt desde 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": {
    "desrid_html_to_figma": {
      "command": "npx",
      "args": ["--yes", "--package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz", "desrid-html-to-figma-server"]
    }
  }
}

4. Guarda el archivo y reinicia Cursor

Otras herramientas de agente

Para otras herramientas (Claude Code, Windsurf, VS Code + GitHub Copilot, Cline, Roo Code), puedes seguir las instrucciones de la sección "Configura tu herramienta de agente" en la guía de instalación detallada.

Paso 4: Empieza a trabajar

1. Abre el plugin en Figma

2. Copia el ID del canal (en negrita, dentro de la caja verde)

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

✅ ¡Listo para diseñar con IA!

Sesiones de trabajo posteriores

Para volver a usar el MCP en el trabajo diario, no es necesario repetir todo el proceso:

1. Inicia el socket: en la terminal, entra en your-project/desrid-html-to-figma y ejecuta Node como socket.

2. Abre el plugin en Figma: lo encontrarás en la lista de plugins recientes.

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

🤖 Ejecución multiagente y en paralelo

Este servidor MCP admite ejecución segura en paralelo sin configuracions, de modo que varios agentes de IA (por ejemplo, subagentes de Claude Code o swarms de equipo) pueden trabajar simultáneamente en tu archivo de Figma sin bloquear el plugin. Una cola de comandos integrada procesa las solicitudes de forma secuencial en el servidor, lo que evita que la API de Figma pueda superar el tiempo de espera.

Nota: Como varios agentes pueden modificar el documento a la vez, no es seguro confiar en el contexto implícito de página. Por lo tanto, los comandos con estado como set_current_page están bloqueados. Todos los agentes deben proporcionar explícitamente el parámetro parentId previsto cuando ejecuten 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 con Docker en la documentación detallada.

🛠️ Capacidades

Análisis de diseño

• Obtén información del documento, la selección actual y los estilos

• Escanea texto, audita componentes y exporta assets

Creación de elementos

• Formas, texto y frames con control total del estilo

• Clonar, agrupar y organizar elementos

Modificación

• Colores, bordes, esquinas y sombras

• Auto-layout y tipografía avanzada

• Componentes locales y componentes de bibliotecas del equipo

Consulta la lista completa de comandos.

📚 Documentación

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

• Comandos disponibles — Referencia completa de herramientas

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

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

• Historial de cambios — Historial de versiones

🙏 Créditos

Está 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 "Colaboradores" de la guía de contribución.

MIT License

📊 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

¿Quieres algo específico?

Propón nuevas funcionalidades en GitHub Issues)

Tus comentarios y contribuciones mantienen el proyecto vivo. ❤️