Regressão visual com IA: a combinação de testes automatizados, AI e Figma que acelerou validações

Escalar qualidade em produtos digitais é um desafio, especialmente quando existem múltiplas plataformas, fluxos integrados e times distribuídos trabalhando simultaneamente. Em Local Commerce, área que atua no desenvolvimento do app que conecta consumidores à restaurantes, mercados e farmácias no iFood, enfrentávamos essa questão de frente: como garantir que cada nova feature ou integração não quebrasse a experiência que o time de design tinha proposto?

A resposta tradicional: testes de regressão visual baseados apenas em telas funcionavam, mas tinha limitações claras. Falsos positivos aos montes, custo alto de manutenção nos testes automatizados, mudança de telas constantes com ajustes de código, e pior: com chances de falhas humanas durante o processo de validação da interface do app com o Figma. Por exemplo, é como tentar validar se uma casa ficou igual ao projeto arquitetônico comparando fotos antigas com novas o tempo inteiro; tecnicamente possível, mas pouco preciso e muito trabalhoso.

Foi aí que o time de Engenharia de Qualidade de Local Commerce decidiu arriscar: e se a gente usasse a inteligência artificial para ler o design prototipado no Figma e a interface do app? E através disto, comparassem ambos de forma semântica e não visual? Vem aí o spoiler: a abordagem funcionou! E está mudando a forma que pensamos em testes visuais em escala. Confira neste artigo todos os detalhes do processo, metodologia e muito mais!

O Problema: regressão visual tradicional não escala!

Antes de falar da solução, vale entender os porquês do modelo antigo ter chegado ao limite.

Comparação pixel a pixel ou a olho nu parece precisa, mas é frágil. Qualquer mudança mínima, seja uma fonte que renderiza 1px diferente entre ambientes, uma animação em progresso ou até delay no carregamento de páginas disparam alertas. O resultado? Times ignorando avisos legítimos porque aprenderam que “sempre pode ser falso positivo”.

Fluxos de telas no Figma apresentando o futuro e versões do app refletindo experiências antigas que ainda não foram atualizadas acabam virando o padrão, não exceção. Manter referência das telas atualizadas de acordo com a experiência atual que o app está exibindo exige um processo e uma disciplina de atualizações constantes.

A solução: IA como ponte entre Figma e aplicação

A ideia central é simples: usar IA para ler tanto o design da tela no Figma quanto a aplicação; converter ambos num formato estruturado comparável; e, por fim, deixar a inteligência artificial identificar diferenças relevantes, não ruídos.

Como funciona o fluxo:

Baseline direto do Figma

Realizamos uma requisição via API do Figma, coletando a referência do design de como a tela deve ser.

IA converte design em JSON estruturado

Um serviço realiza uma requisição para a API do GenPlat, a plataforma de aprendizado de máquina do iFood, projetada para simplificar a criação de produtos de IA generativa. Nessa requisição, utilizamos o modelo gpt-5-mini para analisar a referência da tela coletada e extrair informações semânticas, como, por exemplo, os componentes presentes (botões, textos, ícones), suas propriedades (cor, fonte, tamanho, posicionamento) e a hierarquia visual. Todo o resultado é transformado em um JSON estruturado e comparável.

Captura de referência de tela na aplicação

Durante a execução de testes automatizados são capturados screenshots da tela do App.

IA converte screenshots coletado no app pelos testes automatizados em JSON estruturado

Através do GenPlat, o modelo lê os screenshots da aplicação e faz a mesma extração: identifica componentes, propriedades, estrutura. A partir deste momento temos mais um JSON estruturado.

Comparação semântica entre JSONs

Aqui acontece a mágica: em vez de comparar pixel a pixel, o modelo compara os dois JSONs. Ele entende que um botão mudou de cor, que um texto está errado, que um ícone sumiu, que são diferenças relevantes do ponto de vista de testes de regressão visual.

Relatório automatizado com as diferenças visuais

É gerado um relatório apontando exatamente o que divergiu entre Figma e aplicação, com contexto semântico. Times conseguem agir rápido: ou corrigir o bug visual, ou atualizar na baseline se a mudança foi intencional.

Tecnologias envolvidas:

API do Figma: coleta de baseline;

GenPlat com modelo GPT-5 mini: leitura e conversão de referências visuais, comparação semântica;

Automação de testes: captura de screenshots, orquestração do fluxo;

JSON: formato estruturado para representação e comparação semântica.

Antes vs depois: o que muda na prática

