Comportamento de transbordo e rolagem do protótipo

Defina como a rolagem e o deslocamento funcionam em seus protótipos para replicar as interações do usuário, como, por exemplo:

• Rolar para cima e para baixo em uma página longa de conteúdo
• Rolar para a esquerda e para a direita para exibir diferentes elementos em uma barra deslizante
• Deslocar ou rolar em qualquer direção, como em um mapa interativo
• Fixar objetos, como barras de navegação e menus, em uma posição na página durante a rolagem
• Criar "objetos fixos" que permaneçam na parte superior da estrutura depois que você passar por eles

Para usar a rolagem em protótipos do Figma, você deve:

1. Preparar as estruturas para rolagem: o conteúdo precisa se estender além dos limites das dimensões da estrutura.
2. Aplicar o estouro de rolagem à estrutura: defina se a estrutura terá rolagem vertical, horizontal, ambas ou nenhuma rolagem.
3. Aplicar a posição de rolagem aos objetos dentro da estrutura: defina como os objetos em sua estrutura se comportam ao passar por eles. Eles podem rolar com a estrutura principal, permanecer em uma posição fixa ou ficar na parte superior da estrutura principal.

Depois de configurar a rolagem, você também pode preservar ou redefinir a posição de rolagem ao navegar entre várias estruturas.

Preparar estruturas para rolagem

Para adicionar comportamento de rolagem a uma estrutura, ela deve ter conteúdo que se estenda além de seus limites.

Pense nisso como qualquer site: ao navegar no celular, você só consegue ver o conteúdo que cabe nas dimensões da tela. No entanto, há um conteúdo "oculto" que existe além do que você vê na tela e que só pode ser visto com a rolagem.

Estenda o conteúdo para além das dimensões da estrutura

Para redimensionar uma estrutura:

1. Selecione a estrutura que gostaria de atualizar.
2. Abra o painel Design na barra lateral direita.
3. Passe o mouse sobre a borda da estrutura até que o cursor apareça.
4. Arraste a caixa de delimitação para redimensionar a estrutura.

Para garantir que cada objeto fique dentro do quadro selecionado, verifique a seção Camadas no painel de navegação esquerdo. Os objetos secundários ficam aninhados abaixo da estrutura principal.

Recorte de conteúdo

Você pode ocultar qualquer conteúdo que ultrapasse os limites de uma estrutura com o recurso Recortar conteúdo.

1. Selecione a estrutura que gostaria de atualizar.
2. Abra a aba Design no painel de propriedades à direita.
3. Na seção Layout, marque a caixa ao lado de Recortar conteúdo.

Aplicar o estouro de rolagem a estruturas

O estouro de rolagem define como os usuários podem interagir com o conteúdo que se estende além das dimensões de uma estrutura.

Você só pode aplicar o comportamento de transbordo às estruturas. Isso vale para as estruturas que estão diretamente na canvas (estruturas de nível superior), bem como estruturas aninhadas em outras estruturas ou camadas.

Aplicar o estouro de rolagem a uma estrutura:

1. Selecione uma estrutura.
2. Abra a aba Protótipo no painel de propriedades à direita.
3. Na seção Comportamento de rolagem, selecione a lista suspensa Transbordo. Escolha entre:
   • Sem rolagem
   • Horizontal
   • Vertical
   • Ambas as direções

Vertical

A rolagem vertical permite que os usuários deslizem ou rolem para cima e para baixo. Use esse comportamento para imitar a rolagem de um site longo ou de uma página de conteúdo em um aplicativo.

Horizontal

A rolagem horizontal permite que os usuários deslizem ou rolem para a esquerda e para a direita, mantendo a posição vertical. Use esse recurso para criar controles deslizantes para conteúdo, como produtos, galerias e bibliotecas.

Sem rolagem

Nenhuma rolagem impede que os usuários rolem em qualquer direção. O conteúdo que se estender além dos limites da estrutura não poderá ser visualizado.

Ambas as direções

As duas direções (horizontal e vertical) permitem que os usuários naveguem em qualquer direção, por exemplo, ao visualizar um mapa ou uma imagem ampliada.

Aplicar a posição de rolagem a objetos dentro de uma estrutura

A posição de rolagem define como as camadas em uma estrutura se comportam quando os usuários passam por elas. Você só pode aplicar uma posição de rolagem a cada camada.

1. Selecione um objeto, grupo ou componente. O objeto deve estar em uma estrutura que tenha estouro de rolagem aplicado.
2. Abra a aba Protótipo no painel de propriedades à direita.
3. Na seção Comportamento de rolagem ,selecione a lista suspensa Posição. Escolha entre:
   • Rolagem com objeto principal
   • Fixa
   • Nota

Rolagem com objeto principal

Os objetos que rolam com o principal se movem para cima e para baixo na estrutura à medida que você rola. Use esse comportamento para imitar o comportamento de rolar para cima e para baixo páginas mais longas de conteúdo.

Fixa

Objetos fixos não se movem, mesmo quando você rola para cima e para baixo. Por exemplo, use essa opção para fixar uma barra de status na parte superior do dispositivo ou fixar um menu na parte inferior de uma estrutura.

Não é possível atribuir uma posição de rolagem fixa a nenhum objeto em uma estrutura com layout automático, a menos que o objeto tenha uma posição absoluta aplicada.

Quando você define um objeto como fixo, o Figma o movimenta acima das outras camadas na estrutura e o rotula como Fixo na seção Camadas do painel de navegação esquerdo. Não é possível posicionar objetos de rolagem acima de camadas fixas.

Nota

Aplique a posição de rolagem aderente a qualquer objeto dentro de uma estrutura que tenha rolagem vertical.

Objetos aderentes rolam no início, mas se tornam fixos quando a borda superior atinge o topo da estrutura principal. (Se você rolar a tela para cima novamente, o objeto se soltará e se moverá para baixo na estrutura principal).

Se o objeto aderente estiver aninhado em outra camada em uma estrutura, ele permanecerá dentro dos limites do objeto principal direto. Isso significa que quando a camada principal direta for rolada para fora da visualização, o objeto aderente continuará rolando com seu objeto principal.

Verifique a seção Camadas no painel de navegação esquerdo para ver como os objetos aderentes se empilharão durante a rolagem. Todas as camadas abaixo de um objeto aderente serão roladas atrás dele, e todas as camadas acima de um objeto aderente serão roladas na frente dele. Para alterar a ordem em que seus objetos são empilhados para rolagem fixa, altere a ordem no painel de camadas.

Preservar e redefinir a posição da rolagem

Quando o protótipo contém várias páginas ou telas, você pode optar por preservar a posição de rolagem ou redefinir a posição de rolagem entre as estruturas.

• Preservar a posição de rolagem: mantém a posição de rolagem do usuário quando ele faz a transição entre estruturas
• Redefinir posição de rolagem: redefine a posição de rolagem do usuário quando for feita a transição entre estruturas

Saiba mais sobre como preservar ou redefinir a posição de rolagem em protótipos →