Saiba como criar ícones, ilustrações, protótipos e wireframes usando o Adobe XD CC.

O Adobe XD CC é uma ferramenta que utiliza vetores para criar designs e protótipos de experiências de usuário para Web e para aplicativos para dispositivos móveis. Alterne facilmente entre wireframes, design visual, design de interações, criação de protótipos, visualização e compartilhamento, tudo isso em uma só ferramenta avançada.

Quando você inicia o Adobe XD, é exibida uma tela inicial com acesso rápido às predefinições, aos arquivos de amostra, aos arquivos recentes e muito mais.

Fluxo de trabalho geral

Criar designs e protótipos e compartilhar com o Adobe XD
Criar designs e protótipos e compartilhar com o Adobe XD

O fluxo de trabalho pode ser resumido nas seguintes etapas de alto nível:

  • Design: crie elementos de layout, adicione pranchetas e importe recursos de outros aplicativos, como o Adobe Illustrator e o Adobe Photoshop. 
  • Protótipo: selecione objetos ou pranchetas no seu design e conecte interações entre diferentes pranchetas.
  • Compartilhamento: assim que o projeto estiver finalizado, você pode compartilhar ou exportar ele ou seus ativos.

Observação:

Continue lendo para obter mais detalhes sobre o fluxo de trabalho geral. Assista aos seguintes tutoriais em vídeo para ter uma prévia do que você pode fazer com o Adobe XD.

Design

Design_03

Inicie o Adobe XD.

A tela de boas-vindas é exibida.

Selecione um tamanho predefinido para a prancheta. Se você deseja trabalhar com um tamanho personalizado, digite a largura e a altura em pixels nos campos de texto abaixo da opção Personalizado.  Se não quiser especificar nenhum tamanho imediatamente, clique no ícone da opção Personalizado.


Design_02

Reúna os ativos de uma das seguintes maneiras:

  • Use as ferramentas de design do Adobe XD para criar ativos do zero. Para obter mais informações, consulte Ferramentas de desenhoFerramentas de texto.
  • Copie seus designs do Photoshop, do Sketch ou do Illustrator e cole-os na prancheta no Adobe XD. Você também pode importar ou arrastar e soltar um arquivo JPG, SVG, PDF, PNG ou GIF (do Explorer, do Finder ou de um navegador da Web). Para obter mais informações, consulte Trabalhar com ativos externos.

Design_01

Aprimore os objetos em seu design. Alguns exemplos do que você pode fazer no Adobe XD incluem: combinar formas, mascarar, mover, redimensionar, girar, organizar, alinhar e distribuir objetos, definir propriedades de traçado e de preenchimento e muito mais.

Para obter mais informações, consulte:


Design_04

Posicione seus elementos de design na prancheta. Use o recurso Repetição de grade para criar uma grade a partir do conteúdo existente sem precisar duplicá-lo manualmente. Para obter mais informações, consulte Criar repetição de elementos.


Design_05

Adicione pranchetas a cada tela que você definirá no seu protótipo. Para obter mais informações, consulte Trabalhar com pranchetas.


Protótipo

Você pode criar protótipos ou wireframes criando vínculos entre pranchetas (telas) em um só arquivo do Adobe XD. A criação de protótipos ajuda os revisores a visualizar como os usuários navegarão pelas telas ou páginas. Você também pode gravar a interação como um arquivo .mp3.

Prototype_01

Vincular pranchetas:

Para vincular uma prancheta a outra, selecione uma prancheta ou um objeto de uma prancheta e clique na seta à direita. Um fio aparecerá. Basta conectá-lo a outro objeto ou outra prancheta. Na janela pop-up, especifique as opções de transição e sua duração. Para obter mais informações, consulte Criar protótipos interativos.


Prototype_02

Visualizar e gravar protótipos:

Clique no ícone Visualização no canto superior direito do aplicativo. O XD exibe uma tela de exibição que permite visualizar e navegar pelas diferentes páginas. A tela de visualização tem um ícone de Gravação que permite gravar o fluxo pelas páginas e salvá-la em formato .mp3. 

Para obter mais informações, consulte Visualizar e gravar interações.


Observação:

Não é possível fazer gravações de protótipos no Adobe XD para Windows.

Compartilhamento

Share

Compartilhe protótipos com as partes interessadas do projeto de uma das seguintes maneiras:

  • Crie um link usando o serviço de compartilhamento online. As partes interessadas podem visualizar o protótipo e interagir com as telas no desktop e em dispositivos móveis. Para obter mais informações, consulte Criar links para compartilhamento de protótipos.
  • Incorpore seu protótipo a outros sites, como o Behance, o Wordpress ou qualquer outro site que ofereça suporte a iframe. Para obter mais informações, consulte Incorporar protótipos a páginas da Web.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online