Adobe XD: Como usar o recurso Auto-Animate

Sep 15, 2025

Como

(Crédito da imagem: Adobe)

Apesar de sua entrada tardia no jogo de prototipagem, o Adobe XD é uma das melhores e mais rápidas ferramentas de quadraming e prototipagem disponíveis. O prototipagem é um processo fundamental no ciclo de vida de design, mas também desempenha um papel vital no desenvolvimento ajudando os designers e equipes de desenvolvimento com manutenção de fluxo de trabalho.

Como designers, muitas vezes precisamos de muitas ferramentas para projetar os vários estágios do fluxo de trabalho da experiência do usuário. A Adobe está inovando ativamente uma ferramenta de plataforma cruzada que pode ser usada para testes de projetos, criando wireframes, entregando especificações para a equipe Dev e também o projeto colaborativo (veja nossa lista de Ferramentas de Wireframe. para mais opções).

O recurso de animação automática significa que o Adobe XD também pode ser usado para criar micro-interações e animações perfeitas, como ferramentas, como princípio. Isso ajuda a designers a experiências de protótipos ricos artesanais, de fluxos de bordo, animações para carrosséis móveis, indicadores de progresso e muito mais. A melhor parte sobre esse recurso é que é simples de aprender e executar.

Neste artigo, vou explicar como criar animações simples de micro usando o recurso de animação automática. Nós estaremos olhando para as interações baseadas em gesto e baseadas em gestos.

Se você ainda não tem Adobe XD, veja o nosso como Baixe o Adobe XD. post e, em seguida, confira nosso favorito Plugins do Adobe XD. .

01. Deslize gestos para adicionar ao fav ou delete

As interações de furto são uma das micro-interações mais usadas em aplicativos móveis. Para este exemplo, vamos olhar para uma lista de reprodução de música. Para o primeiro Artboard, vamos criar uma tela de playlist com cinco músicas nele. Cada música é um cartão individual e essencialmente quando cada cartão é variado para a esquerda, ele deve remover a música da lista de reprodução. Quando um cartão é variado, ele deve adicionar a música à fila.

Vamos começar e criar o primeiro cartão. Você pode adicionar detalhes básicos, como o nome da música, nome do artista, comprimento da música e a classificação. Agora grupo todos esses elementos em uma única camada. Duplique até que cinco dos cartões semelhantes são feitos. Você pode editá-los com base no seu gosto.

Para o primeiro cartão - C1 - vamos adicionar um furto esquerdo para excluir ação. Então, vamos criar um pequeno quadrado com um fundo vermelho, adicionar algum texto de exclusão e um ícone conforme mostrado na captura de tela abaixo. Agrupe todos esses itens em uma camada chamada A1. Agora combine C1 e A1 em uma camada L - para que A1 esteja no lado direito do C1.

02. Crie o segundo cartão

Para o segundo cartão - C2 - vamos adicionar uma ação Adicionar à Fila para a direita Ação de furto de forma semelhante. Crie um grupo A2 com ícone, texto e fundo verde. Adicione à esquerda do grupo C2 e crie uma camada combinada chamada L2. Agora, o primeiro Artboard (S1) está completo. Vamos duplicar toda a Artboard duas vezes, em dois estados - S2 e S3. Nós estaremos usando S2 para Excluir Swipe e S3 para adicionar à fila SWIPE. Para fazer isso, precisamos fazer algumas alterações para cada um desses tábuas de arte. Aqui estão as configurações para ambos os swipes:

● S1 - Altere a opacidade de A1 e A2 a 0% e organize L1, L2 para que eles sejam alinhados ao centro.

● S2 - organize o cartão L1 para que a borda direita do L1 esteja alinhada com as outras cartas. Mude a opacidade de A2 a 0%.

● S3 - Organize o cartão L2 para que a borda esquerda do L2 esteja alinhada com as outras cartas. Mude a opacidade de A1 a 0%.

03. Animate os Artboards

Agora que os Artboards estão completamente configurados, o próximo passo é animá-los. Você pode fazer isso indo para o modo Prototype no lado superior esquerdo da ferramenta. Agora na Artboard S1, clique na camada L1 e adicione uma interação no lado direito da ferramenta, configurando o disparo para arrastar, ação para animar automaticamente e destino para o Artboard S2. Você também pode adicionar facilitar com base em suas preferências. Teste esta interação clicando no botão Play no lado superior direito da ferramenta. Na tela S1, clique na camada L2 e adicione uma interação semelhante usando as mesmas configurações, mas, neste caso, defina o destino para S3. Essa interação criará o furto esquerdo.

04. Expanda seus cartões

