Áreas clicáveis e ligações

Transformar imagens em um caminho navegável.

Para que serve

Definir quais elementos levam a outras telas e testar se a meta pode ser alcançada.

Quando usar

Para um protótipo clicável com imagens enviadas.

Antes de começar

• Telas enviadas e nomeadas
• Destino de cada botão planejado

Exemplo

A área Editar endereço abre a tela de formulário; Salvar leva à confirmação.

Passo a passo

1. Abrir Ligações. Selecione uma tela enviada e abra Ligações. Comece pela tela inicial para construir o percurso completo. Tela inicial.

1. Marcar áreas. Desenhe uma área sobre o elemento ou peça Sugerir com IA. Ajuste os limites à região que deve receber o clique. Botão Editar endereço · Área sem sobreposição indevida.

1. Definir destinos. Dê um rótulo a cada área e selecione a próxima tela ou o fim da tarefa. Repita nas telas intermediárias. Editar → formulário · Salvar → confirmação.

1. Percorrer o caminho. Selecione o modo clicável no bloco e teste da tela inicial à meta. Corrija o aviso de meta inalcançável antes de publicar. O clique abre o destino esperado.

Validar antes da coleta

A prévia lateral permite conferir o bloco; no Figma ela é estática. Para validar regras e ordem do rascunho, use Testar fluxo completo, sem criar sessões nem ocupar cotas. Figma, gravação, voz e follow-up de IA exigem o link publicado. Testar publicado abre o link real /r/[token]: essa execução pode gerar respostas e consumir cota. Separe esses testes ao analisar a coleta.

Como ler o resultado

• Áreas com rótulo e destino
• Um caminho verificável entre início e meta

Cuidados e limites

• Sugestões da IA precisam de revisão de tamanho, rótulo e destino.
• Uma imagem com aparência de botão não navega sozinha.

Continue no guia interativo

Ligar telas com áreas clicáveis

Guias relacionados

• Trazer telas do Figma ou de imagens
• Escolher navegação e meta da tarefa
• Entrevista com IA