Um protótipo de agenda mostra quatro eventos e parece fácil de usar. Na primeira rodada com conteúdo completo, a lista ocupa várias telas. A equipe percebe que voltar do detalhe leva ao início e que um botão fixo cobre parte do último cartão. A rolagem em protótipos no Figma ajuda a tornar visíveis essas decisões antes da implementação. Para aproveitar o ensaio, use conteúdo suficiente, defina o que permanece na tela e observe como a pessoa retoma a tarefa depois de navegar.
Comece pela tarefa e desenhe o caminho de ida e volta
Imagine uma agenda de oficinas com filtros por bairro, cartões de evento e páginas de detalhe. A pessoa quer encontrar uma oficina de sábado com vaga e comparar dois horários. Ela começa no topo, passa por vários eventos, abre um detalhe e retorna para continuar a busca. Escreva essa sequência antes de configurar o protótipo. Cada parte ajuda a avaliar uma decisão. A rolagem revela a extensão da lista. O detalhe fornece a informação. O retorno mostra se a pessoa consegue recuperar a posição.
Use dados que representem os extremos do conteúdo. Acrescente nomes extensos, um aviso de inscrição encerrada e dois cartões com estruturas diferentes de horário. Coloque um item relevante perto do fim. Uma lista curta deixa passar o problema da barra fixa, pois a pessoa nunca chega a uma posição em que ela encobre alguma coisa. Prepare também uma lista vazia ou de um resultado. O comportamento do contêiner deve continuar compreensível quando o conteúdo cabe e a rolagem deixa de ser necessária.
Separe a janela visível da altura do conteúdo
A documentação do Figma sobre rolagem e transbordamento no protótipo descreve a configuração de uma direção de rolagem quando o conteúdo excede o frame. Para ensaiar a agenda, crie uma janela de visualização com altura definida e coloque nela uma lista mais alta. Na edição, confirme que os itens que devem rolar pertencem à região correta. Uma lista colocada como vizinha do frame pode aparecer no arquivo e ficar fora do comportamento esperado na apresentação.
Se o contêiner cresce junto do conteúdo, a diferença de altura necessária para demonstrar a rolagem pode desaparecer. Examine as regras de dimensionamento do layout automático e o recorte do frame. Um teste rápido consiste em mover para a parte inferior um cartão com título fácil de reconhecer e tentar alcançá-lo na prévia. Se não houver movimento, revise a estrutura e a direção selecionada. Se toda a tela se move quando só a lista deveria fazê-lo, identifique qual frame recebeu a configuração e qual deles tem altura limitada.
Mantenha na tela apenas o que ajuda durante o percurso
Uma barra persistente de filtros pode permitir ajustar o bairro sem voltar ao topo. Ela também consome altura e pode ocultar resultados quando há quebra de linha. Teste a agenda com e sem a barra persistente, mantendo a tarefa e o conteúdo iguais. Observe se a pessoa realmente precisa dos filtros enquanto percorre a lista. Em uma tela estreita, uma barra com rótulos longos pode deixar visível apenas parte de um cartão. Essa redução de área altera a forma de comparar horários e títulos.
Use o controle de posição disponível para o elemento no contexto do frame rolável e confirme na prévia que o resultado corresponde ao comportamento descrito. Defina o que ocorre quando o conteúdo chega ao fim. Um botão inferior precisa deixar a última ação da lista alcançável. Reserve espaço quando necessário e teste o toque ou clique perto da borda. Documente onde a barra se prende e quando muda de estado. A implementação pode depender de regras de layout que o arquivo de design apenas representa.
Use regiões internas de rolagem com um motivo claro
A agenda pode ter uma fileira horizontal de datas dentro da página vertical. Antes de colocar duas regiões roláveis, determine como a pessoa percebe que existem mais opções. Um fragmento visível do próximo item pode sugerir continuidade, desde que nomes e estados continuem legíveis. Teste também uma largura em que todos os itens cabem. O artigo sobre quebra de itens com wrap no Figma ajuda a analisar se os controles devem fluir para outra linha em vez de exigir deslocamento horizontal.
Se a fileira mantém a rolagem, verifique como ela convive com os gestos verticais da lista e como será operada por teclado no produto. Use datas que comecem em um mês e terminem em outro para revelar ambiguidades. Uma data selecionada fora da área visível pode deixar a pessoa sem saber qual filtro está ativo. Apresente a seleção de forma compreensível no contexto e combine com desenvolvimento as regras para revelar o item selecionado. O ensaio deve incluir a troca de data depois que a pessoa já percorreu parte da lista.
Modele o retorno sem presumir que todo destino preserva a posição
Consulte a documentação do Figma sobre preservação da posição de rolagem em protótipos para entender quais configurações se aplicam ao percurso. Monte um caso com ida ao detalhe e volta. Na apresentação, escolha um item perto do fim, abra o detalhe e retorne pelo controle planejado. Compare a posição resultante com a expectativa de retomar a busca. Repita a tentativa com duas alturas de conteúdo, pois a posição pode ser válida em uma lista e impossível em outra mais curta.
Ao trocar o filtro, talvez faça sentido mostrar os novos resultados desde o início. Ao voltar de um detalhe, pode ser importante preservar o cartão que a pessoa acabou de ver. Trate essas situações separadamente na especificação. Distinga posição de rolagem, filtros selecionados e foco. Guardar apenas a altura pode trazer a pessoa de volta a um ponto sem relação com o item original se a ordem da lista mudou. Anote qual item deve servir de referência quando a equipe implementar a retomada e o que ocorre quando ele saiu do conjunto.
Faça transições que ajudem a reconhecer a mudança
A transição entre a lista e o detalhe pode reforçar que o cartão se tornou uma página. Primeiro confirme que cada tela faz sentido sem animação. Depois avalie se algum movimento ajuda a ligar as duas. O artigo sobre Smart Animate no Figma discute como usar a transição para explicar o que mudou. Na agenda, o título do cartão pode orientar essa continuidade. O efeito visual perde valor se atrasa a leitura da informação ou se esconde o fato de que a pessoa voltou a uma posição diferente.
Na revisão, separe comentários sobre movimento de comentários sobre navegação. Um salto abrupto pode vir de uma animação pouco adequada ou da restauração incorreta do ponto de retorno. Para diagnosticar, teste os frames com a transição simplificada. Verifique a posição da barra fixa e o recorte do conteúdo nas duas telas. Compare também o percurso quando a pessoa abre um evento pelo primeiro cartão e quando abre pelo último. Essa variação ajuda a distinguir um problema da transição de um problema da estrutura.
Registre o que foi simulado e o que precisa de teste no produto
Entregue o link do protótipo junto de uma sequência de teste. Identifique onde a rolagem começa, o que permanece visível e o resultado esperado ao retornar. Anote situações que o protótipo simplifica, como atualização da lista pelo servidor ou carregamento de imagens. Ao passar para a implementação, transforme as hipóteses em verificações observáveis. Por exemplo, ao voltar de um evento, o foco retorna a um elemento útil e o item relacionado continua localizável dentro dos resultados.
Termine pedindo a alguém que compare duas oficinas sem receber instruções sobre onde rolar. Observe onde a pessoa pausa, que controles usa para retornar e se encontra o segundo horário. Depois peça que escolha uma oficina em outro bairro. A mudança de tarefa testa o comportamento oposto, em que preservar a posição anterior pode atrapalhar. O protótipo fica mais informativo quando mostra as duas situações e dá à equipe condições de reproduzir o que funcionou.
Ensaie um retorno em que o conteúdo mudou
Duplique a lista e retire a oficina consultada, como se as inscrições tivessem acabado durante a visita ao detalhe. Use essa segunda lista para discutir o que acontece quando a referência original desaparece. A equipe pode levar a pessoa ao resultado mais próximo e apresentar uma atualização breve, quando a mudança for relevante. Experimente também abrir um detalhe por link direto, situação em que não existe uma posição anterior para restaurar. Escreva a regra de retorno para esse percurso separadamente. Esses dois casos revelam dependências de navegação que ficam invisíveis quando todos os testes começam no primeiro frame da agenda.