A diferença entre as abordagens fica clara quando você compara lado a lado:

Abordagem tradicional:

Baseline: screenshot estático capturado e avaliado manualmente;

Comparação: diferença pixel a pixel ou manual;

Resultado: esforço alto de manutenção e muitos falsos positivos gerados por problemas irrelevantes para validação de interface, por exemplo, variações de renderização e animações de tela.

Nova abordagem (teste automatizado + IA + Figma):

Baseline: extraído automaticamente do Figma via API;

Comparação: análise semântica entre JSONs estruturados;

Resultado: processo automatizado gerando valor relevante com baixo ruído.

A mudança não é só técnica, é cultural. Times de Design, Produto, Desenvolvimento e Qualidade agora trabalham com a mesma fonte de verdade. Quando um teste falha, a investigação começa com contexto: “qual componente divergiu?” em vez de “qual região de pixels mudou?” ou “estamos com a versão certa do Figma?”.

O que aprendemos no caminho

Implementar IA em processos de qualidade não é plug-and-play. Especialmente quando você está criando algo novo.

Processo é tão importante quanto tecnologia

Definir como atualizar a baseline do Figma quando o fluxo evolui foi e é tão crítico quanto implementar o agentes e modelos de IA. Sem processo claro, a automação vira caos em execução. Envolvemos times de Design, Desenvolvimento e Qualidade desde o início para alinhar responsabilidades e fluxos de trabalho.

Precisão da IA exige iteração

Os primeiros JSONs gerados pelo modelo não eram perfeitos: componentes identificados incorretamente, hierarquias confusas, atributos faltando. A gente ajustou prompts, refinou a estrutura esperada, testou com casos extremos. IA é poderosa, mas precisa de direcionamento.

Falsos positivos ainda existem (mas muito menos)

Mesmo com comparação semântica, há casos onde a IA interpreta diferenças que não são relevantes. Estamos refinando continuamente, mas já é uma redução drástica comparado a forma de validação manual.

Orquestração entre Figma, IA e automação tem complexidade oculta

Sincronizar versionamento do Figma com execução de testes, garantir a captura do estado correto da aplicação, lidar com fluxos que falham… cada peça adiciona desafios operacionais. A solução técnica é elegante, mas a infraestrutura do processo ao redor precisa ser robusta.

Colaboração cross-funcional é a chave

Isso não é um projeto de qualidade isolado, é uma iniciativa que toca Design, Produto, Desenvolvimento e Qualidade. Coordenar expectativas e responsabilidades foi tão desafiador quanto escrever código.

A evolução do projeto e próximos passos:

Consolidar processo de atualização de baseline: Garantir que quando Design evolui no Figma, a baseline é atualizada de forma sistemática e rastreável.

Expandir cobertura de fluxos críticos: Começamos com o projeto da Uber, agora estamos no app em Checkout e queremos escalar para outros fluxos críticos.

Aumentar a precisão da solução: Reduzir ainda mais falsos positivos e negativos através do uso de práticas de prompt engineering.

Medir impacto de verdade: Tempo economizado em validação manual, bugs visuais detectados antes de produção e confiança dos times na automação deste processo. Uma das abordagens utilizadas será a Matriz de Confusão para avaliar o desempenho do modelo.

Documentar e compartilhar aprendizados: Criar playbook para outros times que queiram experimentar abordagens similares para resolver problemas.

Estamos construindo isso em versão (beta) inquietos, testando, ajustando. Mas a direção é clara: qualidade visual em escala só vai acontecer se a gente usar inteligência artificial como aliada, não como substituição de processo bem desenhado.

Evoluindo qualidade com IA

Regressão visual sempre foi uma daquelas áreas onde a automação promete muito mas entrega pouco, até agora! Ao conectar IA, Figma e automação de testes, a gente não só resolveu limitações técnicas, mas também criou uma conexão entre os times de design e qualidade que antes não existia.

O futuro da Engenharia de Qualidade não é substituir pessoas com IA, é ampliar a capacidade de times para focar no que importa: entender impacto de negócio, desenhar estratégias de teste e garantir experiências excepcionais para nossos usuários. Deixar a atividade repetitiva e manual para trás libera energia para pensar nestas estratégias.

Se você trabalha com engenharia e sente que validações de tela consomem tempo sem entregar confiança, experimente questionar o modelo tradicional. E se você faz parte do iFood: esse é o tipo de experimentação que a gente celebra. Times ousados resolvendo problemas reais com tecnologia de ponta, sem esperar permissão para inovar.