Importer une maquette depuis Figma
Transformez une maquette Figma en images de référence et en assertions toutes prêtes, et synchronisez-les quand la maquette change.
Ce que l'importation vous apporte
Une maquette faite dans Figma dit déjà ce que chaque écran doit montrer.Importer depuis Figma transforme cette maquette en test : chaque écran devient une image de référence sur la chronologie, avec des assertions toutes prêtes pour ce qu'il montre.
Il n'y a aucun compte à connecter ni aucune clé à créer.Un petit plugin dans Figma sauvegarde votre maquette en un seul fichier, et GUI Test Studio récupère ce fichier.
L'idée en quatre étapes
Choisir
Cochez les écrans dans Figma, ou choisissez un parcours de prototype
Exporter
Le plugin sauvegarde un seul fichier de maquette
Importer
GUI Test Studio trouve le fichier tout seul
Passer en revue
Gardez les assertions que vous voulez, puis importez
Ajouter le plugin à Figma, une seule fois
- 1
Ouvrir Importer depuis Figma
Dans GUI Test Studio, choisissez Fichier, Importer depuis Figma... (Ctrl+Maj+D), ou cliquez sur son bouton dans la barre d'outils.
La fenêtre attend votre maquette et dit quoi faire dans Figma. - 2
Cliquer sur Obtenir le plugin
Obtenir le plugin... ouvre le dossier qui contient le plugin.Il est installé avec GUI Test Studio.
- 3
L'ajouter dans l'application de bureau de Figma
Dans Figma, ouvrez Plugins, Development, Import plugin from manifest... et choisissez le fichier manifest.json de ce dossier.Le plugin figure désormais dans votre liste Plugins, pour chaque maquette que vous ouvrez.
Exporter votre maquette
- 1
Démarrer le plugin
Ouvrez votre maquette dans Figma, appuyez sur Ctrl+K et démarrez GUI Test Studio depuis l'onglet Plugins.
- 2
Choisir ce qu'il faut exporter
Cochez les écrans que vous voulez.Si votre maquette a un parcours de prototype, choisissez plutôt le parcours : ses écrans arrivent dans l'ordre, avec les clics qui mènent de l'un au suivant.
- 3
Cliquer sur Exporter et garder le fichier dans Téléchargements
Le plugin sauvegarde un seul fichier de maquette.Laissez-le dans votre dossier Téléchargements : GUI Test Studio surveille ce dossier et ouvre la maquette en une seconde ou deux.
Passer en revue ce qui sera vérifié
Avant que quoi que ce soit ne soit ajouté à votre test, la fenêtre montre chaque écran avec un cadre autour de chaque élément trouvé, et dit quelle assertion chacun reçoit.
| Ce que contient la maquette | L'assertion qu'il reçoit |
|---|---|
| Un libellé, un titre, le texte d'un bouton | Une assertion de texte : les mots doivent être à l'écran. |
| Une valeur qui change, comme une date ou un montant | Une assertion de texte dynamique : une date doit être présente, quel que soit le jour. |
| Une icône, un logo, une image | Une assertion visuelle : l'élément doit ressembler à la maquette. |
| Un long paragraphe ou une grande photo | Listé mais non coché : c'est en général du contenu d'exemple. |
Les assertions d'une partie d'un écran, comme son en-tête ou son formulaire, voyagent ensemble sous la forme d'une seule assertion de groupe.Lorsque Vérifier l'agencement est coché, le groupe vérifie aussi que ses éléments se trouvent là où la maquette les place.
| Choix | Ce qu'il fait |
|---|---|
| Construire | Les écrans l'un après l'autre, ou un parcours de prototype avec ses clics. |
| Créer | Images et assertions, ou Images seulement si vous préférez ajouter les assertions vous-même. |
| Où cela se place | À la tête de lecture, ou à la fin du test. |
| Vérifier comme image / Vérifier comme texte | Fait passer l'élément sélectionné d'un type d'assertion à l'autre. |
| Lien de la maquette | Facultatif : collez l'adresse de la maquette pour l'ouvrir plus tard dans Figma depuis le test. |
Ce qui arrive sur la chronologie
Cliquez sur Importer.Tout arrive sous la forme d'un seul scénario portant le nom de votre maquette, pour que vous puissiez le déplacer, le copier ou le supprimer en bloc.
| Sur la chronologie | Ce que c'est |
|---|---|
| Référence visuelle | Une image par écran, de cinq secondes chacune.Elles sont aussi listées sous Maquettes dans les Fichiers de contenu. |
| Assertion | Les assertions de chaque écran, peu après le début de son image. |
| Événements souris | Pour un parcours de prototype, le clic qui mène à l'écran suivant, dirigé sur le bouton d'où part le lien dans la maquette. |
Une seule annulation retire toute l'importation.
Le designer exporte le parcours « Sign in » : Login, Dashboard, Settings.Vous l'importez et vous obtenez trois images, le clic sur Sign in, le clic sur la roue des paramètres, et les assertions de chaque écran.Le jour où l'application existe, le test parcourt l'application réelle clic après clic et signale, élément par élément, si elle correspond à la maquette.
Quand la maquette change
Les maquettes évoluent.Quand la vôtre change, exportez-la de nouveau depuis Figma, puis choisissez Fichier, Synchroniser depuis Figma... dans GUI Test Studio, ou faites un clic droit sur l'image de la maquette.
| Ce qui a changé dans la maquette | Ce que fait une synchronisation |
|---|---|
| Un texte se lit différemment | L'assertion attend les nouveaux mots. |
| Un élément a un aspect différent | L'assertion prend la nouvelle image. |
| Un élément a bougé ou changé de taille | L'assertion le suit, tout comme un clic dirigé sur lui. |
| Un élément n'est plus là | Son assertion est retirée. |
| Un élément est nouveau | Non coché : rien de nouveau n'est vérifié sans que vous le demandiez. |
Une assertion que vous avez modifiée vous-même n'est pas cochée non plus, si bien qu'une synchronisation n'écrase jamais votre travail sans demander.L'image de l'écran prend toujours sa version la plus récente, et une seule annulation rétablit tout.
Bon à savoir
| Question | Réponse |
|---|---|
| GUI Test Studio se connecte-t-il à mon compte Figma ? | Non.Le plugin sauvegarde un fichier sur votre ordinateur et l'application lit ce fichier.Rien n'est envoyé nulle part. |
| Où l'élément se trouvera-t-il sur l'écran réel ? | N'importe où.Une maquette ne dit pas où se tiendra la fenêtre de l'application, donc ces assertions recherchent sur tout l'écran. |
| Les polices de l'application ne sont pas exactement celles de la maquette.Les assertions vont-elles échouer ? | Les assertions de maquette comparent avec une rigueur souple pour cette raison.Après la première exécution réelle, vous pouvez accepter une fois l'apparence réelle depuis le rapport de confiance. |
| Puis-je importer un seul élément, comme un nouveau bouton ? | Oui.Importée là où un enregistrement est déjà affiché, la maquette est placée par-dessus, et vous pouvez la déplacer là où l'élément se trouvera. |
Pour préparer un test à partir de simples images de n'importe quel outil de design, voir Tester une fonctionnalité avant qu'elle existe.Pour accepter l'apparence réelle après la première exécution, voir Quand l'application change volontairement.
Maquette dans Figma
Test prêt
Avant que la fonctionnalité soit développée
Synchroniser
Chaque fois que la maquette change
Toujours bloqué ?Dites-nous ce que vous essayiez de faire, et nous répondons sous un jour ouvré.Ask our team