Criar pranchetas com rolagem

Pesquisar
Adobe XD Guia do Usuário

Nesta página

Aplica-se a: Adobe XD

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Saiba como criar pranchetas com rolagem.

Às vezes, quando você cria um design no XD, a prancheta não é longa o suficiente para enquadrar todo o conteúdo. Para acomodar dispositivos de diferentes tamanhos, você pode alongar a prancheta e personalizá-la de acordo com as suas necessidades de design, permitindo a rolagem vertical da tela.

A rolagem vertical ajuda a simular efeitos de rolagem durante a criação de listas suspensas ou sites. No entanto, você pode usar grupos de rolagem para adicionar um novo nível de interação ao criar interfaces de vários painéis, mapas e galerias de imagens horizontais.

Prancheta com rolagem

Criar uma rolagem vertical

  1. Em pranchetas predefinidas: arraste a parte mais baixa da prancheta para baixo e aumente o comprimento dela, excedendo a tela do dispositivo. Uma linha pontilhada indica o começo do conteúdo com rolagem. 

    Linha pontilhada e conteúdo com rolagem
    Linha pontilhada e conteúdo com rolagem

  2. No modo de Design, selecione as seguintes opções no Inspetor de propriedades:

    • Rolagem: selecione Vertical ou Nenhuma. 
    • Posição fixa ao rolar: selecione para fixar os elementos em uma posição para que não rolem com o conteúdo. 
    • Altura da janela: especifique a altura da janela na qual deseja exibir a prancheta. 

    Você pode aplicar um efeito de rolagem vertical para mover o conteúdo da sua prancheta para cima ou para baixo.

    Rolagem vertical em uma prancheta de tamanho personalizado
    Rolagem vertical em uma prancheta

  3. Conecte as pranchetas no modo de Protótipo.

  4. No modo de Protótipo, selecione as seguintes opções no Inspetor de propriedades:

    • Manter posição de rolagem: faz a transição para a próxima prancheta mantendo a posição da prancheta anterior. Confira este tweet para obter mais detalhes. 
    • Posição fixa ao rolar: fixa os elementos de design em uma posição para que não rolem com o conteúdo. 
    Manter posição de rolagem
    Manter posição de rolagem
    Posição fixa ao rolar
    Posição fixa ao rolar

  5. Para visualizar a prancheta, selecione Visualizar no desktop . Arraste a janela de visualização para testar a rolagem vertical.

Exemplos e arquivos de amostra

Quer trabalhar com pranchetas predefinidas para criar uma lista suspensa com rolagem vertical?

  1. Use a ferramenta Selecionar para clicar no nome da prancheta ou arrastar entre pranchetas. Você também pode clicar em um nome de prancheta no painel Camadas para selecioná-la na janela Documento.
  2. Para alongar a prancheta selecionada, arraste o ponto inferior da prancheta para baixo. Uma linha pontilhada indica a altura original da prancheta.
  3. Para visualizar a rolagem em uma prancheta, use a opção de Visualização no desktop, diretamente no XD.

Baixe os arquivos de amostra e experimente usá-los sozinho ou assista a este vídeo para saber mais.

Duração do vídeo: 3 minutos e 24 segundos.


Deseja ver partes de seu site apenas onde houver rolagem e fixar os elementos de design sem que flutuem? Essas opções podem ser úteis, já que você está criando designs para desktop ou dispositivos móveis. Assista a este vídeo para saber mais sobre pranchetas com rolagem e elementos fixos. 

Duração do vídeo: 1 minuto e 6 segundos.


Você também pode consultar a comunidade do XD para encontrar mais tutoriais e arquivos de amostra.

Dicas e truques

Para criar efeitos de rolagem horizontal em seus designs, use grupos de rolagem. Os grupos de rolagem permitem que você crie o protótipo de uma janela de conteúdo que pode ser rolada horizontalmente, verticalmente ou nas duas direções.

Práticas recomendadas

“Cabeçalhos e outros elementos fixos são como placas em uma rodovia: elas garantem que os usuários das seções correspondentes recebam informações relevantes ou os instruem em suas jornadas”, afirma Oliver Lindberg. Confira a publicação no blog sobre as práticas recomendadas de criação de cabeçalhos e outros elementos fixos (em inglês).