Em pranchetas de predefinição: arraste o ponto mais baixo da prancheta para baixo para aumentar o comprimento além da tela do dispositivo. Uma linha pontilhada indica o começo do conteúdo com rolagem.
Última atualização em
10/02/2023
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.
Criar uma rolagem vertical
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.
Conecte as pranchetas no modo de Protótipo.
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.
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?
- 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.
- Para alongar a prancheta selecionada, arraste o ponto inferior da prancheta para baixo. Uma linha pontilhada indica a altura original da prancheta.
- 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.
Conforme você vai criando seus designs para desktop ou dispositivos móveis, deseja ver partes do site apenas quando roladas e fixar os elementos de design sem Precisão decimal?Assista a este vídeo para saber mais sobre pranchetas roláveis e elementos fixos.
Duração do vídeo: 1 minuto.
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.
Recursos relacionados
Tem alguma dúvida ou sugestão?
Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer.
Criar protótipos de UX com o Adobe XD
Crie modelos interativos para sites e aplicativos para dispositivos móveis.
