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

Com o recurso Animação automática, você pode criar protótipos animados com os efeitos do YouTube de deslizar/arrastar ou de ondulação que ajudam a visualizar o movimento do conteúdo entre pranchetas. Isso ajuda a acompanhar melhor o progresso do protótipo, além de melhorar a experiência do usuário como um todo.

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

Criar um protótipo animado

  1. Antes de começar:

    • Os objetos que você deseja animar precisam ter o mesmo nome entre as pranchetas.
    • Você pode animar apenas propriedades de objeto específicas, como tamanho, posição e rotação. Consulte Propriedades de objeto para saber mais.
  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 criar um cartão sensível a toque, 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 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. Selecione   no aplicativo do XD para visualizar as animações em navegadores compatíveis no desktop, em dispositivos móveis ou na Web. Para compartilhar o protótipo com os envolvidos no projeto no aplicativo de desktop do XD, clique em Compartilhar e selecione Compartilhar para revisão.

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 as pranchetas e selecione estas opções na tela Acionador:

  • 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: 1 minuto.


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 na tela Acionador:
  • 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)


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

Práticas recomendadas

Você sabia que pode experimentar as diversas opções de Atenuação para alterar a experiência do usuário de seus protótipos animados? Leia as práticas recomendadas e assista a alguns truques estilosos feitos com a Animação automática.

Duração: 1 minuto.


Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online