Skip to main content

Do Figma ao Código Pixel-Perfect

Conecte o Figma MCP e deixe o Devin extrair tokens de design, construir componentes e verificar visualmente o resultado em relação aos seus mockups.
AuthorCognition
CategoryDesenvolvimento de Funcionalidades
FeaturesMCP
1

Conecte o MCP do Figma

Antes de o Devin poder ler seus designs, ele precisa de acesso aos seus arquivos Figma por meio do Figma MCP. Depois de conectado, o MCP fica disponível para todos na sua organização — qualquer membro da equipe pode vincular arquivos Figma em suas sessões do Devin.
  1. No Figma, clique no ícone do seu perfil > Settings > Security
  2. Em Personal access tokens, clique em Generate new token
  3. Conceda a ele pelo menos permissões de read em File content e Dev resources
  4. Copie o token
  5. No Devin, vá para Settings > MCP Marketplace, encontre Figma e clique em Enable
  6. Cole seu token quando solicitado
Considere criar uma conta Figma dedicada para o Devin (por exemplo, devin@yourcompany.com) com permissão de visualização para seus arquivos de design. Isso evita vincular o MCP a uma conta pessoal e facilita o gerenciamento de acesso conforme sua equipe cresce.
Depois de conectado, o Devin pode ler qualquer arquivo Figma para o qual você criar um link — extraindo hierarquias de componentes, cores, espaçamentos, tipografia e restrições de layout diretamente do design.
2

Compartilhe um link do design e envie um prompt para o Devin

Cole a URL de um arquivo do Figma no seu prompt, junto com o que você quer que seja implementado. Seja específico sobre quais frames devem ser implementados e quais partes da sua codebase devem ser usadas.O que torna um bom prompt de Figma:
  • Inclua o arquivo específico do Figma (não apenas o projeto)
  • Nomeie o frame ou a página exata dentro do arquivo — arquivos grandes podem ter dezenas de páginas
  • Faça referência à sua biblioteca de componentes existente e ao framework CSS
  • Mencione onde ficam os design tokens (por exemplo, tailwind.config.ts, src/tokens/)
  • Especifique o caminho de arquivo de destino para novos componentes
Se você perceber que está repetindo o mesmo contexto em várias sessões (por exemplo, “todas as novas páginas vão em src/app/” ou “nós usamos primitivos do Radix UI”), dê esse feedback ao Devin e ele vai propor salvar isso como Knowledge automaticamente — assim você não precisa repetir na próxima vez.
3

Devin extrai, constrói e verifica

Devin lê o arquivo Figma via MCP, mapeia as propriedades de design para a sua codebase, implementa os componentes e então abre o navegador para verificar visualmente o resultado.
  1. Lê o arquivo Figma — Busca a árvore de componentes, design tokens (cores como #6366F1, espaçamentos como 24px), tipografia (Inter, 18px/28px, 500 weight) e propriedades de auto-layout do frame especificado
  2. Mapeia tokens para o seu sistema — Faz a correspondência entre as cores do Figma e os tokens Tailwind mais próximos (por exemplo, #6366F1 → indigo-500) e usa sua escala de espaçamento em vez de fixar valores em pixels
  3. Constrói os componentes — Cria componentes React que seguem seus padrões existentes, reutilizando componentes compartilhados como <Card> e <Button> quando o design corresponde
  4. Verifica no navegador — Inicia seu servidor de desenvolvimento, navega até localhost:3000/pricing e compara visualmente o resultado com o design do Figma em vários viewports
  5. Captura screenshots e gravações de tela — Devin tira capturas de tela de página inteira em breakpoints de desktop, tablet e mobile, e grava uma captura de tela rolando pela página e interagindo com estados de hover. Ele compartilha isso diretamente na sessão para que você possa verificar o resultado visualmente — sem precisar puxar a branch e rodar localmente.
  6. Compartilha evidências em todos os lugares — Devin anexa as capturas de tela e as gravações ao PR para que os revisores possam ver o resultado visual sem precisar fazer checkout do código. Se você tiver o Slack conectado, Devin também pode publicá-las em um canal para que sua equipe de design revise sem sair do Slack.
  7. Abre um PR — Envia a implementação com evidência visual anexada juntamente com as mudanças de código
feat: Implement pricing page from Figma design

New files:
  src/app/pricing/page.tsx              (pricing page route)
  src/components/pricing/TierCard.tsx   (individual pricing card)
  src/components/pricing/CompareTable.tsx (feature comparison)

Updated:
  tailwind.config.ts                    (added 2 missing color tokens)

Verified at: 1440px, 768px, 375px viewports
4

Revise o PR usando o Devin Review

Quando o Devin abrir o PR, use o Devin Review para revisar a implementação. O Devin Review pode detectar divergências visuais, breakpoints responsivos ausentes e componentes que não seguem seu design system.Se algo precisar de ajuste — espaçamento desalinhado, estado de hover ausente, cores que não combinam — deixe um comentário diretamente no PR e o Devin cuidará disso. Não é necessário abrir uma nova sessão ou escrever um prompt separado.