figma-mcp by eldersongamma - MCP Server

MCP Figma Bridge 🎨→⚛️

Ponte entre Figma e React usando MCP (Model Context Protocol) para gerar automaticamente componentes React baseados em designs do Figma.

🚀 Início Rápido (5 minutos)

# Clone o repositório
git clone https://github.com/seu-usuario/mcp-fig.git
cd mcp-fig

# Instale as dependências
npm install

# Configure o .env (veja docs/03-ENV_TEMPLATE.md)
cp .env.example .env
# Edite .env e adicione seu token do Figma

# Inicie o servidor
npm start

Pronto! O servidor estará rodando em http://localhost:3331 🎉

📚 Documentação

🎯 Comece por aqui

Ordem	Descrição	Tempo
1️⃣	Instalação e primeiro uso	5 min
2️⃣	Guia detalhado passo a passo	15 min
3️⃣	Como configurar variáveis de ambiente	2 min

📖 Referência

Documento	Descrição
	Organização de arquivos e pastas
	Documentação técnica completa (700+ linhas)
	Histórico de versões e mudanças

🎯 O que é este projeto?

Este projeto permite que você:

✅ Consulte designs do Figma através de uma API REST
✅ Gere componentes React automaticamente usando IA
✅ Use Ant Design - 100% fiel ao design original
✅ Economize tempo - De 2-4 horas para 5-15 minutos

Como funciona?

Figma Design → MCP Server → Cursor IDE + IA → Componente React

💡 Exemplo de Uso

1. Listar páginas de um arquivo Figma

curl http://localhost:3331/figma/SEU_FILE_ID/pages

2. Gerar componente via Cursor IDE

/use figma
/generate componente React baseado no design do Figma
fileId=SEU_FILE_ID node-id=NODE_ID

3. Usar o componente gerado

import DetailsForm from "./DetailsForm";

function App() {
  const handleSubmit = (data) => {
    console.log("Dados:", data);
  };

  return <DetailsForm onSubmit={handleSubmit} />;
}

🛠️ Tecnologias

Node.js + Express - Servidor HTTP
Figma API - Acesso aos designs
MCP Protocol - Comunicação padronizada
React + TypeScript - Componentes gerados
Ant Design - UI Kit/Design System

📡 API Endpoints

Endpoint	Descrição
`GET /figma/:fileId/pages`	Lista todas as páginas do arquivo
`GET /figma/:fileId/nodes/:nodeId`	Busca um componente específico
`GET /figma/:fileId`	Retorna o arquivo completo

Veja a para mais detalhes.

📂 Estrutura do Projeto

mcp-fig/
├── 📖 docs/                        # Documentação completa
│   ├── 01-GETTING_STARTED.md      # Início rápido
│   ├── 02-SETUP.md                # Setup detalhado
│   ├── 03-ENV_TEMPLATE.md         # Configuração
│   ├── 04-PROJECT_STRUCTURE.md    # Estrutura
│   ├── 05-ARQUITETURA.md          # Docs técnicas
│   └── 06-CHANGELOG.md            # Versões
│
├── 💻 server.js                   # Servidor MCP
├── ⚛️ DetailsForm.tsx             # Componente exemplo
├── 📝 App.example.tsx             # Como usar
│
├── ⚙️ .env.example                # Template de config
├── 🚫 .gitignore                  # Proteção
├── 📜 LICENSE                     # MIT
└── 📦 package.json                # Dependências

🎨 Componente de Exemplo

O projeto inclui DetailsForm.tsx - um formulário completo de "Detalhes da Carga" gerado do Figma.

Features:

✅ 7 seções organizadas
✅ Tabela editável para documentos
✅ Validação de formulário
✅ Layout responsivo
✅ TypeScript completo
✅ Ant Design components

Veja para exemplo de uso.

🔧 Configuração no Cursor IDE

Adicione ao arquivo ~/.cursor/mcp.json:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/caminho/completo/para/mcp-fig/server.js"],
      "env": {
        "FIGMA_TOKEN": "seu_token_aqui",
        "PORT": "3331"
      }
    }
  }
}

Importante: Use o caminho ABSOLUTO para o server.js

Veja para instruções detalhadas.

🚨 Troubleshooting

Porta em uso

lsof -ti:3331 | xargs kill -9
npm start

Erro de autenticação

Verifique se o token está correto no .env
Gere um novo token no Figma

Módulos não encontrados

npm install

Mais soluções em:

📈 Roadmap

Veja o para mais detalhes.

🤝 Contribuindo

Contribuições são bem-vindas! Sinta-se livre para:

🐛 Reportar bugs via Issues
💡 Sugerir novas features
🔧 Enviar Pull Requests
📖 Melhorar a documentação

Veja para mais informações.

🔒 Segurança

⚠️ Importante:

Nunca commite o arquivo .env com seu token
Este servidor é apenas para desenvolvimento local
Não exponha o servidor para a internet
Para produção, gere os componentes e commite apenas o código

📝 Licença

MIT License - Veja para mais detalhes.

👨‍💻 Autor

Criado com ❤️ por Elderson Gamma

📞 Suporte

Documentação:
Issues: GitHub Issues
Discussões: GitHub Discussions

⭐ Mostre seu apoio

Se este projeto foi útil, considere dar uma ⭐ no GitHub!