Figma
Branchez Figma sur Autonomy et utilisez les frames de design comme références visuelles pour les étapes de test.
Connectez Figma et une étape de test peut comparer le produit en direct au frame dont il est issu. Autonomy rend le frame côté serveur et en extrait des faits de design, de sorte que la vérification connaît la géométrie, les couleurs et la typographie prévues — pas seulement une image aplatie.
Comment fonctionne le plugin Figma. Autonomy se connecte via l'API REST de Figma plutôt qu'en exécutant du code dans l'éditeur Figma : il n'y a donc rien à installer depuis la page communautaire de Figma. Vous fournissez un jeton d'accès personnel une seule fois, puis vous collez les URL de frame là où vous en avez besoin.
Connecter Figma
- Dans Figma, ouvrez Account Settings → Personal Access Tokens et créez un jeton avec accès en lecture aux fichiers et aux nœuds.
- Dans Autonomy, ouvrez Settings → Integrations et trouvez la carte Figma.
- Cliquez sur Configure API Key, collez le jeton et cliquez sur Test connection. Autonomy le vérifie auprès de Figma avant de l'enregistrer.
- Cliquez sur Save key.
Le jeton est chiffré au repos et n'est jamais renvoyé au navigateur ni au runner. Le remplacer est une écriture ; il n'y a pas de lecture en retour.
Jetons par environnement
Un jeton au niveau de l'espace de travail couvre tout par défaut. Si différents environnements doivent lire différents fichiers Figma — une organisation de design séparée pour un build en marque blanche, par exemple — surchargez le jeton par environnement sous Environments → modifier un environnement → Figma integration. Le jeton de l'environnement l'emporte pour les exécutions dans cet environnement.
Rattacher un frame à une étape
- Ouvrez le cas de test et allez à l'onglet Visual References.
- Sélectionnez l'étape à laquelle la référence appartient.
- Cliquez sur Add Figma frame et collez l'URL du frame.
L'URL doit être un lien Figma complet incluant un node-id :
https://www.figma.com/design/<fileKey>/<title>?node-id=1042-317Les formes figma.com/design/... et l'ancienne figma.com/file/... sont toutes deux acceptées. Ouvrez le frame dans Figma et utilisez Copy link — une URL de fichier sans nœud n'a pas de frame à rendre.
Ce qu'Autonomy récupère
Lorsqu'une référence est ajoutée, une tâche en arrière-plan la résout :
- Un rendu PNG du nœud à l'échelle 2×, stocké comme image de référence.
- Des faits de design issus du sous-arbre du nœud : largeur, hauteur et nom du frame ; couleurs de remplissage en hexadécimal ; styles de texte incluant famille de police, graisse, taille, hauteur de ligne et texte échantillon ; rayons de coin ; et padding et gaps d'auto-layout.
Les faits de design sont ce qui permet à la comparaison de raisonner sur l'intention. Le modèle de vision qui examine un écart dispose des vraies valeurs de couleur et de typographie du frame, ce qui lui permet de distinguer « l'accent est du mauvais vert » de « cette capture d'écran a été prise en pleine animation ».
Chaque référence affiche son état de résolution dans l'onglet Visual References. Une référence qui n'a pas pu être résolue peut être relancée sur place. Les références non résolues sont automatiquement retentées au démarrage d'une exécution.
Maintenir les références à jour
La référence est un instantané, pas un lien en direct. Lorsque le design change, relancez la résolution de la référence pour que la base corresponde. Traitez un changement de design intentionnel comme une mise à jour en deux temps : livrez l'interface, rafraîchissez la référence.
Limites
- Le sélecteur de frame liste jusqu'à 24 frames de niveau supérieur par fichier ou nœud.
- Les images de référence téléversées manuellement sont plafonnées à 25 Mo. Les rendus Figma ne sont pas affectés par cette limite.
- Le jeton doit avoir accès en lecture à chaque fichier que vous référencez. Un jeton limité à une équipe ne peut pas rendre un frame d'une autre.
Dépannage
"No Figma API key configured"
Aucune clé n'est définie pour l'espace de travail ou pour l'environnement utilisé par l'exécution. Ajoutez-en une sous Settings → Integrations, ou définissez une surcharge d'environnement.
"Figma URL is missing a node-id parameter"
Vous avez collé une URL de fichier plutôt qu'un lien de frame. Ouvrez le frame dans Figma, copiez son lien et collez l'URL complète incluant la chaîne de requête.
"Figma rejected the token (403)"
Le jeton a été révoqué, a expiré ou n'a pas accès à ce fichier. Générez-en un nouveau et relancez Test connection avant d'enregistrer.
La référence est correcte mais chaque exécution décale
Vérifiez le viewport. Comparez un frame desktop à une capture desktop. Voir Vérifications visuelles pour les recommandations de tolérance et de viewport.