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!
Última atualização em
28/02/2025
Nota
A partir de julho de 2023, os arquivos Lottie para o plug-in Adobe XD foram descontinuados.
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.
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.
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:
- No modo de Design, selecione o ativo Lottie na tela.
- Na seção Animações do Inspetor de propriedades, escolha uma predefinição:
- 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.
Quando a opção Reproduzir automaticamente é escolhida, o acionador de Tempo é definido automaticamente com um atraso de 0 segundos.
Quando a opção Reproduzir ao tocar é escolhida, o acionador Tocar é definido automaticamente com a ação padrão como Alternar reprodução/pausa.
Quando a opção Sem reprodução é escolhida, nenhuma interação é definida no modo de protótipo.
Personalizar a reprodução de Lottie
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.
Altere a ação de reprodução de Lottie do acionador Tocar de Alternar reprodução/pausa para Reproduzir ou Pausar.
Usar a reprodução de Lottie com outras interações
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.
Pratique a prototipagem com animações Lottie usando os arquivos de amostra:
Saiba como animar uma tela de carregamento usando Lottie.
Ex 1-artboard 1
- No modo de design, importe o arquivo plant-loading.json e coloque-o na prancheta. Defina-o como Reproduzir automaticamente.
- 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.
Saiba como animar itens de menu quando eles são selecionados.
Ex 2-artboard 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.
- 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.
Explore mais exemplos envolvendo vídeos, animações de Lottie e estados do componente.
Visualizar e compartilhar seu protótipo
Depois de conectar o protótipo, use qualquer uma destas opções para visualizá-lo:
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.
- 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?
Criar protótipos de UX com o Adobe XD
Crie modelos interativos para sites e aplicativos para dispositivos móveis.
