Importare un design da Figma
Trasformate un design di Figma in immagini di riferimento e controlli già pronti, e sincronizzateli quando il design cambia.
Cosa vi dà l'importazione
Un design realizzato in Figma dice già cosa deve mostrare ogni schermata.Importa da Figma trasforma quel design in un test: ogni schermata diventa un'immagine di riferimento sulla timeline, con controlli già pronti per ciò che mostra.
Non c'è alcun account da collegare e nessuna chiave da creare.Un piccolo plugin all'interno di Figma salva il vostro design in un unico file, e GUI Test Studio raccoglie quel file.
L'idea in quattro passaggi
Scegliere
Selezionate le schermate in Figma, oppure scegliete un flusso del prototipo
Esportare
Il plugin salva un unico file di design
Importare
GUI Test Studio trova il file da solo
Rivedere
Tenete i controlli che volete, poi importate
Aggiungere il plugin a Figma, una volta sola
- 1
Aprire Importa da Figma
In GUI Test Studio, scegliete File, Importa da Figma... (Ctrl+Maiusc+D), oppure fate clic sul suo pulsante nella barra degli strumenti.
La finestra attende il vostro design e dice cosa fare in Figma. - 2
Fare clic su Ottieni il plugin
Ottieni il plugin... apre la cartella che contiene il plugin.Viene installato insieme a GUI Test Studio.
- 3
Aggiungerlo nell'app desktop di Figma
In Figma, aprite Plugins, Development, Import plugin from manifest... e scegliete il file manifest.json di quella cartella.Il plugin è ora nel vostro elenco Plugins, per ogni design che aprite.
Esportare il design
- 1
Avviare il plugin
Aprite il vostro design in Figma, premete Ctrl+K e avviate GUI Test Studio dalla scheda Plugins.
- 2
Scegliere cosa esportare
Selezionate le schermate che volete.Se il vostro design ha un flusso del prototipo, scegliete invece il flusso: le sue schermate arrivano in ordine, con i clic che portano dall'una alla successiva.
- 3
Fare clic su Export e lasciare il file in Download
Il plugin salva un unico file di design.Lasciatelo nella vostra cartella Download: GUI Test Studio tiene d'occhio quella cartella e apre il design entro un secondo o due.
Rivedere ciò che verrà controllato
Prima che qualcosa venga aggiunto al vostro test, la finestra mostra ogni schermata con un riquadro attorno a ogni elemento trovato, e dice quale controllo riceve ciascuno.
| Cosa contiene il design | Il controllo che riceve |
|---|---|
| Un'etichetta, un titolo, le parole di un pulsante | Un'asserzione testuale: le parole devono essere sullo schermo. |
| Un valore che cambia, come una data o un importo | Un'asserzione testuale dinamica: deve esserci una data, qualunque sia il giorno. |
| Un'icona, un logo, un'immagine | Un'asserzione visiva: l'elemento deve apparire come nel design. |
| Un paragrafo lungo o una foto grande | Elencato ma non selezionato: di solito è contenuto di esempio. |
I controlli di una parte di una schermata, come la sua intestazione o il suo modulo, viaggiano insieme come un'unica asserzione di gruppo.Con Controlla la disposizione selezionato, il gruppo controlla anche che i suoi elementi si trovino dove il design li colloca.
| Scelta | Cosa fa |
|---|---|
| Costruire | Le schermate una dopo l'altra, oppure un flusso del prototipo con i suoi clic. |
| Creare | Immagini e asserzioni, oppure Solo immagini quando preferite aggiungere i controlli voi stessi. |
| Dove viene collocato | All'indicatore di riproduzione, oppure alla fine del test. |
| Controlla come immagine / Controlla come testo | Fa passare l'elemento selezionato da un tipo di controllo all'altro. |
| Collegamento al design | Facoltativo: incollate l'indirizzo del design per aprirlo più tardi in Figma dal test. |
Cosa arriva sulla timeline
Fate clic su Importa.Tutto arriva come un unico scenario con il nome del vostro design, così potete spostarlo, copiarlo o eliminarlo in blocco.
| Sulla timeline | Che cos'è |
|---|---|
| Riferimento visivo | Un'immagine per schermata, cinque secondi ciascuna.Sono elencate anche sotto Design nei Contenuti. |
| Asserzioni | I controlli di ogni schermata, poco dopo l'inizio della sua immagine. |
| Eventi mouse | Per un flusso del prototipo, il clic che porta alla schermata successiva, diretto sul pulsante da cui parte il collegamento del design. |
Un solo passaggio di annullamento riporta indietro l'intera importazione.
Il designer esporta il flusso “Sign in”: Login, Dashboard, Settings.Lo importate e ottenete tre immagini, il clic su Sign in, il clic sull'ingranaggio delle impostazioni, e i controlli di ogni schermata.Il giorno in cui l'app esiste, il test percorre con i suoi clic l'app reale e segnala, elemento per elemento, se corrisponde al design.
Quando il design cambia
I design cambiano.Quando il vostro cambia, esportatelo di nuovo da Figma, poi scegliete File, Sincronizza da Figma... in GUI Test Studio, oppure fate clic con il pulsante destro sull'immagine del design.
| Cosa è cambiato nel design | Cosa fa una sincronizzazione |
|---|---|
| Un testo dice qualcosa di diverso | Il controllo si aspetta le nuove parole. |
| Un elemento appare diverso | Il controllo prende la nuova immagine. |
| Un elemento si è spostato o ha cambiato dimensione | Il controllo lo segue, e lo segue anche un clic diretto su di esso. |
| Un elemento non c'è più | Il suo controllo viene rimosso. |
| Un elemento è nuovo | Non selezionato: nulla di nuovo viene controllato se non lo chiedete voi. |
Nemmeno un controllo che avete modificato voi stessi è selezionato, così una sincronizzazione non sovrascrive mai il vostro lavoro senza chiedere.L'immagine della schermata prende sempre la sua versione più recente, e un solo passaggio di annullamento riporta tutto com'era.
Buono a sapersi
| Domanda | Risposta |
|---|---|
| GUI Test Studio si collega al mio account Figma? | No.Il plugin salva un file sul vostro computer e l'app legge quel file.Nulla viene inviato da nessuna parte. |
| Dove si troverà l'elemento sullo schermo reale? | Ovunque.Un design non dice dove si troverà la finestra dell'app, quindi questi controlli cercano in tutto lo schermo. |
| I caratteri dell'app non sono esattamente quelli del design.I controlli falliranno? | Per questo motivo i controlli di un design confrontano con un rigore permissivo.Dopo la prima esecuzione reale potete accettare una volta l'aspetto reale dal report di affidabilità. |
| Posso importare un singolo elemento, come un nuovo pulsante? | Sì.Importato dove è già mostrata una registrazione, il design viene collocato sopra di essa, e potete spostarlo dove si troverà l'elemento. |
Per preparare un test da semplici immagini di qualsiasi strumento di design, vedete Testare una funzionalità prima che esista.Per accettare l'aspetto reale dopo la prima esecuzione, vedete Quando l'app cambia di proposito.
Design in Figma
Test pronto
Prima che la funzionalità sia realizzata
Sincronizzare
Ogni volta che il design cambia
Ancora bloccati?Diteci cosa stavate cercando di fare e rispondiamo entro un giorno lavorativo.Ask our team