artubss Figma MCP
Use o servidor Figma MCP para implementação orientada por Figma. Para detalhes de configuração e debug (variáveis de ambiente, config, verificação), veja references/figma-mcp-config.md.
Regras de Integração do Figma MCP
Estas regras definem como traduzir inputs do Figma em código para este projeto e devem ser seguidas em toda mudança orientada por Figma.
Fluxo obrigatório (não pule)
- Execute get_design_context primeiro para buscar a representação estruturada dos nó(s) exato(s).
- Se a resposta for muito grande ou truncada, execute get_metadata para obter o mapa de nós de alto nível e depois busque novamente apenas os nó(s) necessário(s) com get_design_context.
- Execute get_screenshot para obter uma referência visual da variante do nó sendo implementada.
- Somente após ter tanto get_design_context quanto get_screenshot, baixe quaisquer assets necessários e inicie a implementação.
- Traduza o output (normalmente React + Tailwind) para as convenções, estilos e framework deste projeto. Reutilize os tokens de cor, componentes e tipografia do projeto sempre que possível.
- Valide contra o Figma para correspondência visual 1:1 e comportamento antes de marcar como completo.
Regras de implementação
- Trate o output do Figma MCP (React + Tailwind) como uma representação de design e comportamento, não como estilo de código final.
- Substitua classes utilitárias Tailwind pelos utilitários preferidos do projeto/tokens do design-system quando aplicável.
- Reutilize componentes existentes (ex: botões, inputs, tipografia, wrappers de ícones) em vez de duplicar funcionalidade.
- Use o sistema de cores, escala tipográfica e tokens de espaçamento do projeto de forma consistente.
- Respeite os padrões de roteamento, gerenciamento de estado e fetch de dados já adotados no repositório.
- Busque paridade visual 1:1 com o design do Figma. Quando houver conflitos, prefira tokens do design-system e ajuste espaçamento ou tamanhos minimamente para corresponder aos visuais.
- Valide a UI final contra o screenshot do Figma para aparência e comportamento.
Tratamento de assets
- O Servidor Figma MCP fornece um endpoint de assets que pode servir image e SVG assets.
- IMPORTANTE: Se o Servidor Figma MCP retornar uma fonte localhost para uma imagem ou SVG, use essa fonte de imagem ou SVG diretamente.
- IMPORTANTE: NÃO importe/adicione novos pacotes de ícones, todos os assets devem estar no payload do Figma.
- IMPORTANTE: NÃO use ou crie placeholders se uma fonte localhost for fornecida.
Prompting baseado em links
- O servidor é baseado em links: copie o link do frame/layer do Figma e forneça essa URL ao cliente MCP ao pedir ajuda de implementação.
- O cliente não pode navegar pela URL mas extrai o ID do nó do link; sempre certifique-se de que o link aponta para o nó/variante exato que você quer.
Referências
references/figma-mcp-config.md— configuração, verificação, troubleshooting e lembretes de uso baseado em links.references/figma-tools-and-prompts.md— catálogo de ferramentas e padrões de prompt para seleção de frameworks/componentes e busca de metadata.