Skip to main content
Não quer configurar isso manualmente? Cole um link para esta página em uma sessão do Devin e peça para ele configurar tudo para você.
1

Conecte o MCP do Figma

Antes de o Devin poder ler seus designs, conecte o Figma MCP com uma conta que tenha acesso aos arquivos que você quer usar.
  1. No Devin, abra Customize > MCPs, escolha Browse marketplace e encontre Figma.
  2. Siga as instruções de instalação e depois abra as configurações de conexão em Customize > MCPs.
  3. Escolha acesso Personal para contas individuais, ou acesso Organization para compartilhar uma conexão com sua organização.
  4. Escolha Connect e autorize o acesso pelo fluxo OAuth do Figma.
Para acesso Organization, use uma conta Figma dedicada com acesso aos arquivos de design da equipe. Com acesso Personal, cada membro conecta sua própria conta.
Depois de conectado, o Devin pode ler os arquivos Figma vinculados aos quais a conta conectada tem acesso — 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
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.