Manual do Figma: do arquivo aos resultados

O caminho completo de um teste com protótipo do Figma, na ordem em que acontece. As imagens usam o Aurora Pay, um app de demonstração.

Para que serve

Disponibilizar telas nomeadas e ordenadas para os blocos visuais. Este manual junta numa página só tudo o que vem depois: montar a tarefa, conferir o caminho, testar, publicar e ler os resultados.

Quando usar

Ao testar um protótipo existente ou imagens sem arquivo Figma. Leia antes do primeiro teste com Figma e volte aqui quando uma tarefa não terminar onde deveria.

Antes de começar

• Permissão no arquivo do Figma ou imagens prontas
• Estudo editável

Prepare o arquivo no Figma

• Ligue as telas. O UXTap segue as interações de navegação do Figma (Navigate to, Open overlay e Swap overlay) a partir da tela inicial. Quadros que nenhuma ligação alcança ficam de fora.
• Copie o link certo. Use o link de Compartilhar protótipo com o node-id da tela inicial. Link de página, sem uma tela escolhida, é recusado.
• Libere a visualização. Deixe o arquivo em «Qualquer pessoa com o link pode ver». Se o Figma pedir login ou senha, quem responde vê «Este protótipo está privado» e a tarefa não acontece.
• Dê nomes diferentes a telas parecidas. Quando cada fluxo tem a sua cópia da mesma tela, inclua o fluxo no nome (por exemplo «Link criado — com valor»). Quadros com o mesmo nome e tamanho aparecem como «cópia 1 de 6» e são fáceis de confundir.
• Feche os overlays. Teclados e outras sobreposições precisam de uma ligação para fechar ou seguir; sem ela, a pessoa fica presa.
• Até 80 telas. Cada importação aceita até 80 telas; divida fluxos maiores.

Exemplo

Tarefa: «Você precisa cobrar R$ 150 de um aluno. Crie um link de cobrança com esse valor». Tela inicial: Início. Meta: a tela «Link criado» do mesmo fluxo, e não a cópia dela que existe no fluxo «Link sem valor».

Passo a passo

1. Conectar o Figma. Abra o estudo, vá à aba Protótipo e clique em Conectar Figma. Autorize a leitura dos arquivos; ao voltar, aparece «Conectado como» com o seu usuário.

2. Importar o fluxo. Cole o link no campo Link do protótipo e clique em Importar. Acompanhe a contagem de telas até o selo Pronto. Se aparecer um erro, a mensagem diz o que corrigir: acesso ao arquivo, link de página ou limite de telas.

3. Conferir a galeria. Confira se a tela inicial e a tela final estão no conjunto. Clique numa miniatura para ampliar e use o olho para ocultar o que não entra no teste; ocultar só organiza a galeria e os seletores. O selo «cópia i de n» marca quadros repetidos.

4. Criar o bloco. Em Montar, clique em Adicionar bloco e escolha Teste de protótipo. Escreva a Instrução da missão, escolha Figma interativo em Exibição e selecione o protótipo importado.

5. Definir início e meta. Escolha a Tela inicial e o Modo de meta: Chegar numa tela (marque as Telas de meta) ou Seguir um caminho exato (marque o Caminho esperado, na ordem). A tarefa termina só na tela escolhida: a cópia igual de outro fluxo não conta.

6. Conferir o caminho com o Figma. Se um passo não tiver ligação a partir do anterior, o editor avisa «Este caminho não existe no protótipo do Figma:» e mostra para onde o protótipo leva dali. Troque o passo pela tela sugerida ou clique em Usar este caminho, que propõe o caminho real pelas telas que você marcou e também ajusta a tela inicial. Nada muda sem o seu clique.

7. Usar o percurso de um teste. Outra forma segura de montar o caminho: faça a tarefa uma vez pelo link publicado, volte ao bloco e clique em Usar o percurso de um teste. Escolha o teste, clique na tela em que a tarefa deve terminar e confirme.

8. Dar uma saída. Deixe Permitir desistir ligado ou preencha Tempo limite (segundos, opcional). Sem nenhum dos dois o estudo não publica, para ninguém ficar preso na tarefa.

9. Testar a tarefa. Prévia em nova aba roda o protótipo de verdade, no computador ou no celular, sem gravar respostas. Ao chegar à meta aparece «Você chegou na tela certa.» com o botão Continuar. A Prévia do estudo confere a lógica com uma resposta simulada.

10. Publicar. Clique em Publicar. Cada publicação cria uma versão nova, e as respostas ficam ligadas à versão em que foram coletadas.
11. Trazer mudanças do Figma. Com Versão do Figma em Arquivo atual (recomendado), o que você editar no Figma aparece para quem responde: evite mexer no arquivo durante a coleta. Para atualizar as imagens dos resultados, clique em Reimportar na aba Protótipo, escolha a importação nova no campo Protótipo do bloco, refaça início, meta e caminho e publique de novo.

Como ler o resultado

• Telas disponíveis na aba Protótipo
• Importação selecionável nos blocos visuais
• Em Resultados, o cartão da tarefa tem as abas Resumo, Heatmap, Caminhos e Sessões. O Resumo traz Score UXTap, Sucesso direto, Sucesso indireto, Desistência e o tempo até o desfecho.
• Sucesso direto é chegar à meta pelo caminho esperado (ou por um alternativo); por outra rota, é indireto.
• Desistência inclui quem clicou em Desisti e quem esgotou o tempo. Protótipo que não abriu conta como incompleto e fica fora das médias.

Cuidados e limites

• Use o link de apresentação do Figma, com o fluxo correto.
• Limites do Figma podem impedir uma nova importação; uma importação compatível já existente pode ser reaproveitada.
• Colar o mesmo link outra vez reaproveita a cópia já importada. Para buscar a versão nova do arquivo, use Reimportar.
• Trocar o protótipo de um bloco apaga a tela inicial, as metas e o caminho; confira tudo antes de publicar.
• A conferência do caminho depende das ligações lidas do Figma. Se a conexão da importação foi removida, reimporte para ter a conferência de volta.
• A moldura de celular da prévia é ilustrativa; teste também num aparelho de verdade pelo link publicado, sabendo que essa participação é real.

Continue no guia interativo

Trazer telas do Figma ou de imagens

Guias relacionados

• Escolher navegação e meta da tarefa
• Ligar telas com áreas clicáveis