@aicrustech/mcp-figma-flow/README.pt.md

MCP server otimizado para integração inteligente com Figma. 4 ferramentas essenciais: dados estruturados, layout skeleton, assets otimizados e validação visual pixel-perfect.

# 🎨 FigmaFlow

**🇧🇷 O primeiro MCP feito por brasileiros focado 100% para desenvolvedores do futuro que desenvolvem com LLMs!**

**O MCP mais moderno da atualidade** - Conecte o Figma ao seu editor de código e implemente designs automaticamente em React, Vue, ou qualquer framework!

**Arriscamos dizer que é superior até mesmo ao próprio Figma** em extração e organização de dados para desenvolvimento! 🚀

## 🚀 **Instalação Rápida**

### **1. Obtenha seu Token do Figma**
1. Vá para [Configurações do Figma](https://www.figma.com/settings)
2. Clique em "Personal access tokens"
3. Crie um novo token
4. **Copie e guarde** o token

### **2. Configure no seu Editor**

#### **Cursor:**
Edite `~/.cursor/mcp.json`:
```json
{
  "mcpServers": {
    "MCP Figma Flow": {
      "command": "npx",
      "args": ["-y", "@aicrustech/mcp-figma-flow", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "SEU_TOKEN_AQUI"
      }
    }
  }
}
```

#### **Windsurf:**
Edite `~/.windsurf/mcp.json`:
```json
{
  "mcpServers": {
    "MCP Figma Flow": {
      "command": "npx",
      "args": ["-y", "@aicrustech/mcp-figma-flow", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "SEU_TOKEN_AQUI"
      }
    }
  }
}
```

**⚠️ Substitua `SEU_TOKEN_AQUI` pelo seu token do Figma!**

### **3. Reinicie seu editor**

## 🎯 **Como Usar**

### **📋 Template Perfeito para LLMs:**

```
Crie uma tela [NOME] na pasta [PASTA].

Utilize o FigmaFlow. Não precisa verificar 
nada sobre o projeto, simplesmente faça o que eu pedir.

Simplesmente faça em [TECNOLOGIA] e utilize TODAS 
as possibilidades desse MCP:
- figma_dados para estrutura completa (use o nodeId da URL)
- figma_layout para esqueleto da página  
- figma_captura para validação visual  
- figma_imagens para baixar assets

@[URL_DO_FIGMA]
```

### **🎯 Uso Básico:**

1. **Cole um link do Figma** no chat do seu editor:
   ```
   https://www.figma.com/design/abc123/Meu-Design
   ```

2. **Use o template acima** ou peça diretamente:
   - "Implemente este design em React"
   - "Crie um componente Vue baseado neste layout"
   - "Gere o CSS para esta página"
   - "Extraia as cores e tipografia"

3. **Veja a mágica acontecer!** ✨

## 📖 **Documentação Completa**

- **[Guia de Setup Detalhado](SETUP.md)** - Configuração passo a passo
- **[Configuração para IDEs](IDE-SETUP.md)** - Cursor, Windsurf, Claude Desktop
- **[Roadmap](ROADMAP.md)** - Próximas funcionalidades

## ✨ **Características**

- 🇧🇷 **100% brasileiro** - Primeiro MCP feito por brasileiros
- 🤖 **Focado em LLMs** - Desenvolvido para o futuro da programação
- 🚀 **Mais moderno** - Tecnologia de ponta para extração de dados
- ✅ **Configuração simples e direta**
- ✅ **Documentação completa em português**
- ✅ **Suporte para múltiplos IDEs**
- ✅ **Extração automática de dados do Figma**
- ✅ **Conversão design-to-code precisa**
- 🏆 **Superior** - Melhor organização de dados que o próprio Figma

## 🛠️ **Tools Disponíveis**

### **Guia Prático: Quando Usar Cada Tool**

| **Tool** | **Quando Usar** | **O que Retorna** |
|----------|-------------------|-------------------|
| 📊 `figma_dados` | **FERRAMENTA PRINCIPAL** - Use com nodeId da URL para obter dados específicos | Cores, textos, estilos, componentes completos |
| 🏗️ `figma_layout` | Quando quiser saber **ONDE colocar** cada elemento na tela | Esqueleto da página, posições e hierarquia |
| 🖼️ `figma_imagens` | Para baixar **imagens específicas** (ícones, fotos) | Arquivos SVG/PNG otimizados |
| 📸 `figma_captura` | Para tirar uma **"foto"** da tela e comparar | Screenshot para validação visual |

### **Fluxo Recomendado**

```mermaid
graph TD
    A[🔗 URL do Figma com nodeId] --> B{Que tipo de implementação?}
    B -->|Estrutura da página| C[🏗️ figma_layout]
    B -->|Detalhes completos| D[📊 figma_dados]
    B -->|Assets específicos| E[🖼️ figma_imagens]
    C --> F[💻 Implementar código]
    D --> F
    E --> F
    F --> G[📸 figma_captura]
    G --> H[✅ Validar resultado]
```

## 🐛 **Problemas?**

### **Teste rápido:**
```bash
npx @aicrustech/mcp-figma-flow --version
```

### **Problemas comuns:**
1. **Token inválido?** Verifique se copiou corretamente
2. **Editor não reconhece?** Reinicie após configurar
3. **Erro de permissão?** Verifique se o arquivo do Figma é acessível

**📞 [Abra uma issue](https://github.com/Aicrus/MCP-FigmaFlow/issues) se precisar de ajuda!**

## 🤝 **Contribuições**

Contribuições são bem-vindas! Especialmente:
- Melhorias na documentação
- Suporte para novos frameworks
- Otimizações de performance
- Correções de bugs

## 📝 **Licença**

MIT License - Você pode usar, modificar e distribuir livremente.

---

**⭐ Se este projeto te ajudou, deixe uma estrela!**

**🚀 Desenvolvido pela Aicrus Tech - Equipe brasileira pioneira em MCPs para LLMs**