Repolode
Enviar
GLips

GLips/Figma-Context-MCP

Servidor MCP que da a agentes de programación con IA como Cursor acceso a la estructura y los estilos de archivos de Figma para implementar diseños.

Ver en GitHubSitio web
Estrellas
16,040
Forks
1,266
Issues abiertos
28
Último commit
hace 6 días

¿Qué es?

Framelink MCP for Figma es un servidor Model Context Protocol que conecta herramientas de programación con IA, como Cursor, con la API de Figma. El usuario pega en el chat un enlace a un archivo, frame o grupo de Figma, y el agente obtiene los metadatos pertinentes de estructura y estilos para escribir el código correspondiente.

Antes de enviar al modelo las respuestas de la API de Figma, el servidor las simplifica y transforma para transmitir solo la información más relevante sobre la estructura y los estilos. El objetivo declarado del proyecto es reducir el contexto que se proporciona al modelo, lo que permite generar código más preciso que con métodos basados en capturas de pantalla pegadas.

La configuración requiere un token de acceso personal de Figma y una entrada en la configuración del cliente MCP que ejecute el paquete figma-developer-mcp mediante npx, con un transporte stdio o basado en puertos.

Funciones clave

  • 01Obtiene los metadatos de estructura y estilos de un archivo, frame o grupo de Figma a partir de un enlace pegado.
  • 02Simplifica las respuestas de la API de Figma para que el modelo reciba solo la información de diseño más relevante.
  • 03Se ejecuta como servidor MCP iniciado con npx y configurado mediante un archivo JSON.
  • 04Acepta el token de acceso de Figma mediante una opción de línea de comandos o la variable de entorno FIGMA_API_KEY.

Casos de uso

  • Implementar un diseño de Figma como código frontend en Cursor, usando el contexto de estructura en lugar de capturas de pantalla.
  • Permitir que un agente de IA lea la estructura de los componentes y el espaciado mientras crea interfaces en cualquier framework.
  • Crear prototipos de pantallas rápidamente al proporcionar al agente frames existentes de Figma.

Inicio rápido

  1. 1

    Crea un token de acceso de Figma siguiendo las instrucciones enlazadas en el README

  2. 2

    Añade la configuración del servidor MCP al archivo de configuración de MCP de tu editor (macOS/Linux) con tu clave de API

    npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio
  3. 3

    Reinicia tu cliente de IA y pega en el chat el enlace a un archivo, marco o grupo de Figma

Antes de usarlo

  • Se necesita un token de acceso de Figma para que el servidor pueda obtener datos de diseño.
  • Está diseñado específicamente para Cursor, por lo que otros clientes de IA podrían requerir configuración adicional.

Temas

#figma#mcp#ai-agent#cursor#frontend#design-to-code#typescript#ai

Preguntas frecuentes

¿Qué es Figma-Context-MCP?
Servidor MCP que da a agentes de programación con IA como Cursor acceso a la estructura y los estilos de archivos de Figma para implementar diseños. Framelink MCP for Figma es un servidor Model Context Protocol que conecta herramientas de programación con IA, como Cursor, con la API de Figma. El usuario pega en el chat un enlace a un archivo, frame o grupo de Figma, y el agente obtiene los metadatos pertinentes de estructura y estilos para escribir el código correspondiente.
¿Figma-Context-MCP es gratuito? ¿Qué licencia tiene?
Figma-Context-MCP es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿Figma-Context-MCP sigue mantenido?
Mantenimiento activo. El último commit de Figma-Context-MCP fue el 16 oct 2026.
¿Para qué puedo usar Figma-Context-MCP?
Implementar un diseño de Figma como código frontend en Cursor, usando el contexto de estructura en lugar de capturas de pantalla. Permitir que un agente de IA lea la estructura de los componentes y el espaciado mientras crea interfaces en cualquier framework. Crear prototipos de pantallas rápidamente al proporcionar al agente frames existentes de Figma.
¿Cómo se instala Figma-Context-MCP?
Crea un token de acceso de Figma siguiendo las instrucciones enlazadas en el README Añade la configuración del servidor MCP al archivo de configuración de MCP de tu editor (macOS/Linux) con tu clave de API: npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio Reinicia tu cliente de IA y pega en el chat el enlace a un archivo, marco o grupo de Figma
¿Dónde consigo Figma-Context-MCP?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/GLips/Figma-Context-MCP

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

Proyectos relacionados