Guia do Usuário Cancelar

Criar pranchetas com rolagem

Pesquisar
  1. Guia do usuário do Adobe XD
  2. Introdução
    1. Novidades no Adobe XD
    2. Perguntas frequentes
    3. Criar designs e protótipos e compartilhar com o Adobe XD
    4. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    5. Noções básicas sobre a área de trabalho
    6. Alterar o idioma do aplicativo no Adobe XD
    7. Acessar kits de design de interface
    8. Acessibilidade no Adobe XD
    9. Atalhos de teclado
    10. Dicas e truques
    11. Opções de assinatura do Adobe XD
    12. Alterações no plano inicial do XD
  3. Design
    1. Pranchetas, guias e camadas
      1. Introdução às pranchetas
      2. Usar guias e grades
      3. Criar pranchetas com rolagem
      4. Trabalhar com camadas
      5. Criar grupos de rolagem
    2. Formas, objetos e caminho
      1. Selecionar, redimensionar e girar objetos
      2. Mover, alinhar, distribuir e organizar objetos
      3. Agrupar, bloquear, duplicar, copiar e virar objetos
      4. Definir traçado, preenchimento e sombra projetada para objetos
      5. Criar elementos de repetição
      6. Criar designs de perspectiva com transformações em 3D
      7. Editar objetos usando operações boolianas
    3. Texto e fontes
      1. Trabalhar com ferramentas de desenho e texto
      2. Fontes no Adobe XD
    4. Componentes e estados
      1. Trabalhar com componentes
      2. Trabalhar com componentes aninhados
      3. Adicionar vários estados aos componentes
    5. Mascaramento e efeitos
      1. Criar uma máscara com formas
      2. Trabalhar com efeitos de desfoque
      3. Criar e modificar degradês
      4. Aplicar efeitos de mesclagem
    6. Layout
      1. Redimensionamento responsivo e restrições
      2. Definir preenchimento fixo para componentes e grupos
      3. Criar designs dinâmicos com pilhas
    7. Vídeos e animações Lottie
      1. Trabalhar com vídeos
      2. Criar protótipos usando vídeos
      3. Trabalhar com animações Lottie
  4. Protótipo
    1. Criar protótipos interativos
    2. Animar protótipos
    3. Propriedades de objeto compatíveis com a Animação automática
    4. Criar protótipos com teclados e controles
    5. Criar protótipos usando reprodução e comandos de voz
    6. Criar transições temporizadas
    7. Adicionar sobreposições
    8. Criar protótipos de voz
    9. Criar links de âncora
    10. Criar hiperlinks
    11. Visualizar designs e protótipos
  5. Compartilhar, exportar e analisar
    1. Compartilhar pranchetas selecionadas
    2. Compartilhar designs e protótipos
    3. Definir permissões de acesso para links
    4. Trabalhar com protótipos
    5. Revisar protótipos
    6. Trabalhar com especificações de design
    7. Compartilhar especificações de design
    8. Inspecionar especificações de design
    9. Navegar em especificações de design
    10. Revisar e comentar especificações de design
    11. Exportar ativos de design
    12. Exportar e baixar ativos de especificações de design
    13. Compartilhamento em grupo para corporações
  6. Sistemas de design
    1. Sistemas de design com as Bibliotecas da Creative Cloud
    2. Trabalhar com ativos de documento no Adobe XD
    3. Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
    4. Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
    5. Trabalhar com tokens de design 
    6. Usar ativos das Bibliotecas da Creative Cloud
  7. Documentos na nuvem
    1. Documentos na nuvem no Adobe XD
    2. Colaborar e coeditar designs
    3. Coeditar documentos compartilhados com você
  8. Integrações e plug-ins
    1. Trabalhar com ativos externos
    2. Trabalhar com ativos de design do Photoshop
    3. Copiar e colar ativos do Photoshop
    4. Importar ou abrir designs do Photoshop
    5. Trabalhar com ativos do Illustrator no Adobe XD
    6. Abrir ou importar designs do Illustrator
    7. Copiar vetores do Illustrator para o XD
    8. Plug-ins para o Adobe XD
    9. Criar e gerenciar plug-ins
    10. Integração do JIRA com o XD
    11. Plug-in do Slack para XD
    12. Plug-in do Zoom para XD
    13. Publicar o design do XD no Behance
  9. XD para iOS e Android
    1. Visualizar em dispositivos móveis
    2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
  10. Solução de problemas
    1. Problemas conhecidos e corrigidos
      1. Problemas conhecidos
      2. Problemas corrigidos
    2. Instalação e atualizações
      1. O XD aparece como não compatível no Windows
      2. Código de erro 191
      3. Código de erro 183
      4. Problemas ao instalar plug-ins XD
      5.  Solicitação para instalar e reinstalar o XD no Windows 10
      6. Problemas com a migração de preferências
    3. Inicialização e falha
      1.  O XD trava ao ser iniciado no Windows 10
      2.  O XD fecha ao fazer logoff da Creative Cloud
      3. Problema com o status da assinatura no Windows
      4. Aviso de aplicativo bloqueado ao iniciar o XD no Windows
      5. Geração de dump de falha no Windows
      6. Coleta e compartilhamento de registros de falhas
    4. Documentos na nuvem e bibliotecas da Creative Cloud
      1. Problemas com os documentos na nuvem do XD
      2. Problemas com componentes vinculados
      3. Problemas com bibliotecas e links
    5. Prototipagem, publicação e revisão
      1. Não é possível gravar interações de protótipo no macOS Catalina
      2. Problemas com fluxos de trabalho de publicação
      3. Links publicados não são exibidos nos navegadores
      4. Protótipos não são renderizados corretamente nos navegadores
      5. Painel de comentários aparecendo repentinamente em links compartilhados
      6. Não é possível publicar bibliotecas
    6. Importação, exportação e trabalho em outros aplicativos
      1. Exportação e importação no XD
      2. Arquivos do Photoshop no XD
      3. Arquivos do Illustrator no XD
      4. Exportar do XD para o After Effects
      5. Arquivos do Sketch no XD
      6. Aplicativos de terceiros não visíveis na exportação

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.

Mais itens semelhantes

Logotipo da Adobe

Fazer logon em sua conta

Links rápidos

Veja todos os seus planos Gerenciar seus planos

Avisos legais | Política de privacidade online