Repolode
Enviar
southleft

southleft/figma-console-mcp

Servidor MCP que conecta asistentes de IA con Figma para extraer tokens de diseño, crear y editar diseños, y comprobar la paridad entre diseño y código y la accesibilidad.

Alternativa open source a:Figma Dev Mode

Ver en GitHubSitio web
Estrellas
3,131
Forks
286
Issues abiertos
9
Último commit
hace 8 días

¿Qué es?

Figma Console MCP es un servidor Model Context Protocol que permite a clientes de IA como Claude, Cursor y Codex acceder a archivos de Figma. Lee variables, componentes, estilos y la estructura de los archivos, y también puede escribir en Figma: crear frames y componentes, gestionar variables y modos, y editar texto, rellenos y layouts mediante un plugin Desktop Bridge que se ejecuta en Figma Desktop.

Además de las operaciones básicas de lectura y escritura, el proyecto cubre tareas relacionadas con sistemas de diseño. Puede sincronizar variables de Figma con DTCG JSON y varios formatos de tokens en ambos sentidos, comprobar un componente de Figma frente a su implementación en código, ejecutar comprobaciones de accesibilidad al estilo de WCAG y generar documentación de componentes. Las herramientas devuelven datos estructurados, como tokens, variantes y bindings, para que el código generado siga el stack propio del equipo.

El acceso completo de escritura requiere la configuración NPX o Local Git, que se ejecuta en Node.js y ofrece 130 herramientas. Cloud Mode permite que clientes web de IA como Claude.ai se conecten a un plugin en ejecución sin Node.js, con 105 herramientas. El endpoint Remote SSE es de solo lectura.

Funciones clave

  • 01Lee variables, componentes, estilos y la estructura de archivos de Figma para que los use la IA
  • 02Crea y edita frames, componentes, texto, rellenos y auto layout en Figma
  • 03Sincroniza tokens de diseño en ambos sentidos con DTCG JSON, CSS, Tailwind y otros formatos
  • 04Compara componentes de Figma con implementaciones en código e informa de las diferencias
  • 05Ejecuta comprobaciones de accesibilidad basadas en WCAG y genera informes de puntuación de accesibilidad para componentes
  • 06Funciona con Claude Code, Cursor, Windsurf, Claude Desktop, Codex y Gemini CLI

Casos de uso

  • Permitir que un asistente de IA genere mockups de UI o componentes directamente en un archivo de Figma
  • Mantener sincronizadas las variables de Figma y los tokens de diseño del código en todo el equipo
  • Comprobar si un componente implementado en código coincide con su diseño de Figma antes de aprobarlo
  • Auditar un sistema de diseño para detectar problemas de nomenclatura, tokens y accesibilidad

Inicio rápido

  1. 1

    Obtén un token de acceso personal de Figma en la ayuda de Figma

  2. 2

    Añade el servidor a tu cliente MCP con npx (ejemplo con Claude Code)

    claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest
  3. 3

    Importa el manifiesto del plugin Desktop Bridge en Figma Desktop y ejecútalo

  4. 4

    Reinicia tu cliente MCP para cargar la configuración

Antes de usarlo

  • Para acceder a todas las funciones, necesitas Figma Desktop y una conexión con el plugin Desktop Bridge.
  • El modo Remote SSE es de solo lectura y no permite crear ni modificar diseños.
  • Algunas funciones, como variables, requieren un plan Figma Enterprise.

En colecciones

Frameworks y apps de agentes de IA open sourceServidores MCP

Temas

#figma#mcp#design-system#design-tokens#ai-agent#accessibility#typescript#ai#design-systems#figma-api

Preguntas frecuentes

¿Qué es figma-console-mcp?
Servidor MCP que conecta asistentes de IA con Figma para extraer tokens de diseño, crear y editar diseños, y comprobar la paridad entre diseño y código y la accesibilidad. Figma Console MCP es un servidor Model Context Protocol que permite a clientes de IA como Claude, Cursor y Codex acceder a archivos de Figma. Lee variables, componentes, estilos y la estructura de los archivos, y también puede escribir en Figma: crear frames y componentes, gestionar variables y modos, y editar texto, rellenos y layouts mediante un plugin Desktop Bridge que se ejecuta en Figma Desktop.
¿figma-console-mcp es gratuito? ¿Qué licencia tiene?
figma-console-mcp es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿figma-console-mcp sigue mantenido?
Mantenimiento activo. El último commit de figma-console-mcp fue el 29 oct 2026.
¿Para qué puedo usar figma-console-mcp?
Permitir que un asistente de IA genere mockups de UI o componentes directamente en un archivo de Figma Mantener sincronizadas las variables de Figma y los tokens de diseño del código en todo el equipo Comprobar si un componente implementado en código coincide con su diseño de Figma antes de aprobarlo Auditar un sistema de diseño para detectar problemas de nomenclatura, tokens y accesibilidad
¿Cómo se instala figma-console-mcp?
Obtén un token de acceso personal de Figma en la ayuda de Figma Añade el servidor a tu cliente MCP con npx (ejemplo con Claude Code): claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN_HERE -e ENABLE_MCP_APPS=true -- npx -y figma-console-mcp@latest Importa el manifiesto del plugin Desktop Bridge en Figma Desktop y ejecútalo Reinicia tu cliente MCP para cargar la configuración
¿Dónde consigo figma-console-mcp?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/southleft/figma-console-mcp

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados