O teste de Fidelidade de Design compara sua página ativa com um frame do Figma e relata onde a implementação se desviou do design. Ele pontua 5 categorias de forma independente — Layout, Cores, Tipografia, Espaçamento, Componentes — e sinaliza cada diferença com severidade e uma recomendação de correção específica.

O que você precisa

O plugin do QA Proof para WP instalado e conectado (guia).
Um arquivo do Figma com o seu frame de destino. A configuração de compartilhamento do arquivo deve permitir "Qualquer pessoa com o link pode visualizar", OU você pode fornecer um token de acesso pessoal do Figma (planos gratuitos do Figma não oferecem acesso à API — é necessário Professional ou superior para acesso baseado em token).
A URL ativa da página que implementa esse design.
Alternativamente, você pode enviar uma imagem estática em vez de uma URL do Figma — mesma lógica de comparação, sem necessidade de conta no Figma.

Obtenha sua URL do Figma

No Figma, selecione o frame que você quer comparar, clique com o botão direito → Copiar/Colar como → Copiar link para a seleção. A URL se parece com:

https://www.figma.com/design/<file-key>/<name>?node-id=<frame-id>

O node-id é essencial — sem ele, capturamos o primeiro frame do arquivo, que geralmente não é o que você quer.

Obtenha um token de acesso pessoal do Figma (opcional)

Se o seu arquivo for privado, gere um token no Figma:

Abra o Figma → clique no seu avatar → Configurações.
Vá para Segurança → Tokens de acesso pessoal.
Gere um novo token e copie-o (ele começa com figd_). Os tokens são mostrados apenas uma vez.
Cole-o no formulário de Testes do plugin do WP ao executar um teste de Fidelidade de Design.

⚠ Limite do plano Starter do Figma: a API do Figma limita a taxa dos planos Starter a apenas 6 requisições por mês. Para testes ativos, você precisa de um workspace Figma Professional+, OU use a opção Enviar Imagem em vez disso.

Execute o teste

Admin do WP → QAProof → Tests → aba Design Fidelity.
Escolha sua fonte de design: Enviar Imagem (recomendado para a maioria dos usuários) ou URL do Figma.
Insira a URL da página ativa.
Para o Figma: cole a URL e (se necessário) o token de acesso pessoal. Há um botão "Salvar Design" que armazena em cache a imagem obtida para que execuções futuras não acessem a API do Figma novamente.
Clique em Run Test. Tempo total de 30 a 90 segundos.

Lendo o resultado

A Fidelidade de Design pontua 5 categorias:

Layout — posições dos elementos e estrutura da grade.
Cores — fundos, bordas, cor do texto.
Tipografia — família da fonte, tamanho, peso, altura da linha.
Espaçamento — valores de padding, margin, gap.
Componentes — consistência de botões, formulários, cards.

A lista de Problemas mostra cada diferença com severidade (alta / média / baixa) e uma sugestão de correção em nível de CSS. A visualização da captura de tela sobrepõe marcadores mostrando exatamente onde cada problema está na página. Abaixo da pontuação há um botão "Baixar como PDF" — o mesmo relatório com a marca enviado nos e-mails de notificação.

Fidelidade em nível de elemento

Em vez de comparar a página inteira, você pode selecionar uma região específica (por exemplo, apenas o hero) e comparar somente ela. No formulário de Testes, clique em Inspect Mode após inserir a URL — a página é renderizada com um seletor de região. Arraste para destacar a região e então execute.

Dicas para bons resultados

Combine o viewport com o design. Se o frame do Figma tem 1440×900, execute o teste em 1440 também (padrão). Para designs mobile-first, experimente também o teste Responsivo, que captura múltiplos viewports automaticamente.
Estabilize o conteúdo dinâmico primeiro. Se a página tem um carrossel ou contadores, a captura de tela ao vivo pode mostrar um estado diferente do design. O plugin mascara o conteúdo dinâmico (cronômetros, elementos rotativos) por padrão.
Salve a imagem do design. Após sua primeira busca no Figma, clique em Salvar Design no painel de pré-visualização. Todos os testes subsequentes reutilizam a imagem salva — zero chamadas à API do Figma.

Solução de problemas

"Figma file not found"

Ou o arquivo é privado (precisa de um token), a URL está malformada (deve incluir node-id), ou o arquivo foi excluído. Abra a URL no seu navegador para verificar o acesso.

"Figma rate limit exceeded"

Você atingiu a cota mensal da API do Figma. Use Enviar Imagem em vez disso, ou faça upgrade do seu plano do Figma para Professional+. O plugin armazena em cache as imagens do Figma por 24 horas por padrão para minimizar os acessos.