Guia do Usuário Cancelar

Trabalhar com animações Lottie

Saiba como importar e usar Lottie para criar animações sofisticadas no Adobe XD.

Lottie é um formato de animação leve que pode ser exportado do Adobe After Effects como arquivos JSON. Os arquivos Lottie são menores em tamanho em comparação com formatos como GIFs e PNGs animados. Os desenvolvedores podem reutilizar arquivos Lottie em seu código.

Importar Lottie e definir uma opção de reprodução
Importar Lottie e definir uma opção de reprodução

O XD permite que você importe arquivos Lottie e controle a reprodução Lottie. Depois de definir a reprodução de Lottie e conectar seu protótipo, você pode visualizá-lo antes do compartilhamento.

Leitura sugerida

Importar arquivos Lottie

Para importar seu arquivo Lottie para o XD, arraste-o para uma prancheta. Ou selecione Arquivo > Importar.

Depois de importado, o primeiro quadro do Lottie é exibido na tela. Se o primeiro quadro do Lottie estiver em branco, você verá um quadro em branco na tela. Nesses casos, use o painel Camadas para localizar o Lottie. 

Quando você seleciona o Lottie no modo de design, você vê um ícone de reprodução   no canto superior esquerdo.

Definir uma opção de reprodução

Definir uma opção de reprodução para o seu Lottie
Definir uma opção de reprodução para o seu Lottie

Depois de importar seu arquivo Lottie para o XD, controle quando ele será reproduzido. Siga estas etapas para definir uma opção de reprodução:

  1. No modo de Design, selecione o ativo Lottie na tela.
  2. Na seção Animações do Inspetor de propriedades, escolha uma predefinição:
  3. Se você quiser que seu Lottie toque em loop, clique no botão Repetir na reprodução .

Opções de reprodução e interações associadas

Quando você define uma opção de reprodução para o seu Lottie no modo de Design, as interações associadas são definidas automaticamente no modo de Protótipo.

Reproduzir automaticamente

Quando a opção Reproduzir automaticamente é escolhida, o acionador de Tempo é definido automaticamente com um atraso de 0 segundos.

Reproduzir automaticamente - Modo de design

Reproduzir automaticamente - Modo de protótipo

Reproduzir ao tocar

Quando a opção Reproduzir ao tocar é escolhida, o acionador Tocar é definido automaticamente com a ação padrão como Alternar reprodução/pausa.

Reproduzir ao tocar - Modo de design

Reproduzir ao tocar - Modo de protótipo

Sem reprodução

Quando a opção Sem reprodução é escolhida, nenhuma interação é definida no modo de protótipo.

Personalizar a reprodução de Lottie

Escolher Editar reprodução para personalizar a reprodução
Escolher Editar reprodução para personalizar a reprodução

Para personalizar a reprodução de Lottie, na seção Animações do Inspetor de propriedades, selecione Editar reprodução.

Ao selecionar Editar reprodução, você muda automaticamente para o modo de Protótipo.

No modo de Protótipo, opte por qualquer uma destas personalizações:

Escolha um destes acionadores: Tempo (defina Atraso em mais de 0 segundos), Teclas e controle ou Voz.

Personalize a reprodução escolhendo o acionador Tempo com Atraso definido em mais de 0 segundos
Escolher o acionador Tempo com Atraso definido em mais de 0 segundos

Altere a ação de reprodução de Lottie do acionador Tocar de Alternar reprodução/pausa para Reproduzir ou Pausar.

Personalizar a reprodução escolhendo o acionador Tocar com Reproduzir ou Pausar como a ação
Escolher o acionador Tocar com Reproduzir ou Pausar como a ação

Usar a reprodução de Lottie com outras interações

Lottie com um acionador Fim da reprodução que faz a transição para uma prancheta
Lottie com um acionador Fim da reprodução que faz a transição para uma prancheta

