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

license - permissive license

quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

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.

Related MCP Servers

Figma MCP Server
GLips
-
security
A
license
-
quality
Enables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
Last updated -
5
60,738
8,062
TypeScript
MIT License
Figma to React Native MCP
kailashAppDev
-
security
F
license
-
quality
Converts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
Last updated -
111
1
TypeScript
Figma MCP Server
sanjeev23oct
-
security
F
license
-
quality
A bridge between Figma designs and React implementations that enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data into React-friendly format.
Last updated -
997
1
TypeScript
Figma MCP Server
rlagudals95
-
security
A
license
-
quality
Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
Last updated -
60,738
TypeScript
MIT License

View all related MCP servers

MCP Figma to React Converter