Adobe XD para Iniciantes (Curso Gratuito)

Iremos direto para o portão com informações relevantes e úteis, então você não precisa se preocupar: não há preenchimento aqui. Cada minuto conta, então por que não pular direto?

Introdução ao Adobe XD

1. Bem-vindo ao Curso!

Assistir vídeo aula [0:00] ↗

Deixe-me dar uma rápida introdução ao que você pode esperar aprender ao longo deste curso. Para os não iniciados, o Adobe XD é um aplicativo super popular para design de interface do usuário e UX que permite criar sites, aplicativos móveis, ícones e muito mais – sem esforço.

O Adobe XD é poderoso e vem com muitos recursos e ferramentas, por isso vou guiá-lo por cada um deles passo a passo com uma estrutura abrangente que consiste em três capítulos:

• Noções básicas de como trabalhar com o Adobe XD, de pranchetas a formas.
• Recursos avançados do XD, incluindo componentes, layouts e plug-ins
• Recursos de prototipagem, incluindo animação automática.

Noções básicas de como trabalhar com o Adobe XD

2. Criação e gerenciamento de pranchetas

Assistir vídeo aula [1:20] ↗

Nesta importante primeira lição, você aprenderá tudo sobre como usar pranchetas. Mas, na verdade, começo a lição discutindo como obter acesso ao Adobe XD, bem como um tour completo pela interface do aplicativo.

3. Trabalhando com linhas e formas

Assistir vídeo aula [14:08] ↗

Depois de se familiarizar com as pranchetas, você pode começar a usar as ferramentas de linha e forma do Adobe XD. Eles são básicos, mas super importantes.

Para começar com linhas, você precisa clicar e arrastar com a ferramenta de linha selecionada. É realmente simples assim. Você também aprenderá como ajustar a aparência das linhas, incluindo ângulos, tamanhos, bordas e cores. Você pode até ajustar as extremidades das linhas, sombras e muito mais.

Da mesma forma, você pode criar todos os tipos de formas, dar-lhes cantos arredondados, ajustar suas cores de borda, preencher cores e gradientes, sombras e muitos outros atributos.

Também discutiremos as várias maneiras de ajustar as dimensões das formas.

4. Trabalhando com elementos de texto

Assistir vídeo aula [36:28] ↗

Os elementos de texto são o foco desta lição, com uma discussão sobre como adicionar elementos de texto de maneira direta. Também nos aprofundamos nas opções disponíveis no inspetor para trabalhar com texto depois de inserido em uma prancheta.

Você também tem controle sobre o espaçamento entre linhas e caracteres, caixas de texto e muito mais.

5. Importação e edição de imagens

Assistir vídeo aula [43:20] ↗

A seguir, uma revisão detalhada de como trabalhar com imagens no Adobe XD. Você aprenderá tudo sobre como importar imagens, fazer edições, dimensionar imagens, adicionar máscaras e muito mais. Você tem controle sobre as imagens de maneira semelhante às formas, incluindo o ajuste de dimensões, a adição de cantos arredondados e assim por diante.

Esta lição também aborda como trabalhar com vetores de bibliotecas CC.

A funcionalidade avançada do Adobe XD

6. Combinando Formas

Assistir vídeo aula [57:33] ↗

Com alguns dos princípios básicos em seu currículo, você pode passar para os recursos mais avançados do Adobe XD. É aqui que o aplicativo realmente brilha! Aqui, você aprenderá como combinar duas ou mais formas no Adobe XD. Isso é super útil para quando você deseja criar uma forma mais complexa do que as opções padrão oferecidas.

Essas formas mais complicadas são possíveis graças a operações booleanas. As opções booleanas são disponibilizadas no inspetor sempre que você seleciona duas ou mais formas na prancheta. As quatro operações disponíveis para você incluem:

• Adicionar
• Subtrair
• Interseção
• Excluir

7. Alinhando Objetos

Assistir vídeo aula [01:05:43] ↗

O Adobe XD tem alguns guias super inteligentes que estão sempre disponíveis para ajudá-lo a alinhar as coisas na tela. No entanto, ele vem com algumas outras ferramentas sob demanda que você pode usar sempre que precisar de mais controle.

