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 do quadro depois que você passar por eles

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

1. Preparar quadros para rolagem: o conteúdo precisa se estender além dos limites das dimensões do quadro.
2. Aplicar rolagem ao quadro: defina se o quadro terá rolagem vertical, horizontal, ambas ou nenhuma
3. Aplicar comportamento de rolagem aos objetos no quadro: defina como os objetos se comportam ao rolar. Eles podem rolar junto com o quadro pai, ficar fixos ou se manter no topo do quadro.

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

Preparar quadros para rolagem

Para adicionar comportamento de rolagem a um quadro, ele precisa conter conteúdo que ultrapasse 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 do quadro

Para redimensionar um quadro:

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

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 do quadro principal.

Recortar conteúdo

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

1. Selecione o quadro 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 rolagem com transbordamento a quadros

A rolagem define como os usuários podem interagir com o conteúdo que ultrapassa as dimensões de um quadro.

Você só pode aplicar o comportamento de transbordo a quadros. Isso vale tanto para os quadros que estão diretamente na tela (quadros de nível superior), bem como quadros aninhados em outros quadros ou camadas.

Para ativar a rolagem em um quadro:

1. Selecione um quadro.
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 do quadro 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 comportamento de rolagem aos objetos dentro de um quadro

A posição de rolagem controla o comportamento das camadas dentro de um quadro quando o conteúdo é rolado além delas.Você só pode aplicar uma posição de rolagem a cada camada.

1. Selecione um objeto, grupo ou componente. O objeto precisa estar em um quadro com comportamento 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 no quadro à 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 um quadro.

Não é possível atribuir uma posição de rolagem fixa a nenhum objeto em um quadro 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 move para cima das outras camadas no quadro 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 um quadro que tenha rolagem vertical.

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

Se o objeto aderente estiver aninhado em outra camada em um quadro, 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 os quadros.

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

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