Guia do Usuário Cancelar

Trabalhar com animações Lottie

  1. Guia do usuário do Adobe XD
  2. Introdução
    1. Novidades no Adobe XD
    2. Perguntas frequentes
    3. Criar designs e protótipos e compartilhar com o Adobe XD
    4. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    5. Noções básicas sobre a área de trabalho
    6. Alterar o idioma do aplicativo no Adobe XD
    7. Acessar kits de design de interface
    8. Acessibilidade no Adobe XD
    9. Atalhos de teclado
    10. Dicas e truques
    11. Opções de assinatura do Adobe XD
    12. Alterações no plano inicial do XD
  3. Design
    1. Pranchetas, guias e camadas
      1. Introdução às pranchetas
      2. Usar guias e grades
      3. Criar pranchetas com rolagem
      4. Trabalhar com camadas
      5. Criar grupos de rolagem
    2. Formas, objetos e caminho
      1. Selecionar, redimensionar e girar objetos
      2. Mover, alinhar, distribuir e organizar objetos
      3. Agrupar, bloquear, duplicar, copiar e virar objetos
      4. Definir traçado, preenchimento e sombra projetada para objetos
      5. Criar elementos de repetição
      6. Criar designs de perspectiva com transformações em 3D
      7. Editar objetos usando operações boolianas
    3. Texto e fontes
      1. Trabalhar com ferramentas de desenho e texto
      2. Fontes no Adobe XD
    4. Componentes e estados
      1. Trabalhar com componentes
      2. Trabalhar com componentes aninhados
      3. Adicionar vários estados aos componentes
    5. Mascaramento e efeitos
      1. Criar uma máscara com formas
      2. Trabalhar com efeitos de desfoque
      3. Criar e modificar degradês
      4. Aplicar efeitos de mesclagem
    6. Layout
      1. Redimensionamento responsivo e restrições
      2. Definir preenchimento fixo para componentes e grupos
      3. Criar designs dinâmicos com pilhas
    7. Vídeos e animações Lottie
      1. Trabalhar com vídeos
      2. Criar protótipos usando vídeos
      3. Trabalhar com animações Lottie
  4. Protótipo
    1. Criar protótipos interativos
    2. Animar protótipos
    3. Propriedades de objeto compatíveis com a Animação automática
    4. Criar protótipos com teclados e controles
    5. Criar protótipos usando reprodução e comandos de voz
    6. Criar transições temporizadas
    7. Adicionar sobreposições
    8. Criar protótipos de voz
    9. Criar links de âncora
    10. Criar hiperlinks
    11. Visualizar designs e protótipos
  5. Compartilhar, exportar e analisar
    1. Compartilhar pranchetas selecionadas
    2. Compartilhar designs e protótipos
    3. Definir permissões de acesso para links
    4. Trabalhar com protótipos
    5. Revisar protótipos
    6. Trabalhar com especificações de design
    7. Compartilhar especificações de design
    8. Inspecionar especificações de design
    9. Navegar em especificações de design
    10. Revisar e comentar especificações de design
    11. Exportar ativos de design
    12. Exportar e baixar ativos de especificações de design
    13. Compartilhamento em grupo para corporações
  6. Sistemas de design
    1. Sistemas de design com as Bibliotecas da Creative Cloud
    2. Trabalhar com ativos de documento no Adobe XD
    3. Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
    4. Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
    5. Trabalhar com tokens de design 
    6. Usar ativos das Bibliotecas da Creative Cloud
  7. Documentos na nuvem
    1. Documentos na nuvem no Adobe XD
    2. Colaborar e coeditar designs
    3. Coeditar documentos compartilhados com você
  8. Integrações e plug-ins
    1. Trabalhar com ativos externos
    2. Trabalhar com ativos de design do Photoshop
    3. Copiar e colar ativos do Photoshop
    4. Importar ou abrir designs do Photoshop
    5. Trabalhar com ativos do Illustrator no Adobe XD
    6. Abrir ou importar designs do Illustrator
    7. Copiar vetores do Illustrator para o XD
    8. Plug-ins para o Adobe XD
    9. Criar e gerenciar plug-ins
    10. Integração do JIRA com o XD
    11. Plug-in do Slack para XD
    12. Plug-in do Zoom para XD
    13. Publicar o design do XD no Behance
  9. XD para iOS e Android
    1. Visualizar em dispositivos móveis
    2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
  10. Solução de problemas
    1. Problemas conhecidos e corrigidos
      1. Problemas conhecidos
      2. Problemas corrigidos
    2. Instalação e atualizações
      1. O XD aparece como não compatível no Windows
      2. Código de erro 191
      3. Código de erro 183
      4. Problemas ao instalar plug-ins XD
      5.  Solicitação para instalar e reinstalar o XD no Windows 10
      6. Problemas com a migração de preferências
    3. Inicialização e falha
      1.  O XD trava ao ser iniciado no Windows 10
      2.  O XD fecha ao fazer logoff da Creative Cloud
      3. Problema com o status da assinatura no Windows
      4. Aviso de aplicativo bloqueado ao iniciar o XD no Windows
      5. Geração de dump de falha no Windows
      6. Coleta e compartilhamento de registros de falhas
    4. Documentos na nuvem e bibliotecas da Creative Cloud
      1. Problemas com os documentos na nuvem do XD
      2. Problemas com componentes vinculados
      3. Problemas com bibliotecas e links
    5. Prototipagem, publicação e revisão
      1. Não é possível gravar interações de protótipo no macOS Catalina
      2. Problemas com fluxos de trabalho de publicação
      3. Links publicados não são exibidos nos navegadores
      4. Protótipos não são renderizados corretamente nos navegadores
      5. Painel de comentários aparecendo repentinamente em links compartilhados
      6. Não é possível publicar bibliotecas
    6. Importação, exportação e trabalho em outros aplicativos
      1. Exportação e importação no XD
      2. Arquivos do Photoshop no XD
      3. Arquivos do Illustrator no XD
      4. Exportar do XD para o After Effects
      5. Arquivos do Sketch no XD
      6. Aplicativos de terceiros não visíveis na exportação

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!

Logotipo da Adobe

Fazer logon em sua conta