Criar grupos de rolagem no Adobe XD

Os grupos de rolagem no Adobe XD permitem definir áreas em uma prancheta que rolam independentemente do resto da prancheta para criar efeitos de rolagem horizontal ou vertical. Os grupos de rolagem são úteis na criação de elementos da interface do usuário, como carrossel de imagens, controles deslizantes de produtos ou mapas interativos.

Continue lendo para saber como usar grupos de rolagem horizontal, vertical e uma combinação de grupos de rolagem horizontais e verticais no XD.

Antes de continuar

Confirme se você está familiarizado com os modos de Design, Protótipo e Compartilhamento no XD.

Limitação

Os grupos de rolagem não funcionam em especificações de design. Como solução alternativa, adicione grupos de rolagem em uma prancheta separada e publique-os como parte das especificações de design.

Criar um efeito de rolagem horizontal

Quer criar um protótipo de carrossel usando rolagem horizontal? Assista a esta animação e siga estas etapas para saber como criar um efeito de rolagem horizontal.

1. No modo de Design, selecione os objetos que você deseja transformar em um grupo de rolagem.
   
2. Clique no ícone  no Inspetor de propriedades. A janela ajusta automaticamente suas dimensões para fornecer uma experiência de visualização instantânea. Você também pode usar ⇧⌘H no macOS e Shift + Ctrl +H no Windows para criar um efeito de rolagem horizontal.
   
3.  Para exibir todo o efeito de rolagem horizontal, selecione  .
   

Criar um efeito de rolagem vertical

Quer criar um protótipo de carrossel usando rolagem vertical? Assista a esta animação e siga estas etapas para saber como criar um efeito de rolagem vertical.

1. No modo de Design, selecione os objetos que você deseja transformar em um grupo de rolagem.
   
2. Selecione o ícone  no Inspetor de propriedades para rolar para cima e para baixo. A janela ajusta automaticamente suas dimensões para fornecer uma experiência de visualização instantânea. Você também pode usar ⇧⌘V no macOS e Shift + Ctrl +V no Windows para criar um efeito de rolagem vertical.
   
3. Para visualizar todo o efeito de rolagem vertical, selecione  .
   

Criar efeito de rolagem horizontal e vertical

Combinar efeitos de rolagem vertical e horizontal pode auxiliar na criação de objetos que permitem rolar em todas as direções, como mapas interativos. Assista a esta animação e siga estas etapas.

1. No modo de Design, selecione os objetos que você deseja transformar em um grupo de rolagem.
   
2. Selecione o ícone  no Inspetor de propriedades. A janela ajusta automaticamente suas dimensões para fornecer uma experiência de visualização instantânea. Você também pode usar ⇧⌘D no macOS e Shift + Ctrl +D no Windows para criar uma combinação de efeitos de rolagem horizontal e vertical.
   
3. Para exibir todo o efeito de rolagem horizontal e vertical, selecione  .
   

Saiba mais

Para saber mais sobre grupos de rolagem vertical e horizontal no XD, assista a este vídeo.

Duração: 6 minutos

Dicas e truques

Agora que você sabe como criar efeitos de rolagem horizontal e vertical no XD, conheça algumas dicas e truques:

• Ao visualizar seu protótipo no Windows e na Web, use o trackpad, o botão de rolagem do mouse e as ações de clicar e arrastar para verificar os efeitos de rolagem horizontal e vertical.
• Na visualização do macOS, use o trackpad, o botão de rolagem do mouse e as ações de clicar e arrastar para verificar os efeitos de rolagem horizontal e vertical.
• Combine grupos de rolagem com estados do componente e tipos de ação como Sobrepor, Animação automática e Rolar para. 
• Use preenchimento para adicionar controles melhores de deslocamento aos seus grupos de rolagem.
• Use grupos de rolagem aninhados ao criar vários níveis de rolagem em seus designs.

O que vem por aí?

Agora você já sabe como criar efeitos de rolagem horizontal e vertical. Continue em frente e aprenda a criar protótipos interativos e compartilhá-los com designers ou colaboradores para feedback.

Tem alguma dúvida ou sugestão?