No modo de Protótipo, clique no título da prancheta de origem e conecte-a à prancheta de destino.
Última atualização em
21 de fev de 2023
- 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 usar acionadores de tempo para criar transições temporizadas.
Com os acionadores de tempo, é possível criar transições entre pranchetas com base no atraso de tempo e na duração.
Você pode usar os acionadores de Tempo junto com as Ações para criar diversos efeitos, como animações em loop, barras de progresso e muito mais. Veja abaixo um exemplo de um acionador de Tempo usado com a Animação automática para criar um efeito em loop.
Para criar uma transição temporizada simples, siga as seguintes etapas:
-
-
Clique no conector para exibir o painel Interação que aparece no Inspetor de propriedades e configure as seguintes opções:
- Acionador: selecione Tempo. Se a opção Tempo não estiver disponível, é possível que você não tenha selecionado a prancheta inteira, incluindo o título, na etapa 1.
- Atraso: insira o tempo de atraso para iniciar a transição. O intervalo aceitável é de 0,2 a 5 segundos.
- Ação: selecione Transição. Você também pode usar o acionador Tempo com outras Ações, como Animação automática, Sobreposição e Reprodução de fala para obter vários efeitos. Consulte Exemplos para saber como criar efeitos de animação em loop.
- Destino: exibe a prancheta de destino conectada na etapa 1, que pode ser alterada, se necessário.
- Atenuação: selecione o efeito de atenuação que você deseja aplicar à prancheta de origem.
- Duração: insira a duração do efeito de atenuação para indicar o período de tempo do efeito de atenuação. O intervalo aceitável é de 0,2 a 5 segundos.
O XD salva seus atributos na prancheta e os oferece como padrão nas próximas telas.
-
Para visualizar a transição temporizada, selecione
.
Exemplos e arquivos de amostra
Animações de contadores são usadas para exibir números de uma maneira interessante e chamativa. Deseja aprender a usar transições temporizadas para criar um placar animado?
1. No modo de Protótipo, selecione o título da prancheta e defina as seguintes opções:
- Acionador: selecione Tempo.
- Atraso: insira 0,8 segundos como atraso de tempo.
- Ação: selecione Animação automática.
- Atenuação: selecione Atenuar para dentro/fora.
- Duração: insira 4 segundos como duração de tempo.
2. Clique em para visualizar o contador animado.
Baixe os arquivos de amostra e assista a este vídeo para ver como funciona.
Duração do vídeo: 2 minutos e 47 segundos.
Deseja usar uma transição temporizada para criar uma experiência de boas-vindas para seu aplicativo? Confira este vídeo e use este kit de interface de usuário gratuito para criar um fluxo de trabalho de boas-vindas.
Duração do vídeo: 5 minutos e 2 segundos.
Experiência de boas-vindas para um aplicativo
Você também pode consultar a comunidade de suporte do XD para encontrar mais exemplos e tutoriais.
Dicas e truques
Você sabia que é possível combinar as transições de Tempo com a Animação automática e a Sobreposição para criar efeitos interativos? Assista a este vídeo para saber mais.
Duração do vídeo: 8 minutos e 33 segundos.
Recursos relacionados
Fale conosco
Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer.