Integrations

Fetches designs and components from Figma projects using the Figma API and extracts component information for conversion to React.
Generates React components from Figma designs, including support for component extraction and creation of functional React components.
Applies Tailwind CSS classes to generated React components based on the styles defined in the Figma designs.

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

Prerrequisitos

Node.js 18 o superior
Un token de API de Figma

Instalación

Clonar el repositorio
Instalar dependencias:

npm install

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

Obtener una clave de archivo de Figma (la cadena después de figma.com/file/ en la URL)
Utilice la herramienta figmaToReactWorkflow con la clave de archivo y el directorio de salida
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

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

Convierte diseños de Figma en componentes React con TypeScript y Tailwind CSS extrayendo componentes de archivos de Figma y transformándolos en código listo para usar.

MCP Figma to React Converter