Servidor MCP de Figma

Un servidor de Protocolo de Contexto de Modelo (MCP) que conecta los diseños de Figma con las implementaciones de React. Este servidor permite la conversión con precisión de píxeles de diseños de Figma en aplicaciones de React procesando los datos de los archivos de Figma y proporcionándolos en un formato compatible con React.

🚀 Características

• Integración de la API de Figma : conexión directa a la API de Figma para acceder a los archivos de diseño

• Salida lista para React : procesa datos de Figma en un formato compatible con React

• Procesamiento de estilos : convierte los estilos de Figma en CSS/componentes con estilo

• Gestión de activos : gestiona activos de imagen y componentes SVG

• Procesamiento de diseño : convierte el diseño automático de Figma a Flexbox

• Seguridad de tipos : creado con TypeScript para una verificación de tipos confiable

Related MCP server: FigmaMind MCP Server

🛠️ Herramientas proporcionadas

1. get_file_content :

   • Obtiene y procesa el contenido del archivo Figma

   • Convierte diseño, estilos y componentes.

   • Devuelve la estructura del componente preparada para React GXP1

2. get_node_images :

   • Recupera recursos de imagen de Figma

   • Admite múltiples formatos (PNG, JPG, SVG)

   • Opciones de escalado configurables GXP2

📦 Instalación

1. Clonar el repositorio:

   git clone https://github.com/yourusername/figma-mcp.git cd figma-mcp

2. Instalar dependencias:

   npm install

3. Configura tu token de acceso de Figma:

   cp .env.example .env # Add your Figma access token to .env

Configuración del IDE del cursor

1. Crea el archivo .cursor/mcp.json en la raíz de tu proyecto:

   mkdir -p .cursor touch .cursor/mcp.json

2. Para la configuración del servidor basada en Stdio:

   { "mcpServers": { "figma": { "command": "node", "args": ["d:/<folder>>/figma-mcp/build/index.js"], "env": { "FIGMA_ACCESS_TOKEN": "your figma token" }, "disabled": false, "alwaysAllow": [], "protocol": "stdio" } }

}

🧩 Proyecto de ejemplo

Consulta el directorio raccoon-game para ver un ejemplo completo del uso de este servidor MCP para crear una implementación React con píxeles perfectos de un diseño de Figma.

🔄 Tubería de procesamiento

1. Entrada : datos del archivo Figma a través de la API oficial

2. Procesando :

   • Conversión de estilo (colores, tipografía, efectos)

   • Transformación de diseño (absoluta a Flexbox)

   • Mapeo de jerarquía de componentes

   • Optimización de activos

3. Salida : Datos del componente listo para React

📝 Licencia

Licencia MIT

🤝 Contribuyendo

¡Se agradecen las contribuciones! Por favor, lea nuestras normas de contribución.

🙏 Agradecimientos

• Equipo de API de Figma para la API integral

• Protocolo de contexto de modelo para la especificación MCP

Hecho con ❤️ por [Tu nombre]