Saiba como criar protótipos interativos, wireframes e gráficos usando o XD.

O Adobe XD permite que os designers de experiência do usuário criem experiências de usuário interativas para aplicativos da Web e para dispositivos móveis usando um único aplicativo.

Você pode criar designs rápidos e simples em pranchetas no XD. Em seguida, conecte as pranchetas para criar um protótipo interativo que você possa compartilhar e iterar com os envolvidos no projeto. Você também pode usar plug-ins para automatizar as operações repetidas ou partes do fluxo de trabalho do designer que são tediosas, complexas ou repetitivas. 

O Adobe XD integra-se bem ao Photoshop, ao Illustrator e ao After Effects.

Você pode continuar criando em seus aplicativos preferidos, reunir os ativos no XD e usar o XD para criar e compartilhar protótipos. O XD permite arquivos SVG e bitmap sem perda de fidelidade. Você pode aprimorar os ativos no Adobe XD ou usá-los para desenvolver protótipos interativos. 

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, o Adobe Photoshop e o Adobe After Effects. Você também pode usar plug-ins para automatizar as operações repetidas ou partes do fluxo de trabalho do designer que são tediosas, complexas ou repetitivas. 
  • Protótipo: selecione objetos ou pranchetas no seu design e crie interações entre diferentes pranchetas.
  • Compartilhamento: uma vez que seu projeto esteja pronto para ser revisado, você pode compartilhar protótipos e especificações de design ou exportar o projeto ou ativos com os envolvidos no projeto.

Continue lendo para obter mais detalhes sobre criação de design, criação de protótipos e compartilhamento no XD. Assista aos seguintes tutoriais em vídeo para ter uma prévia do que você pode fazer com o Adobe XD.

Design

launch

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 você quiser especificar um tamanho personalizado, clique no ícone Personalizado.


adding jpeg

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 desenho e Ferramentas de texto.
  • Copie seus designs do Photoshop, do Sketch, do After Effects ou do Illustrator e cole-os na prancheta no Adobe XD. Você também pode importar, arrastar ou copiar e colar um arquivo JPG, SVG, PNG ou GIF de:
    • Explorador de Arquivos (no Windows)
    • Finder (no Mac) 
    • Navegador da Web
    • Área de transferência do SO

 


resizing

Aprimore os objetos em seu design. Por exemplo, combinar ou mascarar objetos, alterar as propriedades de traçado e preenchimento, usar sobreposição para empilhar conteúdo na parte superior de uma prancheta base e mover ou girar objetos ou usar redimensionamento responsivo para criar ativos para vários tamanhos e layouts de tela. Use ativos vinculados para criar e manter uma única versão de kits de interface do usuário, folhas de adesivos ou guias de estilo e compartilhe-os em documentos para obter uma escalabilidade consistente de design. Use também plug-ins para automatizar operações repetidas ou partes de fluxos de trabalho tediosas, complexas ou repetitivas para o designer.

Para obter mais informações, consulte:


duplicate

Disponha elementos repetidos sem esforço usando 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 elementos de repetição.

Use plug-ins para automatizar as operações repetidas ou partes do fluxo de trabalho do designer que são tediosas, complexas ou repetitivas. Para obter mais informações, consulte Criar e gerenciar plug-ins.


adding artwork

Adicione mais pranchetas para cada uma das telas necessárias no seu protótipo. Para obter mais informações, consulte Trabalhar com pranchetas.


Protótipo

Você pode criar protótipos interativos usando recursos de voz, animação automática, gestos de arrastar e transições temporizadas. Para obter mais informações, consulte Design de voz e protótipos no XD, Criar protótipos usando animação automática e gestos de arrastar e Usar transições temporizadas.

Você pode visualizar a interatividade em protótipos e, ao visualizar, registrar a interação como um arquivo MP4.

linking

Para vincular pranchetas ou configurar a interatividade, selecione a prancheta ou um objeto e clique na seta à direita. Um fio aparecerá. Basta arrastar e conectar o fio a outro objeto ou prancheta. Na janela pop-up, especifique as opções de transição e sua duração.

Você também pode usar a sobreposição para simular o conceito de transições sem duplicar o conteúdo em várias pranchetas. Para obter informações detalhadas, consulte Criar protótipos interativos.


preview

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 MP4. 

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


Compartilhamento

share

Compartilhar protótipos para revisar designs, fazer apresentações ou testes de usuário. Você também pode publicar protótipos e especificações de design para desenvolvimento ou personalizar a experiência de exibição conforme sua preferência. Para obter mais informações, consulte Publicar protótipos.


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