@aicrustech/mcp-figma-flow/README.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 diretamente ao seu editor de código com IA e implemente designs automaticamente em React, Vue, ou qualquer framework. Sem screenshots, com dados precisos de layout, cores e tipografia.

**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. Acesse [Figma Settings](https://www.figma.com/settings)
2. Clique em "Personal access tokens"
3. Crie um novo token
4. **Copie 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
- figma_captura para validação visual  
- figma_imagens para baixar assets
- figma_frames se necessário

@[URL_DO_FIGMA]
```

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

1. **Cole um link do Figma** no chat:
   ```
   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!** ✨

## ✨ **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
- ✅ **Sem screenshots** - dados diretos da API do Figma
- ✅ **Layout preciso** - dimensões, espaçamentos, alinhamentos
- ✅ **Cores exatas** - códigos hex, gradientes, sombras
- ✅ **Tipografia completa** - fonts, tamanhos, line-heights
- ✅ **Imagens automáticas** - download e referência de assets
- ✅ **Componentes Figma** - suporte a variantes e propriedades
- 🏆 **Superior** - Melhor organização de dados que o próprio Figma

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

| **Tool** | **Função** | **Uso** |
|----------|------------|---------|
| `figma_dados` | 📊 Extrai estrutura completa do design | Hierarquia, layout, cores, tipografia |
| `figma_imagens` | 🖼️ Baixa assets otimizados | SVG para ícones, PNG para fotos |
| `figma_captura` | 📸 Captura screenshots para validação | Comparação pixel-perfect |
| `figma_frames` | 📋 Lista frames disponíveis | Encontrar IDs corretos |

## 🛠️ **IDEs Suportados**

- **Cursor** (`~/.cursor/mcp.json`)
- **Windsurf** (`~/.windsurf/mcp.json`)
- **Claude Desktop** (`~/Library/Application Support/Claude/claude_desktop_config.json`)
- Qualquer editor com suporte MCP

## 🐛 **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!**

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

- **[Configuração para IDEs](IDE-SETUP.md)** - Guia detalhado para cada editor
- **[Setup de Desenvolvimento](SETUP.md)** - Para contribuidores
- **[Como Distribuir](DISTRIBUICAO.md)** - Para times e organizações
- **[Guia de Migração](MIGRATION.md)** - ⚠️ **Importante**: Migração da v2.2.0

## 🤝 **Contribuições**

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

## 📝 **Licença**

MIT License - Use, modifique e distribua livremente.

---

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

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