Importar um design do Figma
Transforme um design do Figma em imagens de referência e asserções prontas, e sincronize-as quando o design mudar.
O que a importação oferece
Um design feito no Figma já diz o que cada tela deve mostrar.Importar do Figma transforma esse design em um teste: cada tela vira uma imagem de referência na linha do tempo, com asserções prontas para o que ela mostra.
Não há conta para conectar nem chave para criar.Um pequeno plugin dentro do Figma salva o seu design em um único arquivo, e o GUI Test Studio pega esse arquivo.
A ideia em quatro etapas
Escolher
Marque as telas no Figma ou escolha um fluxo do protótipo
Exportar
O plugin salva um único arquivo de design
Importar
O GUI Test Studio encontra o arquivo sozinho
Revisar
Mantenha as asserções que quiser e depois importe
Adicione o plugin ao Figma, uma única vez
- 1
Abra Importar do Figma
No GUI Test Studio, escolha Arquivo, Importar do Figma... (Ctrl+Shift+D) ou clique no botão correspondente na barra de ferramentas.
A janela aguarda o seu design e diz o que fazer no Figma. - 2
Clique em Obter o plugin
Obter o plugin... abre a pasta que contém o plugin.Ele é instalado com o GUI Test Studio.
- 3
Adicione-o no aplicativo para desktop do Figma
No Figma, abra Plugins, Development, Import plugin from manifest... e escolha o arquivo manifest.json dessa pasta.O plugin agora está na sua lista de Plugins, para todo design que você abrir.
Exporte o seu design
- 1
Inicie o plugin
Abra o seu design no Figma, pressione Ctrl+K e inicie GUI Test Studio na guia Plugins.
- 2
Escolha o que exportar
Marque as telas que você deseja.Se o seu design tem um fluxo de protótipo, escolha o fluxo: as telas dele chegam em ordem, com os cliques que levam de uma à seguinte.
- 3
Clique em Export e deixe o arquivo em Downloads
O plugin salva um único arquivo de design.Deixe-o na pasta Downloads: o GUI Test Studio está de olho nessa pasta e abre o design em um ou dois segundos.
Revise o que será verificado
Antes que qualquer coisa seja adicionada ao teste, a janela mostra cada tela com uma caixa em volta de cada elemento encontrado e diz qual asserção cada um recebe.
| O que o design contém | A asserção que recebe |
|---|---|
| Um rótulo, um título, as palavras de um botão | Uma asserção textual: as palavras devem estar na tela. |
| Um valor que muda, como uma data ou um valor em dinheiro | Uma asserção textual dinâmica: deve haver uma data, seja qual for o dia. |
| Um ícone, um logotipo, uma imagem | Uma asserção visual: o elemento deve ter a aparência do design. |
| Um parágrafo longo ou uma foto grande | Aparece na lista, mas sem marcação: geralmente é conteúdo de exemplo. |
As asserções de uma parte da tela, como o cabeçalho ou o formulário, viajam juntas como uma única asserção de grupo.Com Verificar a disposição marcado, o grupo também verifica se os elementos estão onde o design os coloca.
| Opção | O que faz |
|---|---|
| Montar | As telas uma após a outra, ou um fluxo de protótipo com os seus cliques. |
| Criar | Imagens e asserções, ou apenas imagens quando você prefere adicionar as asserções você mesmo. |
| Onde é colocado | No indicador de reprodução ou no fim do teste. |
| Verificar como imagem / Verificar como texto | Troca o elemento selecionado de um tipo de asserção para o outro. |
| Link do design | Opcional: cole o endereço do design para abri-lo no Figma a partir do teste mais tarde. |
O que chega à linha do tempo
Clique em Importar.Tudo chega como um único cenário com o nome do seu design, então você pode movê-lo, copiá-lo ou excluí-lo por inteiro.
| Na linha do tempo | O que é |
|---|---|
| Referência visual | Uma imagem por tela, cinco segundos cada.Elas também aparecem em Designs, em Arquivos de conteúdo. |
| Asserções | As asserções de cada tela, logo depois que a imagem dela começa. |
| Eventos do mouse | Em um fluxo de protótipo, o clique que leva à tela seguinte, direcionado ao botão de onde parte o link no design. |
Um único Desfazer anula a importação inteira.
O designer exporta o fluxo “Entrar”: Login, Painel, Configurações.Você o importa e recebe três imagens, o clique em Entrar, o clique na engrenagem das configurações e as asserções de cada tela.No dia em que o aplicativo existir, o teste clica no aplicativo de verdade e informa, elemento por elemento, se ele corresponde ao design.
Quando o design muda
Os designs mudam.Quando o seu mudar, exporte-o de novo do Figma e depois escolha Arquivo, Sincronizar do Figma... no GUI Test Studio, ou clique com o botão direito na imagem do design.
| O que mudou no design | O que a sincronização faz |
|---|---|
| Um texto diz outra coisa | A asserção passa a esperar as novas palavras. |
| Um elemento tem outra aparência | A asserção recebe a nova imagem. |
| Um elemento mudou de lugar ou de tamanho | A asserção o acompanha, assim como um clique direcionado a ele. |
| Um elemento não existe mais | A asserção dele é removida. |
| Um elemento é novo | Sem marcação: nada novo é verificado a menos que você peça. |
Uma asserção que você mesmo editou também fica sem marcação, então uma sincronização nunca substitui o seu trabalho sem perguntar.A imagem da tela sempre recebe a versão mais recente, e um único Desfazer traz tudo de volta.
É bom saber
| Pergunta | Resposta |
|---|---|
| O GUI Test Studio se conecta à minha conta do Figma? | Não.O plugin salva um arquivo no seu computador e o aplicativo lê esse arquivo.Nada é enviado para lugar nenhum. |
| Onde o elemento estará na tela real? | Em qualquer lugar.Um design não diz onde a janela do aplicativo vai ficar, então essas asserções buscam na tela inteira. |
| As fontes do aplicativo não são exatamente as do design.As asserções vão reprovar? | As asserções de design comparam com um rigor Flexível por esse motivo.Depois da primeira execução real, você pode aceitar a aparência real uma única vez pelo Relatório de confiança. |
| Posso importar um único elemento, como um botão novo? | Sim.Importado onde uma gravação já é mostrada, o design é colocado sobre ela, e você pode movê-lo para onde o elemento vai ficar. |
Para preparar um teste a partir de imagens simples de qualquer ferramenta de design, veja Testar um recurso antes que ele exista.Para aceitar a aparência real depois da primeira execução, veja Quando o aplicativo muda de propósito.
Design no Figma
Teste pronto
Antes de o recurso ser construído
Sincronizar
Sempre que o design muda
Ainda com problemas?Conte o que você estava tentando fazer, e respondemos em até um dia útil.Ask our team