Adobe XD Avançado (Curso Gratuito)

Neste curso aprofundado, você conhecerá melhor tudo o que o Adobe XD tem a oferecer. Essas lições começam de onde nosso curso básico parou, guiando você ainda mais no caminho para o domínio do Adobe XD.

Este curso dura pouco mais de 90 minutos e, nesse tempo, abordaremos uma ampla variedade de assuntos, desde como aproveitar ao máximo a animação automática até lições sobre transformações 3D, microinterações e layouts avançados.

Introdução

1. Bem-vindo ao Curso

Assistir vídeo aula [0:00] ↗

Nesta lição introdutória, estabelecemos as bases para o que está por vir. Este curso abrange muitas das ferramentas mais avançadas fornecidas pelo Adobe XD. O Adobe XD é um aplicativo fantástico para design de interface do usuário que você pode usar para criar sites e aplicativos móveis. E a melhor parte é que o aplicativo é superfácil de aprender a usar.

Vamos entrar em mais detalhes sobre algumas das ferramentas mais avançadas que o Adobe XD tem a oferecer – ferramentas que levam um pouco mais de tempo para se acostumar.

Animar automaticamente

2. Posição, tamanho e rotação de animação automática

Assistir vídeo aula [1:51] ↗

Esta lição aborda tudo o que você precisa saber para animar automaticamente o tamanho, a posição e a rotação dos elementos no Adobe XD.

E apenas uma observação antes de continuarmos: você verá usos mais complexos para a animação automática à medida que o curso avança, mas tudo (tudo!) está enraizado nas três propriedades que mostrarei agora.

Ao longo desta lição, trabalharemos em um controle deslizante como este:

E aqui, usaremos a animação automática para ajustar o tamanho, a posição e a rotação de cada elemento no controle deslizante.

3. Combinando máscaras e animação automática

Assistir vídeo aula [12:18] ↗

A próxima parte do curso aborda como combinar máscaras com animação automática e mostrarei como criar algumas animações muito legais. O foco aqui é usar a animação automática para criar uma animação elegante entre os ícones de paginação em nosso controle deslizante.

A animação que criamos será uma combinação suave (e separação) de círculos. E isso é conseguido através do uso de máscaras. Também criamos uma barra deslizante suave que pode ser ajustada manualmente para aumentar ou diminuir o valor de um número.

4. Usando Múltiplas Interações em um Elemento

Assistir vídeo aula [31:26] ↗

Com base no que você aprendeu na lição anterior, oferecemos aqui exemplos de como adicionar várias interações a um único elemento no Adobe XD. Na verdade, você pode adicionar quantas interações quiser a um único elemento, desde que tenha um gatilho estabelecido para cada uma.

Neste exemplo, combinamos uma interação de arrastar e uma interação de toque em um único elemento:

5. Microinterações no Adobe XD

Assistir vídeo aula [39:16] ↗

As microinterações são pequenas animações projetadas para oferecer feedback sobre determinadas ações realizadas por um usuário. Eles oferecem clareza sobre o que está acontecendo e podem fornecer feedback ao usuário para que saibam que estão fazendo a coisa certa. Nesta lição, exploramos algumas microinterações do Dribbble para ver como elas mudam e que feedback oferecem aos usuários.

Em seguida, exploramos como fazer microinterações no Adobe XD usando nosso novo melhor amigo: animação automática.

Transformações 3D

6. Transformações 3D de próximo nível

Assistir vídeo aula 55:15]↗

Nesta lição, exploramos como criar transformações 3D e como animá-las. Para o nosso exemplo, estamos animando um carrossel que exibe imagens de uma perspectiva 3D e as transforma em uma aparência 2D.

Pilhas

7. Layouts avançados com pilhas

Assistir vídeo aula [01:09:14] ↗

O foco aqui é como você pode usar o relativamente novo recurso Stacks para criar layouts avançados no Adobe XD. Como exemplo, usamos um kit de interface do usuário para demonstrar como você pode usar Stacks para criar layouts mais complexos do que normalmente é possível.

Basicamente, você pode criar Stacks a partir de um elemento pai, que aplicará propriedades de formatação a cada elemento dentro dele. É uma economia de tempo real!

estados

8. Componentes avançados com estados

Assistir vídeo aula [01:16:17] ↗

Nesta lição, exploramos os estados do componente, que permitem criar variantes de um componente e alternar entre essas variantes com muita facilidade. Esta ferramenta é super útil para criar botões ou elementos de formulário.

Nesta lição, estamos usando elementos de IU para criar diferentes versões do mesmo cartão.

Plugins

9. 5 principais plugins para usuários avançados

Assistir vídeo aula [01:24:53] ↗

Nesta lição final, exploramos 5 plug-ins considerados obrigatórios para qualquer usuário do XD. Esses plug-ins aumentarão sua experiência com o aplicativo e facilitarão a conclusão de muitas tarefas. Isso torna ainda mais vital a configuração desses plugins.

Os plugins discutidos nesta lição incluem:

• renomeá-lo
• Faces da IU
• Planilhas Google para Adobe XD
• Ícones 4 Design
• abrir

Aprimore ainda mais suas habilidades no Adobe XD

Tem tudo isso e ainda quer mais? Cobrimos uma ampla gama de tópicos relacionados ao Adobe XD no passado. Então, por que não conferir um de nossos muitos tutoriais anteriores?