Essas ferramentas permitem que você assuma o controle sobre como os objetos se alinham uns aos outros com apenas alguns cliques.

8. Trabalhando com ativos

Assistir vídeo aula [01:12:52] ↗

Ativos são bits reutilizáveis ​​do seu projeto que você pode salvar para usar posteriormente. Estes são divididos em três categorias distintas:

• cores
• Estilos de caracteres
• Componentes

Isso é ótimo para quando você está criando um aplicativo ou site e precisa ter recursos consistentes em várias páginas, telas ou seções.

9. Trabalhando com componentes

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

Como você aprendeu na lição anterior, os componentes são um tipo de ativo disponível para você. Um componente é basicamente um objeto ou grupo de objetos que você pode reutilizar em seus documentos.

Em nosso exemplo, discutiremos como criar e salvar um botão como um componente que pode ser usado em várias partes do seu projeto. E quando você faz uma alteração nesse componente, a aparência dele muda em todos os lugares em que está sendo processado.

10. Trabalhando com a grade de repetição

Assistir vídeo aula [01:36:31] ↗

Em seguida, mergulhamos na grade de repetição e como você pode colocá-la para funcionar. A grade de repetição é exclusiva do Adobe XD, certamente é uma das minhas favoritas e é um recurso que ainda não aparece em nenhum outro aplicativo.

Esse recurso é fantástico para criar galerias de fotos ou algo semelhante. Ele permite que você crie um padrão de objetos dentro de um determinado espaço e, em seguida, ajuste o espaçamento entre cada item de uma só vez.

11. Design responsivo do Adobe XD

Assistir vídeo aula [01:44:22] ↗

Como um dos principais usos do Adobe XD é criar designs de sites, faz sentido que os layouts responsivos sejam um recurso muito procurado. Dentro deste aplicativo, você pode criar designs da web responsivos usando um recurso chamado redimensionamento responsivo. Tradicionalmente, para obter esse comportamento responsivo, você precisaria definir manualmente as restrições para determinados objetos pai para que, quando esse pai fosse redimensionado, esses objetos também fossem redimensionados.

O XD faz isso automaticamente para você analisando objetos selecionados — incluindo como eles são agrupados e posicionados — e aplicará essas restrições para você. Nesta lição, você aprenderá como colocar esse recurso em funcionamento.

12. Trabalhando com plug-ins do Adobe XD

Assistir vídeo aula [01:56:46] ↗

Os plug-ins servem como ótimos complementos para adicionar mais recursos ao XD que não vêm nativamente com o aplicativo. Aqui, mostramos como abrir a página de plugins, como instalá-los e como usá-los para aprimorar seus designs.

13. Exportando no Adobe XD

Assistir vídeo aula [02:00:01] ↗

Depois de criar seu design, você provavelmente deseja exportá-lo para usá-lo em outro lugar. Aqui, você aprenderá como exportar ativos e pranchetas do Adobe XD, bem como exportar esses itens para aplicativos de terceiros, como Zeplin e Avocode.

Prototipagem com Adobe XD

14. Criando e compartilhando protótipos no Adobe XD

Assistir vídeo aula [02:11:17] ↗

A prototipagem é o que eleva produtos como o XD acima dos aplicativos de design estático. Portanto, o foco desta lição é como criar e compartilhar protótipos no Adobe XD. Este é um recurso super poderoso que permite visualizar como os usuários irão experimentar seu site ou aplicativo móvel.

15. Trabalhando com a animação automática do Adobe XD

Assistir vídeo aula [02:19:33] ↗

Você quase chegou ao fim! Na última lição deste curso, você aprenderá a utilizar a função de animação automática do Adobe XD, que permite criar animações imersivas para o seu conteúdo entre as telas do projeto.

Portanto, quando você estiver criando um protótipo e alternando de uma tela para outra, qualquer elemento presente em ambas as telas será bem animado.

Aprofunde sua educação sobre o Adobe XD

Sentindo vontade de mergulhar ainda mais no mundo do Adobe XD? Estamos protegendo você. Por que você não confere um dos muitos outros tutoriais ou cursos que publicamos sobre o assunto?