Adobe XD: criação de layouts, protótipos e apresentações

Conheça a ferramenta grátis da Adobe para designers, o Adobe XD. Saiba o que é, pra que serve e confira tutoriais e downloads.

exemplo de projeto no adobe xd

Se você é Web Designer, trabalha com UX ou é desenvolvedor, este texto é para você.

O Adobe XD é um software praticamente recém-nascido, e tem o atrativo de ser bem fácil de usar, além de gratuito.

Você pode fazer o download grátis do XD no site da Adobe – basta ter ou criar uma conta de acesso. Vou falar um pouquinho sobre este programa por aqui.

O que é Adobe XD

O Adobe XD foi feito por designers e para designers. É a maneira mais rápida de criar designs e protótipos e compartilhar experiências de usuário, desde sites e aplicativos móveis a interações por voz e muito mais. Gratuitamente.

Retirado do site oficial

O programa é, basicamente, uma fusão entre o Illustrator e o InDesign, reunindo o melhor dos dois mundos para a criação de layouts para a web.

É uma resposta da Adobe ao Sketch, mas o XD ainda está mais para um esboço do concorrente.

Perdão pelo trocadilho, mas é verdade.

Para quem o Adobe XD é indicado?

No geral, o XD é indicado para quem trabalha com design para web e/ou aplicativos, softwares. Web designers, times de UX e até mesmo desenvolvedores que precisam desenhar um protótipo.

Seu grande diferencial, inclusive, é justamente a prototipação: é possível criar um wireframe ou layout interativo, clicável, e hospedá-lo em um servidor da Adobe de forma gratuita para apresentar ao cliente.

Antes do Sketch surgir, esses profissionais tinham que se virar basicamente com o Photoshop e Illustrator em conjunto. Não era muito prático, mas era o que tinha de melhor. A prototipação normalmente era feita manualmente através de um software de código com interface visual, como o Dreamweaver.

A Adobe finalmente lançou um programa mais específico para esse tipo de trabalho, e felizmente ele é gratuito – bom, imagino que por enquanto. Como há um abismo entre o XD e o já falado Sketch, não duvido nada que passem a cobrar depois de uma certa evolução.

Bom, na verdade já há uma opção paga. Como você pode conferir nos planos, a versão gratuita é limitada a um protótipo online e 2GB de armazenamento na nuvem. A paga já torna os protótipos ilimitados e os 2GB transformam-se em 100GB.

Tutoriais e cursos

A própria ferramenta disponibiliza alguns tutoriais em seu site. São todos em vídeo, e a ferramenta é relativamente muito prática – a curva de aprendizado é bem menor em comparação aos outros softwares da Adobe.

Inclusive, ao baixar o Adobe XD gratuitamente, há um passo-a-passo dentro da própria aplicação.

Encontrei também um curso rápido no YouTube, em português. Ótimo para iniciantes:

Curso de Adobe XD (playlist)

Download de plugins e recursos

O próprio site da ferramenta também disponibiliza vários downloads e recursos.

Por exemplo, é possível instalar gratuitamente alguns plugins (ou extensões) para expandir as possibilidades do Adobe XD. Algumas opções, porém, são pagas.

Dentre os plugins de maior utilidade, destaco os seguintes:

  • Change Case: Possibilita deixar o texto selecionado em caixa alta ou baixa, alternada ou com a primeira letra maiúscula;
  • Image Optimizer: Otimiza as imagens utilizadas no layout, reduzindo o tamanho do arquivo;
  • Lorem Ipsum: Gera o texto pronto com alguns cliques;
  • PhotoSplash: Coleta imagens a partir de uma palavra-chave;
  • UI Faces: Coleta fotos de pessoas.

A instalação de plugins e add-ons no Adobe XD é feita diretamente no software.

Também é possível integrar o XD com outros Apps, como Jira e Slack. Por fim, o site também oferece alguns downloads grátis de wireframes, protótipos, layouts e ícones.

wireframe kit para adobe xd
Os kits são uma mão na roda para designers iniciantes e experientes também.

Photoshop, Illustrator ou XD? Ou Sketch…?

O Adobe XD ainda é bem básico, mas tem mostrado ser o suficiente para o meu trabalho. Os plugins e recursos são uma mão na roda pensando em ganho de tempo, automatização.

Ainda não consigo me livrar totalmente do Photoshop, já que também trabalho com fotos, e do Illustrator, porque crio logos e vetores. Mas pra web design, certamente é possível viver apenas com o Adobe XD.

O Sketch, sim, é muito mais completo. Mas tem um preço relativamente salgado e sua curva de aprendizagem é maior.

Fabio Lobo
Formado em Publicidade e Propaganda e Design de Publicidade, trabalha com web design e desenvolvimento, mas sempre arruma um tempo pra ler, estudar e escrever sobre quase tudo. Siga no twitter!
Veja mais