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\"
}"

Related MCP server: MCP Figma to React Converter

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:

1. Clonar el repositorio

2. Instalar dependencias:

npm install

3. Construir:

npm run build

4. 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.