Pular para o conteúdo principal
Detecte desvios de design antes que cheguem à produção. Esta automação é executada em cada PR com alterações de UI — ela captura telas dos componentes atualizados, busca os frames correspondentes no Figma via Figma MCP e publica uma revisão inline no PR com apontamentos específicos sobre diferenças de espaçamento, cor, tipografia e layout.

Use este template

Abra Figma Design Review on PR no Devin e crie a automação com a configuração padrão. Você pode personalizá-la antes de salvar.
Quer um guia prático? Veja o tutorial passo a passo de Figma Design Review on PR.

​
O que esta automação faz

A revisão de design é uma das partes mais difíceis de automatizar na engenharia de frontend. O Figma MCP dá ao Devin acesso programático aos designs que servem como fonte de referência — tokens, especificações de componentes, dimensões de frames — para que ele possa comparar um componente renderizado com o que o designer realmente especificou e fornecer feedback preciso sobre eventuais divergências.

​
Como funciona

Acionador: evento do GitHub — pull.request
  • Evento: github:pull_request
    • Condições:
      • action eq opened
      • repository.full_name eq your-org/your-repo
O que o Devin faz: Inicia uma sessão com todo o contexto do evento, executa o prompt abaixo e, opcionalmente, notifica você em caso de falha.

​
Pré-requisitos

  • Integrações:
  • Servidores MCP:

​
Exemplo de prompt

O template vem com este prompt. Você pode editá-lo depois de clicar em Usar template ou deixá-lo como está.

​
Como configurar

  1. Abra Automations → Templates no Devin.
  2. Clique em Figma Design Review on PR. A página de criação será aberta com este template pré-preenchido.
  3. Conecte todas as integrações necessárias e instale os servidores MCP, caso ainda não tenha feito isso.
  4. Substitua os valores de placeholder nas condições de acionamento (por exemplo, troque your-org/your-repo pelo nome real do seu repo).
  5. Revise o prompt e ajuste-o ao idioma, às convenções e aos guardrails da sua equipe.
  6. Clique em Create automation.
A maioria dos templates de automação inclui limites sugeridos de ACU e de invocação para controlar o custo durante o rollout inicial. Mantenha-os como estão até você ganhar confiança no comportamento da automação e, depois, aumente-os conforme sua carga de trabalho.

​
Quando usar este template

  • Equipes que dependem fortemente de design systems, em que a fidelidade visual é importante
  • Grandes bases de código de frontend com muitos colaboradores e diferentes níveis de senso de design
  • Reduzir gargalos nas revisões de design (em vez de esperar que um designer faça a revisão de cada PR)
  • Garantir consistência visual em todo o produto

​
Ideias de personalização

  • Limitar a repos específicos, diretórios ou padrões de arquivo
  • Configurar tolerâncias de design tokens (pixel-perfect vs. “suficientemente próximo”)
  • Adicionar um ID de arquivo do Figma obrigatório a cada template de PR
  • Combinar com uma regra de lint do sistema de design para bloquear merges em caso de desvios significativos

​
Veja também