Figma to React Native MCP

Figma to React Native MCP

Converta designs do Figma em componentes React Native usando o MCP do Cursor. Esta ferramenta extrai componentes dos seus designs do Figma e gera componentes React Native correspondentes com tipagem e estilos adequados.

Instalação

Para Desenvolvimento

Adicione ao seu 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 Usuários Finais

Instale o servidor MCP no seu IDE 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

Após a instalação, você pode usar os seguintes prompts no Cursor:

Extrair Todos os Componentes

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

Extrair 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

Configuração

O objeto de configuração aceita os seguintes parâmetros:

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

Recursos

Atuais:

• ✅ Extrair componentes do Figma
• ✅ Gerar componentes React Native
• ✅ Manter a hierarquia de componentes
• ✅ Tratar props e tipos de componentes
• ✅ Suportar componentes aninhados

Em breve:

• 🚧 Geração de schema GraphQL

Desenvolvimento

Para contribuir ou modificar:

1. Clone o repositório
2. Instale as dependências:

npm install

3. Compile:

npm run build

4. Execute localmente:

npm start

Variáveis de Ambiente

Ao executar localmente, você precisará delas no seu .env:

FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory

Tratamento de Erros

Erros comuns e soluções:

• "Failed to create client": Verifique se todas as variáveis de ambiente estão configuradas corretamente
• "Components page not found": Garanta que seu arquivo do Figma tenha uma página chamada "Components"
• "Failed to fetch Figma file": Verifique seu token do Figma e o ID do arquivo

Licença

MIT

---

Para problemas e solicitações de recursos, abra uma issue no GitHub.