Depois de definir uma opção de reprodução para seu Lottie, explore a conexão com outras interações:

  • Defina uma interação Fim da reprodução do Lottie para acionar uma ação após a reprodução.
  • Reproduza várias animações Lottie automaticamente ao mesmo tempo (no máximo 20).
  • Reproduza animações de Lottie com um vídeo ao mesmo tempo.

Para saber mais sobre prototipagem no XD, consulte Criar protótipos interativos.

Exemplos de prototipagem

Agora que você já sabe como definir uma opção de reprodução para seu Lottie e conectá-lo a outras interações, vamos usar alguns exemplos.

Baixar arquivos de amostra

Pratique a prototipagem com animações Lottie usando os arquivos de amostra:

Exemplo 1: Animar tela de carregamento

Saiba como animar uma tela de carregamento usando Lottie.

Ex 1-artboard 1

  1. No modo de design, importe o arquivo plant-loading.json e coloque-o na prancheta. Defina-o como Reproduzir automaticamente.
  2. No modo de protótipo, conecte o Lottie ao Ex 1-artboard 2 e defina-o como um acionador Fim da reprodução com Tipo de ação como Transição.

Ao concluir a conexão das interações, visualize o protótipo e verifique as interações.

Exemplo 2: Animar uma seleção de menu

Saiba como animar itens de menu quando eles são selecionados.

Ex 2-artboard 1

  1. No modo de design, importe os arquivos plant 1 (Spearmint) e plant 2 (Sansevieria) e coloque-os nos respectivos containers. Defina-os como Sem reprodução.
  2. No modo de protótipo:
  • Conecte plant 1 e seu container a Ex 2-artboard 2.
  • Conecte plant 2 e seu container a Ex 2-artboard 3.

Defina-os como um acionador Tocar com Tipo de ação como Transição.

Ex 2-artboard 2

No modo de design, crie uma cópia de plant 1 e coloque-a na prancheta. Defina-a como Reproduzir automaticamente.

Ex 2-artboard 3

No modo de design, crie uma cópia de plant 2 e coloque-a na prancheta. Defina-a como Reproduzir automaticamente.

Ao concluir a conexão das interações, visualize o protótipo e verifique as interações.

Mais exemplos

Explore mais exemplos envolvendo vídeos, animações de Lottie e estados do componente.

Visualizar e compartilhar seu protótipo

Visualizar o protótipo no aplicativo, em um dispositivo móvel ou em um navegador
Visualizar o protótipo no aplicativo, em um dispositivo móvel ou em um navegador

Quando seu projeto estiver pronto para ser compartilhado com as partes interessadas, defina as permissões de acesso apropriadas e publique o protótipo ou o link de especificações de design e compartilhe-o.

Saiba mais

Assista a este vídeo de 2 minutos para conhecer algumas dicas profissionais sobre como trabalhar com Lottie no XD.

Limitações atuais

  • Você pode importar apenas arquivos Lottie com menos de 15 MB para o XD. Não há limites para o número de arquivos Lottie que podem estar em um único documento do XD.
  • O Lottie não será reproduzido automaticamente se um vídeo estiver configurado para ser reproduzido automaticamente.
  • Lottie será interrompido se outros acionadores de prototipagem forem iniciados.
  • Se uma animação Lottie usa uma fonte de desktop, a fonte não aparecerá na reprodução na Web.
  • Você não pode substituir o Lottie em uma repetição de grade.
  • Não é possível importar animações Lottie fazendo referência a um recurso externo, como uma imagem.
  • Não é possível importar um arquivo JSON que não seja Lottie JSON.

Recursos relacionados

Tem alguma dúvida ou sugestão?

pergunte à comunidade

Você tem alguma dúvida ou sugestão? Participe da comunidade do Adobe XD. Gostaríamos muito de ver suas criações e ouvir o que você tem a dizer!

Receba ajuda com mais rapidez e facilidade

Novo usuário?