Use o Adobe XD para criar micro interações

Sep 12, 2025

Como

(Crédito da imagem: Adobe)

Adobe XD pode ajudar com prototipagem - um dos processos mais importantes do ciclo de vida de design, que desempenha um papel vital no desenvolvimento ajudando os designers e equipes de desenvolvimento com manutenção de fluxo de trabalho. Houve algumas mudanças importantes na paisagem de prototipagem recentemente: os designers são estragados para a escolha.

Assim como muitas outras disciplinas, não há uma única ferramenta de projeto e prototipagem que possa alcançar tudo. Estágios diferentes exigem um conjunto único de ferramentas. Longe são os dias em que os designers costumavam confiar apenas no Photoshop e no esboço. Embora eles são grandes ferramentas de design da UI, eles não têm recursos para fluxos de usuário rápidos e wireframes (veja o nosso top Ferramentas de Wireframe. para mais opções de wireframing).

Agora, com a crescente quantidade de interações em projetos - como animações, gestos e controle de voz - é difícil encontrar uma ferramenta que possa alcançar todas essas capacidades de prototipagem e ainda manter as coisas simples. Codificação é uma maneira de criar essas interações, mas é demorado. Felizmente, o Adobe XD chegou ao resgate liberando uma atualização para sua ferramenta de prototipagem que inclui um recurso útil chamado "Auto Animate". É de longe a maior adição ao poderoso conjunto de ferramentas.

Obtenha a Adobe Creative Cloud

A ideia aqui é simples: Auto Animate permite que os designers criem protótipos interativos com animações imersivas simplesmente duplicando uma prancheta ou modificando as propriedades de um objeto. Essas propriedades podem ser qualquer coisa, como as dimensões, posição de x e y, opacidade, rotação. Anteriormente Adobe XD ofereceu interações básicas, como deslizamento, empurrar e dissolver.

Com a adição dos novos recursos, os designers podem criar facilmente animações baseadas em movimento, que por sua vez ajudarão o usuário a criar modelos mentais de fluxo de informações quando estiverem navegando entre várias telas. Isso também pode ser usado para criar hierarquias visuais, CTAs ou mensagens que desaparecem ou fora da tela temporariamente.

Neste artigo, eu estarei explicando como criar animações simples de micro usando este novo recurso de animação automática do Adobe XD. Antes de começarmos, há algumas coisas a considerar sobre como os objetos devem ser tratados para animação automática:

Quando um objeto ou elemento não está no Artboard de destino, geralmente desaparece quando visualizado
Quando um elemento não está presente na Artboard Inicial, ele tende a desaparecer em
Sempre ligue os Artboards quando você estiver no modo Prototype, que criará as interações
Para criar animações, certifique-se sempre de que objetos e elementos tenham nomes correspondentes nas camadas e também o nome do grupo que eles podem estar em

Faça uma mudança de estado usando auto animate

Adobe XD tutorial — Pode parecer simples, mas você precisará começar com duas formas (Crédito da imagem: Vamsi Batchu)

Vamos começar fazendo um exemplo simples de mudança de estado usando o Auto Animate. Neste exemplo, as propriedades que mudam são largura, altura e cor. Para quaisquer transições de animação automática, você precisa de mais de dois invasores.

Na forma inicial, desenhe uma forma - em nosso exemplo, é um retângulo verde de 500px x 200px. Duplique esta prancheta e selecione o retângulo na segunda Artboard. Precisamos modificar as propriedades do retângulo aumentando a largura para 1000 e a altura para 500. Você também pode realizar outras modificações, como alterar a opacidade para 50% ou a coloração.

Agora clique na guia Prototype no canto superior esquerdo. Selecione a primeira Artboard e vincule-a usando a seta para a segunda Artboard. Quando você fizer isso, há uma guia de interação à direita do aplicativo que pode ser usada para definir parâmetros como acionador, ação, destino e facilitação. Cada parâmetro pode ser personalizado de acordo com suas necessidades. Existem cinco tipos de gatilho - incluindo toque, arrastar e cronometrado - que iniciará a animação.

Defina a guia Ação Padrão para Animate Automático e porque há apenas duas plástensas em nosso exemplo, defina a guia Destino para o Artboard 2. Há também várias transições suaves que podem ser escolhidas e cronometradas. Clique no ícone Reproduzir no canto superior direito para ver o Auto Animate Faça sua mágica e anime o retângulo. Quando há mais de dois elementos que precisam ser alterados simultaneamente, certifique-se de que os nomes desses elementos são os mesmos em ambos os Artboards. Isso informará a aplicação de que esses dois elementos precisam ser animados.

Expandir cartões

Agora vamos progredir para um exemplo com mais interatividade e um que inclua vários elementos. Vamos começar criando a primeira Artboard para isso, consistindo de um cartão. O cartão terá elementos como um cabeçalho, descrição e um link no histórico da exibição de leitura inferior. Ao lado do link, haverá um ícone de seta voltado para baixo. Quando o usuário clica no link, o cartão será aberto como uma gaveta para mostrar entradas anteriores. Como isso acontece na função Click / Tap, as entradas anteriores não devem ser criadas na primeira Artboard.

Em seguida, duplicamos esta arte e alteramos algumas propriedades do cartão. A primeira coisa a fazer é aumentar a altura do cartão retangular para que pareça um estado expandido. O cabeçalho e a descrição abaixo devem ser inalterados. Agora é hora de adicionar essas entradas que mencionamos antes.

