1
resposta

Barra de progresso ao scrollar textos da página (UI / FIGMA)

Estou tentando criar uma barra de progresso quando a pessoa scrollar para ler o artigo, aparece o status de quanto ela leu até o momento nessa barra, não achei nenhum conteúdo sobre isso, não sei nem qual seria o nome disso.

1 resposta

Olá, Tatiane. Tudo bem com você?

O que você está procurando é conhecido como "Reading Progress Bar" ou "Scroll Progress Bar".

No Figma, para criar uma barra de progresso ao rolar a página, você pode usar a funcionalidade de prototipagem. Aqui está um exemplo de como você pode fazer isso:

  1. Crie uma barra de progresso como um retângulo na parte superior da sua tela.
  2. Crie um segundo retângulo (que será a barra de progresso) e coloque-o dentro do primeiro retângulo.
  3. No painel de prototipagem, defina a ação de overflow (transbordamento) para vertical scrolling (rolagem vertical).
  4. Ajuste o tamanho do frame para corresponder ao tamanho visível da tela.
  5. Coloque o conteúdo que você deseja rolar dentro do frame.
  6. Ajuste a barra de progresso para aumentar de tamanho à medida que o usuário rola para baixo.

Infelizmente, o Figma ainda não suporta a função de alterar o tamanho de um objeto com base na posição de rolagem do usuário. Portanto, você pode não ser capaz de criar uma barra de progresso de leitura totalmente funcional dentro do Figma. No entanto, você pode criar um mockup de como a barra de progresso deve se comportar e explicar a funcionalidade para os desenvolvedores.

Qualquer dúvida estou à disposição.

Até mais e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!