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
16 de fev de 2022
- Guia do usuário do Adobe XD
- Introdução
- Novidades no Adobe XD
- Perguntas frequentes
- Criar designs e protótipos e compartilhar com o Adobe XD
- Gerenciamento de cores
- Requisitos de sistema
- Noções básicas sobre a área de trabalho
- Alterar o idioma do aplicativo no Adobe XD
- Acessar kits de design de interface
- Acessibilidade no Adobe XD
- Atalhos de teclado
- Dicas e truques
- Design
- Pranchetas, guias e camadas
- Formas, objetos e caminho
- Selecionar, redimensionar e girar objetos
- Mover, alinhar, distribuir e organizar objetos
- Agrupar, bloquear, duplicar, copiar e virar objetos
- Definir traçado, preenchimento e sombra projetada para objetos
- Criar elementos de repetição
- Criar designs de perspectiva com transformações em 3D
- Editar objetos usando operações boolianas
- Texto e fontes
- Componentes e estados
- Mascaramento e efeitos
- Layout
- Vídeos e animações Lottie
- Protótipo
- Criar protótipos interativos
- Animar protótipos
- Propriedades de objeto compatíveis com a Animação automática
- Criar protótipos com teclados e controles
- Criar protótipos usando reprodução e comandos de voz
- Criar transições temporizadas
- Adicionar sobreposições
- Criar protótipos de voz
- Criar links de âncora
- Criar hiperlinks
- Visualizar designs e protótipos
- Compartilhar, exportar e analisar
- Compartilhar pranchetas selecionadas
- Compartilhar designs e protótipos
- Definir permissões de acesso para links
- Trabalhar com protótipos
- Revisar protótipos
- Trabalhar com especificações de design
- Compartilhar especificações de design
- Inspecionar especificações de design
- Navegar em especificações de design
- Revisar e comentar especificações de design
- Exportar ativos de design
- Exportar e baixar ativos de especificações de design
- Compartilhamento em grupo para corporações
- Fazer backup ou transferir ativos do XD
- Sistemas de design
- Sistemas de design com as Bibliotecas da Creative Cloud
- Trabalhar com ativos de documento no Adobe XD
- Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
- Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
- Trabalhar com tokens de design
- Usar ativos das Bibliotecas da Creative Cloud
- Documentos na nuvem
- Integrações e plug-ins
- Trabalhar com ativos externos
- Trabalhar com ativos de design do Photoshop
- Copiar e colar ativos do Photoshop
- Importar ou abrir designs do Photoshop
- Trabalhar com ativos do Illustrator no Adobe XD
- Abrir ou importar designs do Illustrator
- Copiar vetores do Illustrator para o XD
- Plug-ins para o Adobe XD
- Criar e gerenciar plug-ins
- Integração do JIRA com o XD
- Plug-in do Slack para XD
- Plug-in do Zoom para XD
- Publicar o design do XD no Behance
- XD para iOS e Android
- Solução de problemas
- Problemas conhecidos e corrigidos
- Instalação e atualizações
- Inicialização e falha
- Documentos na nuvem e bibliotecas da Creative Cloud
- Prototipagem, publicação e revisão
- Não é possível gravar interações de protótipo no macOS Catalina
- Problemas com fluxos de trabalho de publicação
- Links publicados não são exibidos nos navegadores
- Protótipos não são renderizados corretamente nos navegadores
- Painel de comentários aparecendo repentinamente em links compartilhados
- Não é possível publicar bibliotecas
- Importação, exportação e trabalho em outros aplicativos
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?
