Le test de Fidélité de Design compare votre page en ligne avec un frame Figma et signale les endroits où l'implémentation s'est écartée de la maquette. Il note 5 catégories indépendamment — Disposition, Couleurs, Typographie, Espacement, Composants — et signale chaque différence avec sa gravité et une recommandation de correction spécifique.

Ce dont vous avez besoin

Le plugin QA Proof pour WP installé et connecté (guide).
Un fichier Figma avec votre frame cible. Le paramètre de partage du fichier doit autoriser « Toute personne disposant du lien peut consulter », OU vous pouvez fournir un jeton d'accès personnel Figma (les forfaits Figma gratuits ne prennent pas en charge l'accès à l'API — Professional ou supérieur est requis pour l'accès basé sur un jeton).
L'URL en ligne de la page qui implémente cette maquette.
Vous pouvez aussi télécharger une image statique au lieu d'une URL Figma — même logique de comparaison, sans compte Figma nécessaire.

Obtenez votre URL Figma

Dans Figma, sélectionnez le frame que vous voulez comparer, clic droit → Copier/Coller comme → Copier le lien vers la sélection. L'URL ressemble à :

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

Le node-id est essentiel — sans lui, nous capturons le premier frame du fichier, ce qui n'est généralement pas ce que vous voulez.

Obtenez un jeton d'accès personnel Figma (facultatif)

Si votre fichier est privé, générez un jeton dans Figma :

Ouvrez Figma → cliquez sur votre avatar → Paramètres.
Allez dans Sécurité → Jetons d'accès personnel.
Générez un nouveau jeton et copiez-le (il commence par figd_). Les jetons ne sont affichés qu'une seule fois.
Collez-le dans le formulaire Tests du plugin WP lors de l'exécution d'un test de Fidélité de Design.

⚠ Limite du forfait Starter de Figma : l'API de Figma limite le débit des forfaits Starter à seulement 6 requêtes par mois. Pour des tests actifs, vous avez besoin d'un espace de travail Figma Professional+, OU utilisez l'option Télécharger une Image à la place.

Exécutez le test

Admin WP → QAProof → Tests → onglet Design Fidelity.
Choisissez votre source de design : Télécharger une Image (recommandé pour la plupart des utilisateurs) ou URL Figma.
Saisissez l'URL de la page en ligne.
Pour Figma : collez l'URL et (si nécessaire) le jeton d'accès personnel. Il y a un bouton « Enregistrer le Design » qui met en cache l'image récupérée afin que les exécutions futures n'appellent plus l'API de Figma.
Cliquez sur Run Test. Durée totale de 30 à 90 secondes.

Lire le résultat

La Fidélité de Design note 5 catégories :

Disposition — positions des éléments et structure de la grille.
Couleurs — arrière-plans, bordures, couleur du texte.
Typographie — famille de police, taille, graisse, hauteur de ligne.
Espacement — valeurs de padding, margin, gap.
Composants — cohérence des boutons, formulaires, cartes.

La liste des Problèmes affiche chaque différence avec sa gravité (élevée / moyenne / faible) et une suggestion de correction au niveau CSS. La vue de la capture d'écran superpose des marqueurs montrant exactement où se trouve chaque problème sur la page. Sous le score se trouve un bouton « Télécharger en PDF » — le même rapport de marque envoyé dans les e-mails de notification.

Fidélité au niveau de l'élément

Au lieu de comparer la page entière, vous pouvez sélectionner une région spécifique (par exemple, juste le hero) et comparer uniquement celle-ci. Dans le formulaire Tests, cliquez sur Inspect Mode après avoir saisi l'URL — la page s'affiche avec un sélecteur de région. Faites glisser pour mettre en surbrillance la région, puis exécutez.

Conseils pour de bons résultats

Faites correspondre la fenêtre d'affichage à la maquette. Si le frame Figma fait 1440×900, exécutez aussi le test à 1440 (par défaut). Pour les maquettes mobile-first, essayez également le test Responsive, qui capture automatiquement plusieurs fenêtres d'affichage.
Stabilisez d'abord le contenu dynamique. Si la page comporte un carrousel ou des compteurs, la capture d'écran en direct peut afficher un état différent de la maquette. Le plugin masque le contenu dynamique (minuteurs, éléments rotatifs) par défaut.
Enregistrez l'image de la maquette. Après votre première récupération Figma, cliquez sur Enregistrer le Design dans le panneau d'aperçu. Tous les tests suivants réutilisent l'image enregistrée — zéro appel à l'API de Figma.

Dépannage

"Figma file not found"

Soit le fichier est privé (un jeton est nécessaire), soit l'URL est mal formée (elle doit inclure node-id), soit le fichier a été supprimé. Ouvrez l'URL dans votre navigateur pour vérifier l'accès.

"Figma rate limit exceeded"

Vous avez atteint le quota mensuel de l'API de Figma. Utilisez Télécharger une Image à la place, ou passez votre forfait Figma à Professional+. Le plugin met en cache les images de Figma pendant 24 heures par défaut pour minimiser les appels.