Figma para React Native MCP

Convierte diseños de Figma en componentes React Native con el MCP de Cursor. Esta herramienta extrae componentes de tus diseños de Figma y genera los componentes React Native correspondientes con la tipificación y el estilo adecuados.

Instalación

Para el desarrollo

Añade a tu eas.json :

{
  "mcpServers": {
    "figma-to-code": {
      "command": "node",
      "args": ["PATH_TO_REPO/build/index.js"],
      "env": {
        "FIGMA_TOKEN": "your_figma_token",
        "FIGMA_FILE": "your_figma_file_id",
        "PROJECT_DIR": "your_project_directory"
      }
    }
  }
}

Para usuarios finales

Instale el servidor MCP en su IDE de Cursor:

npx -y @smithery/cli@latest install @kailashg101/mcp-figma-to-code --client claude --config "{
  \"figmaToken\": \"YOUR_FIGMA_TOKEN\",
  \"figmaFile\": \"YOUR_FIGMA_FILE_ID\",
  \"projectDir\": \"YOUR_PROJECT_DIRECTORY\"
}"

Uso

Después de la instalación, puede utilizar las siguientes indicaciones en Cursor:

Extraer todos los componentes

using the extract_components mcp tool get all components from figma and generate their corresponding react native components in components folder

Extraer componente específico

using the extract_components mcp tool get the [ComponentName] component from figma and generate its corresponding react native component in components folder

Configuración

El objeto de configuración acepta los siguientes parámetros:

{
  "figmaToken": string,    // Your Figma access token
  "figmaFile": string,     // Your Figma file ID (from the URL)
  "projectDir": string     // Where to generate the components
}

Características

Actual:

✅ Extraer componentes de Figma
✅ Generar componentes React Native
✅ Mantener la jerarquía de componentes
✅ Manejar propiedades y tipos de componentes
✅ Admite componentes anidados

Muy pronto:

🚧 Generación de esquemas GraphQL

Desarrollo

Para contribuir o modificar:

Clonar el repositorio
Instalar dependencias:

npm install

Construir:

npm run build

Ejecutar localmente:

npm start

Variables de entorno

Cuando se ejecuta localmente, necesitarás lo siguiente en tu .env :

FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory

Manejo de errores

Errores comunes y soluciones:

"Error al crear el cliente" : comprobar si todas las variables de entorno están configuradas correctamente
"No se encontró la página de componentes" : Asegúrate de que tu archivo de Figma tenga una página llamada "Componentes".
"Error al obtener el archivo de Figma" : Verifique su token de Figma y el ID del archivo.

Licencia

Instituto Tecnológico de Massachusetts (MIT)

Para problemas y solicitudes de funciones, abra un problema en GitHub.

This server cannot be installed

security - not tested

license - not found

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 Native, lo que permite a los usuarios extraer componentes de los diseños de Figma y generar componentes React Native correspondientes con la tipificación y el estilo adecuados.

Related MCP Servers

FigmaMind MCP Server
joao-loker
-
security
F
license
-
quality
Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
Last updated -
TypeScript
Figma MCP Server
sanjeev23oct
A
security
F
license
A
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 -
5
1,092
2
TypeScript
MCP Figma to React Converter
StudentOfJS
-
security
A
license
-
quality
Converts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.
Last updated -
43
TypeScript
MIT License
MCP Design System Bridge
brunonepomuceno
-
security
F
license
-
quality
Enables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.
Last updated -
TypeScript

View all related MCP servers

Figma to React Native MCP