-
security-
license-
qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
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
Related Resources
Related MCP Servers
- AsecurityFlicenseAqualityA 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 -55102
- -securityAlicense-qualityConverts 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 -60MIT License
- -securityFlicense-qualityEnables 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 -1