Animar protótipos

Saiba como criar microinterações usando a Animação automática.

Com a Animação automática, você pode criar transições imersivas para visualizar o movimento do conteúdo nas pranchetas.

Combinada com os acionadores Arrastar e Tempo, ela ajuda a criar uma ampla variedade de efeitos, como o deslizar e arrastar do YouTube, o que permite que você conte uma história melhor com seu protótipo.

Interações de ondulação em um site
Efeito de ondulação em um site

Efeito de deslizar e arrastar em um dispositivo de toque
Efeito de deslizar e arrastar em um dispositivo de toque

Para criar um protótipo animado, siga estas etapas:

  1. Antes de começar, use estas regras simples para entender como os objetos são manipulados durante a animação:

    • Se um objeto não estiver presente na prancheta de destino, ele aparecerá gradualmente.
    • Se um objeto não estiver presente na prancheta de origem, ele desaparecerá gradualmente.
    • Se um objeto apresentar uma correspondência em termos de nome de camada e grupo, os atributos serão animados. Para obter uma lista abrangente de propriedades e transições compatíveis, leia Propriedades de objeto.
    • Se quiser testar um efeito de rolagem vertical ou horizontal, use os grupos de rolagem.
  2. Conecte as pranchetas no modo de Protótipo. 

  3. Clique no conector para exibir o painel Interação no Inspetor de propriedades e configure as seguintes opções:

    • Acionador: selecione uma opção para acionar uma animação. Por exemplo, para simular um cartão sensível a toque, selecione Tocar. 
    • Ação: selecione Animação automática. Agora é possível atribuir duas ações em um só acionador, como Tocar. Para fazer isso, defina o primeiro botão Ação + no Inspetor de propriedades como Transição, Animação automática, Sobreposição, Rolar para ou Prancheta anterior e defina o segundo botão Ação + como uma ação não transacional, por exemplo, Reprodução de áudio ou Reprodução de fala. Observe que, se você selecionar a Reprodução de áudio ou a Reprodução de fala como a primeira ação, não poderá adicionar uma segunda ação.
    • Destino: selecione a prancheta de destino para a qual será feita a transição da animação.
    • Atenuação: selecione uma opção para criar efeitos de atenuação. Por exemplo, selecione Fade Out se você quiser que as animações do protótipo comecem rápidas e diminuam gradativamente de velocidade até o final.
    Fluxo de trabalho de Animação automática
    Fluxo de trabalho de Animação automática

    A. Selecionar o tipo de Acionador B. Definir a Ação como Animação Automática C. Selecionar a prancheta de destino D. Escolher um efeito de Atenuação 

  4. Para definir mais interações para um objeto, selecione o objeto com uma interação já definida e clique no botão + na prancheta. Como alternativa, você também pode clicar em + no Inspetor de propriedades.

     Lembre-se de que você pode aplicar os acionadores Tocar, Arrastar, Focalizar e Tempo uma vez e VozTeclas e Controle várias vezes. 

  5. Selecione   para visualizar suas animações nos navegadores compatíveis

     Lembre-se de que o XD não oferece suporte para rolagem durante a visualização de pranchetas com animação automática.

Exemplos e arquivos de amostra

Quer saber tudo sobre Animação automática? Comece a usar este kit de interface com interações básicas, elementos de interface de usuário, exemplos do efeito arrastar e muito mais.

Você também pode usar outros arquivos de amostra para testar a Animação automática.

Quer criar um efeito de deslizar do YouTube sem precisar lidar com linhas do tempo e quadros-chave confusos?

Conecte suas pranchetas e selecione essas opções no Inspetor de propriedades do protótipo:

  • Acionador: selecione Arrastar.  
  • Ação: selecione Animação automática.
  • Destino: selecione a prancheta de destino para a qual será feita a transição da animação.
  • Atenuação: selecione uma opção para criar efeitos de atenuação. Por exemplo, selecione Fade In/Out para que as animações do protótipo comecem lentas, atinjam uma velocidade constante e diminuam no final.

Baixe os arquivos de amostra e experimente-os você mesmo ou assista a este vídeo para obter mais informações.

Duração: 4 minuto e 3 segundos.

Quer sabe como criar um menu animado para dispositivos móveis com um efeito Fade In? 

  1. Baixe os arquivos de amostra.
  2. No modo de Protótipo, conecte o menu hambúrguer à prancheta home_expanded e selecione as seguintes opções no Inspetor de propriedades do protótipo:
  • Acionador: selecione Tocar.  
  • Ação: selecione Animação automática.
  • Destino: selecione a prancheta de destino para a qual será feita a transição da animação.
  • Atenuação: selecione o efeito Fade In.
  • Duração: selecione a duração de 0,8 segundo.

Quer adicionar animações avançadas aos seus designs? Assista a este vídeo sobre como trabalhar com o After Effects. 

Exportar do Adobe XD para o After-Effects (Duração: 1 minuto e 18 segundos)

Saiba mais

Para saber mais sobre animação automática no XD, assista a este vídeo.
Duração: 6 minutos

Logotipo da Adobe

Fazer logon em sua conta