Il test di Fedeltà del Design confronta la tua pagina live con un frame Figma e segnala dove l'implementazione si è discostata dal design. Valuta 5 categorie in modo indipendente — Layout, Colori, Tipografia, Spaziatura, Componenti — e segnala ogni differenza con la gravità e una raccomandazione di correzione specifica.

Cosa ti serve

Il plugin QA Proof per WP installato e connesso (guida).
Un file Figma con il tuo frame di destinazione. L'impostazione di condivisione del file deve consentire "Chiunque abbia il link può visualizzare", OPPURE puoi fornire un token di accesso personale Figma (i piani Figma gratuiti non supportano l'accesso all'API — è necessario Professional o superiore per l'accesso basato su token).
L'URL live della pagina che implementa quel design.
In alternativa, puoi caricare un'immagine statica invece di un URL Figma — stessa logica di confronto, nessun account Figma necessario.

Ottieni il tuo URL Figma

In Figma, seleziona il frame che vuoi confrontare, fai clic con il tasto destro → Copia/Incolla come → Copia link alla selezione. L'URL è simile a:

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

Il node-id è essenziale — senza di esso catturiamo il primo frame del file, che di solito non è quello che vuoi.

Ottieni un token di accesso personale Figma (opzionale)

Se il tuo file è privato, genera un token in Figma:

Apri Figma → clicca sul tuo avatar → Impostazioni.
Vai su Sicurezza → Token di accesso personale.
Genera un nuovo token e copialo (inizia con figd_). I token vengono mostrati una sola volta.
Incollalo nel modulo Test del plugin WP quando esegui un test di Fedeltà del Design.

⚠ Limite del piano Starter di Figma: l'API di Figma limita la frequenza dei piani Starter ad appena 6 richieste al mese. Per test attivi, ti serve un workspace Figma Professional+, OPPURE usa l'opzione Carica Immagine.

Esegui il test

Admin WP → QAProof → Tests → scheda Design Fidelity.
Scegli la tua sorgente di design: Carica Immagine (consigliato per la maggior parte degli utenti) o URL Figma.
Inserisci l'URL della pagina live.
Per Figma: incolla l'URL e (se necessario) il token di accesso personale. C'è un pulsante "Salva Design" che memorizza nella cache l'immagine recuperata in modo che le esecuzioni future non contattino di nuovo l'API di Figma.
Clicca su Run Test. Tempo totale 30–90 secondi.

Leggere il risultato

La Fedeltà del Design valuta 5 categorie:

Layout — posizioni degli elementi e struttura della griglia.
Colori — sfondi, bordi, colore del testo.
Tipografia — famiglia del font, dimensione, peso, altezza di riga.
Spaziatura — valori di padding, margin, gap.
Componenti — coerenza di pulsanti, moduli, card.

L'elenco dei Problemi mostra ogni differenza con la gravità (alta / media / bassa) e un suggerimento di correzione a livello CSS. La visualizzazione dello screenshot sovrappone dei marcatori che mostrano esattamente dove si trova ogni problema sulla pagina. Sotto il punteggio c'è un pulsante "Scarica come PDF" — lo stesso report con il marchio inviato nelle email di notifica.

Fedeltà a livello di elemento

Invece di confrontare l'intera pagina, puoi selezionare una regione specifica (ad esempio solo l'hero) e confrontare solo quella. Nel modulo Test, clicca su Inspect Mode dopo aver inserito l'URL — la pagina viene renderizzata con un selettore di regione. Trascina per evidenziare la regione, poi esegui.

Consigli per buoni risultati

Allinea il viewport al design. Se il frame Figma è 1440×900, esegui il test anche a 1440 (predefinito). Per i design mobile-first, prova anche il test Responsive, che cattura automaticamente più viewport.
Stabilizza prima il contenuto dinamico. Se la pagina ha un carosello o dei contatori, lo screenshot live potrebbe mostrare uno stato diverso dal design. Il plugin maschera il contenuto dinamico (timer, elementi rotanti) per impostazione predefinita.
Salva l'immagine del design. Dopo il tuo primo recupero da Figma, clicca su Salva Design nel pannello di anteprima. Tutti i test successivi riutilizzano l'immagine salvata — zero chiamate all'API di Figma.

Risoluzione dei problemi

"Figma file not found"

O il file è privato (serve un token), l'URL è malformato (deve includere node-id), oppure il file è stato eliminato. Apri l'URL nel tuo browser per verificare l'accesso.

"Figma rate limit exceeded"

Hai raggiunto la quota mensile dell'API di Figma. Usa Carica Immagine in alternativa, oppure aggiorna il tuo piano Figma a Professional+. Il plugin memorizza nella cache le immagini di Figma per 24 ore per impostazione predefinita per ridurre al minimo gli accessi.