Convertidor MCP de Figma a React

Este es un servidor de Protocolo de Contexto de Modelo (MCP) que convierte diseños de Figma en componentes de React. Proporciona herramientas para obtener diseños de Figma y generar componentes de React con TypeScript y Tailwind CSS.

Características

• Obtener diseños de Figma usando la API de Figma

• Extraer componentes de los diseños de Figma

• Generar componentes React con TypeScript

• Aplicar clases CSS de Tailwind basadas en estilos de Figma

• Mejore los componentes con funciones de accesibilidad

• Compatibilidad con transportes stdio y SSE

Related MCP server: Figma MCP Server

Prerrequisitos

• Node.js 18 o superior

• Un token de API de Figma

Instalación

1. Clonar el repositorio

2. Instalar dependencias:

npm install

3. Construir el proyecto:

npm run build

Configuración

Debes configurar la variable de entorno FIGMA_API_TOKEN con tu token de API de Figma. Puedes obtener un token de acceso personal en la página de configuración de la cuenta de Figma.

Uso

Ejecutándose como un servidor MCP local

FIGMA_API_TOKEN=your_token_here npm start

O con transporte explícito:

FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=stdio

Ejecutándose como un servidor HTTP

FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=sse

Herramientas disponibles

Herramientas de Figma

• getFigmaProject : Obtener la estructura de un proyecto Figma

• getFigmaComponentNodes : obtiene los nodos de componentes de un archivo Figma

• extractFigmaComponents : Extrae componentes de un archivo Figma

• getFigmaComponentSets : obtiene conjuntos de componentes de un archivo Figma

Herramientas de React

• generateReactComponent : genera un componente React a partir de un nodo Figma

• generateComponentLibrary : genera múltiples componentes React a partir de componentes Figma

• writeComponentsToFiles : Escribe los componentes generados en archivos

• figmaToReactWorkflow : flujo de trabajo completo para convertir diseños de Figma en componentes React

Ejemplo de flujo de trabajo

1. Obtener una clave de archivo de Figma (la cadena después de figma.com/file/ en la URL)

2. Utilice la herramienta figmaToReactWorkflow con la clave de archivo y el directorio de salida

3. La herramienta extraerá componentes, generará código React y guardará los archivos.

Desarrollo

Para el desarrollo, puedes utilizar el modo de vigilancia:

npm run dev

Licencia

ISC