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 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 interagir com as partes interessadas. 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, Illustrator e 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.
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 suas partes interessadas.
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.
Inicie o Adobe XD. A tela Inicial é 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 você quiser especificar um tamanho personalizado, clique no ícone Personalizado.
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
Para obter mais informações, consulte Trabalhar com ativos externos.
Observação:
Arquivos .PDF não podem ser abertos/importados no Adobe XD.
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:
- Selecionar, redimensionar e girar objetos
- Combinar objetos usando operações booleanas e mascarar objetos com formas
- Agrupar, bloquear e duplicar objetos
- Mover, alinhar, distribuir e organizar objetos
- Definir traçado, preenchimento e sombra projetada para objetos
- Usar redimensionamento e restrições responsivos
- Criar e gerenciar plug-ins
- Usar componentes vinculados
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 repetição de elementos.
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.
Adicione mais pranchetas para cada uma das telas necessárias no seu protótipo. Para obter mais informações, consulte Trabalhar com pranchetas.
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.
Vincular pranchetas:
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.
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 MP4.
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. No entanto, há uma solução alternativa. Pressione as teclas Windows + G e use o gravador nativo para gravar a tela de visualização.
Compartilhe protótipos com as partes interessadas do projeto de uma das seguintes maneiras:
- Publique protótipos na Web e forneça um link da Web ou um convite privado (Prévia) para que as partes interessadas visualizem ou comentem seu protótipo. Você também pode gerar código incorporado que pode ser usado para incorporar o protótipo em qualquer site com suporte a iFrames. Para obter mais informações, consulte Publicar protótipos.
- Publique especificações de design e forneça um link da Web ou um convite privado (Prévia) aos desenvolvedores. Os desenvolvedores podem inspecionar e copiar as especificações de design para as medidas, as cores e os estilos de caractere dos designs. Para obter mais informações, consulte Publique especificações de design para os desenvolvedores.
As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.