Imagine que existem três entradas para o cartão. Cada entrada tem um nome de entrada, data de entrada e um botão como mostrado na imagem principal. Você pode criar uma entrada e duplicar duas vezes para criar um grupo de entradas. Organize-os como mostrado na imagem principal e coloque o link de texto do histórico de exibição abaixo dessas entradas. Porque é em um estado expandido, gire o ícone de seta para que ele esteja voltado para cima. É isso. Você completou a criação das tábuas.

Para criar a animação, vá para a primeira Artboard e clique na guia Prototype no canto superior esquerdo. Agora clique no link do Histórico de Exibir na primeira Artboard e arraste o link Prototype para o segundo Artboard. Isso faz com que o histórico de visualização vincule o gatilho. Altere as propriedades na guia Interaction à direita, configurando o gatilho para tocar e ação para animar automaticamente. Teste-o para ver a animação de gaveta suave. Faça alterações na opção Easting na guia Interaction se você encontrar a animação não é suave o suficiente.

Faça animações de arrastar.

Arrastar é uma das animações mais comuns quando se trata de interações móveis. Vamos tentar um exemplo simples com duas tábuas. Para o primeiro Artboard, comece criando um círculo de qualquer cor e dimensões. Agora crie um retângulo com uma largura de 250px e uma altura de 25px. Duplique este retângulo oito vezes, mantendo um espaço de 20px entre cada duplicado, para que cria uma pilha. Coloque o círculo no topo do primeiro retângulo antes de duplicar esta Artboard.

Não há muita coisa para fazer para o segundo artboard. Simplesmente reduza a lacuna entre cada um dos retângulos duplicados, para que seja comprimido. Semelhante ao primeiro Artboard, coloque o círculo no topo do primeiro retângulo. A etapa final é projetá-la clicando na guia Prototype no canto superior esquerdo. Agora clique no círculo da primeira Artboard e faça um gatilho. Assim como os exemplos anteriores, altere as propriedades na guia Interação à direita, definindo o gatilho para arrastar e ação para animar automaticamente. Quando você clica no botão Play para visualizar a animação, você poderá ver uma ação suave como se o bloco esteja sendo comprimido pela esfera.

Criar animações de carregador infinito

Uma das melhores características do Adobe XD é que o Auto Animate pode ser aplicado entre vários tboards. Para fazer uma animação, você só precisa fazer alterações simples em uma das propriedades.

Vamos criar uma animação de carga na qual uma bateria é preenchida. A chave para obter isso é perfeita é criar a primeira prancha adequadamente. O primeiro Artboard tem um espaço reservado, como mostrado na imagem. Pode ser criado usando formas retangulares. Para a bateria real dentro do espaço reservado, o primeiro Artboard deve estar vazio (o que representa 0%). Duplique esta prancheta e crie um retângulo verde com uma altura de 50px que se encaixa perfeitamente dentro do espaço reservado. Crie duplicatas semelhantes para que a altura da bateria na terceira artboard seja aumentada em 50px e assim por diante. Continue até que a Artboard esteja completamente preenchida.

Agora temos que criar um loop infinito entre esses capas de arte para que cria uma animação de carga síncrona. Para isso, vá para o modo Prototype, clique na primeira Artboard e arraste a seta protótipo para o segundo Artboard. Altere as propriedades no painel de interação, definindo o acionador para o tempo e, em seguida, defina o atraso para 0 segundos, o que vai animar para o segundo artboard quando visualizado. Execute as mesmas alterações em todos os Artboards, vinculando o segundo a terceiro e assim por diante antes de finalmente vincular a última Artboard ao primeiro. Temos ligado com sucesso todos os invasores a formarem um loop infinito. Altere as configurações de facilidade e duração conforme sua exigência para fazer o carregamento mais suave.

Embora existam toneladas de variações que possam ser tentadas usando o Adobe XD, as capacidades atuais da ferramenta são limitadas e ainda estão sendo atualizadas regulares pela equipe de desenvolvimento. Então, quando comparado a ferramentas como princípio, você pode se sentir como se o XD tenha um conjunto de ferramentas restrito. No entanto, a Adobe fez um excelente trabalho de tornar a ferramenta simples para aprender e usar. Criar interações complexas pode levar algum tempo e esforço, mas eles são totalmente alcançáveis usando o recurso Auto Animate do XD. A chave é entender os fundamentos de objetos em movimento, redimensionando-os, adicionando camadas e usando gatilhos.

Este artigo apareceu originalmente a questão 326 de internet , a principal revista do mundo para web designers e desenvolvedores. Comprar Edição 326. ou Inscreva-se aqui .

Consulte Mais informação:

40 tutoriais brilhantes do WordPress
11 frameworks de javascript incríveis
O neumorfismo é a tendência mais quente de 2020?

Use o Adobe XD para criar micro interações

Faça uma mudança de estado usando auto animate

Expandir cartões

Faça animações de arrastar.

Criar animações de carregador infinito

Como - Artigos mais populares

4 passos para usar fontes variáveis

Mestre o mixer pincel no Photoshop

Como usar texturas no Photoshop

Como transmitir som em uma pintura

7 maneiras de influenciar o comportamento do usuário

Criar uma cena ocupada da cidade no Illustrator

Faça um gif animado no Photoshop

Faça um cartaz tipográfico usando Adobe InDesign

Categorias