A segunda interação que olharemos é comumente visto na maioria dos aplicativos e sites onde você está passando por uma lista ou um catálogo de produtos e quando você clica em um desses, você é levado em uma nova página com mais detalhes sobre o produto . Auto-animate torna superável a animar esse tipo de interação. Para este exemplo, vamos começar criando uma página de catálogo de produtos. Você pode escolher qualquer produto como, por exemplo, um telefone celular (que será nosso exemplo), vestuário, etc. Para o primeiro Artboard (S1), crie uma barra de cabeçalho com um menu de hambúrguer e um ícone de perfil.

05. Trabalhe em imagens e detalhes

Agora, crie um elemento de texto de cabeçalho com o número de itens de catálogo. Para cada um dos cartões de produtos, vamos ter uma imagem, o nome do telefone, preço e classificações. Podemos chamar esses cartões C1 a C6. A melhor maneira de fazer isso é criar o primeiro cartão (C1) e, em seguida, usar um recurso incrível do XD chamado Repetir Grid, que é encontrado no canto superior direito do painel de ferramentas. Isso permite que você duplique itens com facilidade, mantendo o alinhamento e o espaçamento intacto. A configuração desta Artboard está concluída. Vamos animar o segundo cartão, por isso é importante desenvolver os elementos desse cartão, então XD pode realizar auto-animação.

06. Projetar a segunda Artboard

Agora para começar a trabalhar no segundo artboard. Duplique o primeiro Artboard e Excluir Cartões C1, C3-C6. Vamos usar o cartão C2 existente para construir esta página, então os nomes das camadas são os mesmos. Primeiro, expanda o plano de fundo do cartão para que ele cubra a página inteira abaixo da barra de cabeçalho. Agora podemos organizar os outros itens de qualquer maneira que queremos - a ideia básica sendo que deve ser diferente de como o cartão estava no Artboard S1, porque é quando você pode ver a transição. Por esse motivo, vamos aumentar o nome do celular para 25px e torná-lo negrito. Da mesma forma, aumente o tamanho do preço e coloque-o abaixo do nome móvel. Em seguida é a parte importante - a imagem do celular. Você tem que aumentar significativamente seu tamanho e também alinhar no centro.

07. Aplique os toques finais

Para arrumar tudo e finalizar o design, organize as classificações e as estrelas abaixo de tudo e para a esquerda. Como esta pranceta representa a versão detalhada do produto, agora você pode incluir informações adicionais sobre o telefone, como memória, as cores disponíveis do telefone, acessórios dados com o telefone e assim por diante, com base em suas preferências. Tudo o mais seguirá ao rolar a prancha. Você também pode alterar o ícone do cabeçalho do hambúrguer, para permitir que o usuário volte para o Artboard anterior S1. Lembre-se de alterar o nome do ícone para corresponder ao nome do ícone no primeiro Artboard.

08. Crie a micro-interação

Vamos para o modo Prototype agora para criar a micro-interação. Para fazer isso, selecione o cartão C2 no Artboard S1 e arraste a seta azul para o Artboard S2. No painel de interação no lado direito, defina o gatilho como toque, ação como animação automática e destino como S2. Para interações mais suaves, é bom ir com facilidade para facilitar e um tempo de 0,4 ou 0,6 segundos. Clique no ícone de seta de trás no Artboard S2 e arraste a seta para S1. Você pode usar as mesmas configurações para que isso torne consistente. Agora clique em S1 e jogue o protótipo para ver a magia. Você observará uma animação suave quando o cartão C2 é tocado. Ajuste as configurações de facilitação para tornar a animação mais suave.

09. Vá além do básico

Agora você tem uma ideia básica de como criar interações simples. Você também pode tentar animar automaticamente, alterando as cores dos elementos, tamanhos e formas para ver transições suaves entre vários tboards. Além de tocar e arrastar os gatilhos, há outros gatilhos que os designers podem experimentar, como usar chaves de teclado e chaves do Gamepad para acionar protótipos em uma chave específica. Há também um modo em que você pode criar e projetar protótipos de voz para Alexa, Siri e assim por diante, onde você pode atribuir frases e falar-las para obter respostas específicas.

Consulte Mais informação:

O Melhores construtores de site
Os atalhos do Adobe XD que você deve saber (mas provavelmente não)
Construa protótipos com o Adobe XD

Adobe XD: Como usar o recurso Auto-Animate

01. Deslize gestos para adicionar ao fav ou delete

02. Crie o segundo cartão

03. Animate os Artboards

04. Expanda seus cartões

05. Trabalhe em imagens e detalhes

06. Projetar a segunda Artboard

07. Aplique os toques finais

08. Crie a micro-interação

09. Vá além do básico

Como - Artigos mais populares

Como animar com a biblioteca Mo.JS

Como criar uma página em quadrinhos

21 maneiras de melhorar a produtividade com NPM

Desenhe uma gueixa ruim

Personagens de jogo de nível com montagem criativa

Uma introdução ao teste de frontend

Como usar ferramentas digitais para criar um visual desenhado à mão

Criar uma Cinemagraph com o Photoshop em 60 segundos

Categorias