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.
  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.
    • 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    para visualizar suas animações nos navegadores compatíveis. Para compartilhar seu protótipo com as pessoas interessadas, clique em Compartilhar > Compartilhar para revisão

    Observação:

    O XD não oferece não permite rolagem durante a visualização de pranchetas de 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)


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? Continue lendo para conhecer as melhores práticas e assista a Talin Wadsworth, Designer Principal do Adobe XD, compartilhando algumas dicas legais sobre como usar a Animação Automática.

Duração: 58 minutos e 6 segundos.


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