Ein Design aus Figma importieren
Machen Sie aus einem Figma-Design Referenzbilder und fertige Prüfungen, und synchronisieren Sie sie, wenn sich das Design ändert.
Was der Import Ihnen bringt
Ein in Figma erstelltes Design sagt bereits, was jeder Bildschirm zeigen muss.„Aus Figma importieren“ macht aus diesem Design einen Test: Jeder Bildschirm wird zu einem Referenzbild auf der Zeitleiste, mit fertigen Prüfungen für das, was er zeigt.
Es gibt kein Konto zu verbinden und keinen Schlüssel zu erstellen.Ein kleines Plugin in Figma speichert Ihr Design als eine Datei, und GUI Test Studio holt sich diese Datei.
Die Idee in vier Schritten
Auswählen
Die Bildschirme in Figma aktivieren oder einen Prototyp-Ablauf wählen
Exportieren
Das Plugin speichert eine Designdatei
Importieren
GUI Test Studio findet die Datei von selbst
Überprüfen
Die gewünschten Prüfungen behalten, dann importieren
Das Plugin einmal zu Figma hinzufügen
- 1
„Aus Figma importieren“ öffnen
Wählen Sie in GUI Test Studio Datei, Aus Figma importieren... (Strg+Umschalt+D), oder klicken Sie auf die zugehörige Schaltfläche in der Symbolleiste.
Das Fenster wartet auf Ihr Design und sagt, was in Figma zu tun ist. - 2
Auf „Plugin holen“ klicken
Plugin holen... öffnet den Ordner, der das Plugin enthält.Es wird mit GUI Test Studio installiert.
- 3
In der Desktop-App von Figma hinzufügen
Öffnen Sie in Figma Plugins, Development, Import plugin from manifest... und wählen Sie die Datei manifest.json aus diesem Ordner.Das Plugin steht nun in Ihrer Plugins-Liste, für jedes Design, das Sie öffnen.
Ihr Design exportieren
- 1
Das Plugin starten
Öffnen Sie Ihr Design in Figma, drücken Sie Strg+K und starten Sie GUI Test Studio über die Registerkarte „Plugins“.
- 2
Auswählen, was exportiert wird
Aktivieren Sie die gewünschten Bildschirme.Wenn Ihr Design einen Prototyp-Ablauf hat, wählen Sie stattdessen den Ablauf: Seine Bildschirme kommen der Reihe nach, mit den Klicks, die von einem zum nächsten führen.
- 3
Auf „Export“ klicken und die Datei in „Downloads“ lassen
Das Plugin speichert eine Designdatei.Lassen Sie sie in Ihrem Ordner „Downloads“: GUI Test Studio beobachtet diesen Ordner und öffnet das Design innerhalb von ein, zwei Sekunden.
Überprüfen, was geprüft wird
Bevor etwas zu Ihrem Test hinzugefügt wird, zeigt das Fenster jeden Bildschirm mit einem Rahmen um jedes gefundene Element und sagt, welche Prüfung jedes erhält.
| Was das Design enthält | Die Prüfung, die es erhält |
|---|---|
| Eine Beschriftung, ein Titel, die Wörter einer Schaltfläche | Eine Text-Assertion: Die Wörter müssen auf dem Bildschirm stehen. |
| Ein Wert, der sich ändert, etwa ein Datum oder ein Betrag | Eine Dynamische Text-Assertion: Ein Datum muss da sein, an welchem Tag auch immer. |
| Ein Symbol, ein Logo, ein Bild | Eine Bild-Assertion: Das Element muss wie im Design aussehen. |
| Ein langer Absatz oder ein großes Foto | Aufgeführt, aber nicht aktiviert: Meist ist es Beispielinhalt. |
Die Prüfungen eines Teils eines Bildschirms, etwa seiner Kopfzeile oder seines Formulars, reisen gemeinsam als eine Gruppen-Assertion.Ist Anordnung prüfen aktiviert, prüft die Gruppe außerdem, dass ihre Elemente dort stehen, wo das Design sie hinsetzt.
| Auswahl | Was sie bewirkt |
|---|---|
| Aufbau | Die Bildschirme nacheinander oder ein Prototyp-Ablauf mit seinen Klicks. |
| Erstellen | Bilder und Assertionen, oder Nur Bilder, wenn Sie die Prüfungen lieber selbst hinzufügen. |
| Zielposition | Am Abspielkopf oder am Ende des Tests. |
| Als Bild prüfen / Als Text prüfen | Stellt das ausgewählte Element von einer Art der Prüfung auf die andere um. |
| Design-Link | Optional: Fügen Sie die Adresse des Designs ein, um es später vom Test aus in Figma zu öffnen. |
Was auf der Zeitleiste landet
Klicken Sie auf Importieren.Alles kommt als ein Szenario an, das nach Ihrem Design benannt ist, sodass Sie es als Ganzes verschieben, kopieren oder löschen können.
| Auf der Zeitleiste | Was es ist |
|---|---|
| Bildreferenz | Ein Bild pro Bildschirm, jeweils fünf Sekunden lang.Sie sind außerdem unter „Designs“ in den Inhaltsdateien aufgeführt. |
| Assertionen | Die Prüfungen jedes Bildschirms, kurz nachdem sein Bild beginnt. |
| Mausereignisse | Bei einem Prototyp-Ablauf der Klick, der zum nächsten Bildschirm führt, gezielt auf die Schaltfläche, von der das Design verknüpft. |
Ein einziger Rückgängig-Schritt nimmt den ganzen Import zurück.
Das Designteam exportiert den Ablauf „Sign in“: Login, Dashboard, Settings.Sie importieren ihn und erhalten drei Bilder, den Klick auf „Sign in“, den Klick auf das Zahnrad der Einstellungen und die Prüfungen jedes Bildschirms.An dem Tag, an dem es die App gibt, klickt sich der Test durch das Echte und meldet Element für Element, ob es dem Design entspricht.
Wenn sich das Design ändert
Designs verändern sich.Wenn Ihres es tut, exportieren Sie es erneut aus Figma und wählen Sie dann Datei, Aus Figma synchronisieren... in GUI Test Studio, oder klicken Sie mit der rechten Maustaste auf das Bild des Designs.
| Was sich im Design geändert hat | Was eine Synchronisierung tut |
|---|---|
| Ein Text lautet anders | Die Prüfung erwartet die neuen Wörter. |
| Ein Element sieht anders aus | Die Prüfung übernimmt das neue Bild. |
| Ein Element wurde verschoben oder hat seine Größe geändert | Die Prüfung folgt ihm, und ein darauf gezielter Klick ebenfalls. |
| Ein Element ist nicht mehr da | Seine Prüfung wird entfernt. |
| Ein Element ist neu | Nicht aktiviert: Nichts Neues wird geprüft, solange Sie es nicht verlangen. |
Eine Prüfung, die Sie selbst bearbeitet haben, ist ebenfalls nicht aktiviert, sodass eine Synchronisierung Ihre Arbeit nie ungefragt überschreibt.Das Bild des Bildschirms übernimmt immer seine neueste Version, und ein einziger Rückgängig-Schritt bringt alles zurück.
Gut zu wissen
| Frage | Antwort |
|---|---|
| Verbindet sich GUI Test Studio mit meinem Figma-Konto? | Nein.Das Plugin speichert eine Datei auf Ihrem Computer, und die App liest diese Datei.Nichts wird irgendwohin gesendet. |
| Wo wird das Element auf dem echten Bildschirm sein? | Irgendwo.Ein Design sagt nicht, wo das Fenster der App stehen wird, deshalb durchsuchen diese Prüfungen den gesamten Bildschirm. |
| Die Schriften der App sind nicht genau die des Designs.Schlagen die Prüfungen fehl? | Design-Prüfungen vergleichen aus diesem Grund mit einer großzügigen Strenge.Nach dem ersten echten Lauf können Sie das echte Aussehen einmal aus dem Konfidenzbericht übernehmen. |
| Kann ich ein einzelnes Element importieren, etwa eine neue Schaltfläche? | Ja.Wird das Design dort importiert, wo bereits eine Aufzeichnung gezeigt wird, wird es darübergelegt, und Sie können es dorthin verschieben, wo das Element sein wird. |
Wie Sie einen Test aus einfachen Bildern eines beliebigen Designtools vorbereiten, lesen Sie unter Eine Funktion testen, bevor es sie gibt.Wie Sie das echte Aussehen nach dem ersten Lauf übernehmen, lesen Sie unter Wenn sich die App absichtlich ändert.
Design in Figma
Test bereit
Bevor die Funktion gebaut ist
Synchronisieren
Immer wenn sich das Design ändert
Kommen Sie nicht weiter?Sagen Sie uns, was Sie tun wollten, und wir antworten innerhalb eines Werktags.Ask our team