Apostila Adobe XD V003

Guia de protótipo navegável
Apostila/Guia de
Protótipo Navegável
Design de UI/UX
com Adobe XD
Versão 3.2
Isabela Scussel
Melissa Campuzano
© 2021 by ENG DTP & Multimídia

www.eng.com.br
2
ÍNDICE
1. Introdução ao curso 4
2. Protótipos navegáveis 4
2.1 O que é um protótipo? 4
2.2 Wireframes 4
2.3 O Adobe XD 6
3. Baixar o Adobe XD em seu computador 6
4. Dando início ao seu projeto 10
4.1. Criando as telas de sua interface 10
4.2 Criando novas pranchetas 11
4.3 Iniciando a edição 13
4.3.1 Adicione bibliotecas de componentes para sua edição 13
4.3.2 Selecione e edite os Ativos do documento 13
4.3.3 Adicionando formas 15
4.3.4 Inserindo Imagens dentro de formas 15
4.3.5 Adicionando caixas de texto 20
4.3.6 Criando linhas 21
4.3.7 Usando a ferramenta Caneta 21
4.3.8 Edição das propriedades dos componentes 22
4.4 Integração com Adobe Illustrator 24
4.5 Integração com Adobe Photoshop 27
4.6 Componentes 30
4.7 Bibliotecas da Creative Cloud 32
5 O Protótipo 34
5.1 Interações 35
6 Compartilhamento para revisão 37
7 Revisão perguntas 38

www.eng.com.br
3
1. Introdução ao curso
Neste minicurso de Adobe XD você vai aprender a projetar, prototipar e compartilhar

experiências do usuário em poucas horas.
Aplicativos para smartphone, web sites são as principais interfaces com as quais o ser
humano tem contato durante o seu dia a dia. Por conseguinte, é uma das maiores
demandas que o mercado tem e a falta de profissionais qualificados é grande.
2. Protótipos navegáveis
2.1 O que é um protótipo?
Um protótipo é um produto de trabalho na fase de testes. É algo que é feito pela

primeira vez ou algo copiado ou imitado a partir de algo existente. Pode ser um objeto,
um automóvel, um avião, uma aplicação, etc.
Os protótipos são usados para aumentar a chance de sucesso do projeto.
Alguns motivos para a utilização de protótipos:
• Os protótipos são importantíssimos para testar designs de forma segura e

garantir o interesse de clientes potenciais;
• Por meio da construção de um protótipo, você pode, rapidamente, eliminar as
abordagens que não funcionam para focar no que for mais eficaz;
• Para obter um feedback antes do lançamento do produto evitando perda de
tempo e investimento;
• Para obter um ciclo de desenvolvimento dinâmico;
• Para ilustrar ideias e gerar impacto pelo protótipo do produto.
2.2 Wireframes
Para poder construir um protótipo de uma aplicação é preciso primeiro criar um

wireframe.
Ele não é mais do que um esqueleto, uma versão primitiva do visual de um projeto.
No caso de um protótipo de uma aplicação, o wireframe seria a representação da
diagramação e estruturas do aplicativo.

www.eng.com.br
4
O wireframe serve para mostrar as funções do aplicativo, não a aparência. A aparência

é aprimorada no processo de desenvolvimento do protótipo pois ela depende de outros
fatores.
Veja um exemplo de wireframe para um aplicativo de compras:
Imagem disponível em: https://www.productplan.com/glossary/wireframe/ . Acesso realizado em 5 de janeiro de

2021.

www.eng.com.br
5
2.3 O Adobe XD
O Adobe XD é uma ferramenta de design de experiência do usuário poderosa,

colaborativa e fácil de usar, baseada em vetor.
Este software ajuda aos profissionais de design a organizarem o fluxo de trabalho para
criação de aplicativos móveis e desktop, englobando os passos desde a concepção do
projeto até visualização de protótipos e compartilhamento.
Sendo assim, podemos afirmar que o Adobe Xd traz uma experiência totalmente única
tanto ao usuário do aplicativo ou página da web, mas também para aqueles que se
dedicam à criação do do protótipo. Transforme suas ideias em realidade!
3. Baixar o Adobe XD em seu computador
3.1 Acesse o site da Adobe XD https://www.adobe.com/br/products/xd.html

pelo seu computador e clique em COMECE GRATUITAMENTE.

www.eng.com.br
6
3.2 Selecione a opção CRIAR CONTA, ou você faça o login com uma conta
Facebook ou Google.
3.3 Depois de clicar em “Criar Conta”, você vai acabar nesta página. Preencha
suas informações e depois clique em CRIAR CONTA:

www.eng.com.br
7
3.4 Preencha as informações solicitadas e clique em CONTINUAR:
3.5 O aplicativo será instalado automaticamente no seu computador como

uma versão de teste durante 7 dias.

www.eng.com.br
8
3.6 Para verificar se você está logado na sua conta, simplesmente verifique se
sua foto está ativa no momento em que abrir o Adobe Xd. Caso não tenha
carregado uma foto, clique no círculo:
3.7 Depois de clicar no círculo, você será redirecionado ao navegador a

página principal da sua conta Adobe:
Você está logado! J

www.eng.com.br
9
4. Dando início ao seu projeto
4.1. Criando as telas de sua interface
As pranchetas são as responsáveis por representar cada uma das telas que você
deseja projetar como parte de seu site ou aplicativo para dispositivo móvel.
Você pode ter muitas pranchetas em um único arquivo do Adobe XD. Por exemplo, você
pode escolher pranchetas com dimensões pré-definidas diferentes em um mesmo
arquivo. Como alternativa, você também pode escolher criar o design de várias telas de
um fluxo de usuário para a mesma plataforma em um arquivo.
4.1.1 Escolha um tamanho pré-definido para a prancheta no começo do seu

projeto na tela inicial. Se não quiser usar as predefinições disponíveis, crie uma
prancheta com um tamanho personalizado:
Assim que seu novo arquivo com o tamanho escolhido da prancheta for criado,
adicione quantas pranchetas quiser usando a ferramenta PRANCHETA.

www.eng.com.br
10
4.2 Criando novas pranchetas
4.2.1 Para criar uma nova prancheta, selecione a ferramenta PRANCHETA (A)
4.2.2 Clique em qualquer lugar da tela para que a sua nova prancheta seja
adicionada com as mesmas proporções já utilizadas:

www.eng.com.br
11
4.2.3 Caso precise de uma prancheta com um tamanho diferente, você pode
visualizar do lado direito da tela as diversas opções de tamanhos de
pranchetas predefinidas do Adobe XD:
4.2.4 Quando você selecionar a opção, a prancheta será automaticamente

adicionada na mesa de trabalho:

www.eng.com.br
12
4.3 Iniciando a edição
O Adobe XD possui integração com a Creative Cloud da Adobe e graças a isso, você pode
adicionar uma série de componentes ao seu arquivo sem que tenha que criá-los
diretamente na plataforma.
4.3.1 Adicione bibliotecas de componentes para sua edição

Isso pode ser feito usando as BIBLIOTECAS. Veja:
4.3.2 Selecione e edite os Ativos do documento

Além do que já mencionamos, o Adobe XD também permite que o usuário
salve os ativos mais importantes para o seu protótipo. Por mais
importantes, entende-se aqueles que serão utilizados com maior
frequência, e que vão compor tanto o design, quando as funcionalidades
do aplicativo ou página da web.

www.eng.com.br
13
Sendo assim, é possível que você crie e adicione novas bibliotecas contendo
seus ativos preferidos.
• Cores;
• Estilos de caractere;
• Componentes;
• Busque por novas bibliotecas da Creative Cloud (saiba mais
no item 4.6)
Essas opções são importantes ao passo que proporcionam um maior

controle da experiência do design em si:

www.eng.com.br
14
4.3.3 Adicionando formas
Para adicionaras formas – que vão compor, por exemplo, os botões do seu
protótipo, basta selecionar uma das formas desejadas do lado esquerdo da
tela:
4.3.4 Inserindo Imagens dentro de formas
Agora que você já sabe como criar formas no seu projeto, você pode
também adicionar imagens dentro dessas formas. Veja abaixo:

www.eng.com.br
15
4.3.4.1 Escolha a imagem desejada e posicione-a na prancheta:
4.3.4.2 Se a imagem não estiver selecionada, ela desaparecerá conforme o

formato da prancheta:

www.eng.com.br
16
4.3.4.3 Traga a sua forma ‘para frente’. Veja como:
***Você também pode acessar a caixa “TRAZER PARA FRENTE” clicando na

forma com o botão direito do mouse.

www.eng.com.br
17
4.3.4.4 Selecione a imagem + a forma
4.3.4.5 Vá de novo até ‘OBJETO’ e Selecione “MASCARAR COM FORMA”:

www.eng.com.br
18
4.3.4.6 Você pode movimentar sua imagem dentro da forma clicando

DUAS VEZES nela:
4.3.4.7 Pronto! Agora você tem uma imagem corretamente posicionada

dentro de uma forma. J

www.eng.com.br
19
4.3.5 Adicionando caixas de texto
4.3.5.1 Como demonstrado na imagem abaixo, selecione a opção TEXTO (T) do

lado esquerdo da tela;
4.3.5.2 Em seguida, clique em qualquer lugar do projeto de modo a criar uma

caixa de texto;
4.3.5.3 Assim que a caixa de texto tiver sido criada, todas as OPÇÕES DE
EDIÇÃO da mesma aparecerão do lado direito da tela. Veja:

www.eng.com.br
20
4.3.6 Criando linhas
4.3.6.1 Selecione a ferramenta de LINHA (L)
4.3.6.2 Crie a linha de acordo com o desejado para seu protótipo
4.3.6.3 Assim que a linha tiver sido criada, as OPÇÕES DE EDIÇÃO dela
aparecerão ao lado DIREITO da tela. Veja:
4.3.7 Usando a ferramenta Caneta
4.3.7.1 Selecione a ferramenta CANETA (P) para criar formas geométricas

diversas

www.eng.com.br
21
4.3.7.2 Clique no local desejado e monte a sua forma do jeito que preferir. Para
criar com linhas retas, clique de acordo com o formato desejado. Para
linhas curvas, clique uma vez e, no segundo clique, segure para que a
curva seja feita
4.3.7.3 Por fim, estilize da forma que você quiser:
4.3.8 Edição das propriedades dos componentes
4.3.8.1 De modo geral, todos os componentes do seu protótipo podem ser

editados de diversas formas
4.3.8.2 Para acessar as opções de edição das propriedades dos componentes,

basta selecioná-lo e visualizar o lado DIREITO da tela

www.eng.com.br
22
4.3.8.3 Veja um exemplo abaixo:
Antes de selecionar o componente:
Depois de selecionar um componente qualquer:

www.eng.com.br
23
4.4 Integração com Adobe Illustrator
É possível importar seus arquivos do Illustrator tais como logotipos, ícones ou quaisquer
outros elementos para usar em seus projetos de UI ou UX.
Siga uma das 3 maneiras abaixo para importar seus vetores do Illustrator ao Adobe XD!
4.4.1 Abra arquivos de vetor no Adobe XD
4.4.1.1 Selecione o documento que você deseja adicionar e que contém

os elementos de interface do usuário.
4.4.1.2 Arraste esse arquivo do Illustrator para o ícone XD ou procure-o

na caixa de diálogo ABRIR.

www.eng.com.br
24
4.4.2 Importe arquivos de vetor
4.4.2.1 No menu do XD, clique em IMPORTAR e depois procure no

explorador o arquivo do Illustrator que deseja trazer;
4.4.2.2 Com uma prancheta previamente selecionada no XD, o design será
importado diretamente nessa tela;
4.4.2.3 Integre-o no projeto e faça quaisquer ajustes que sejam
necessários.

www.eng.com.br
25

www.eng.com.br
26
4.4.3 Copie e cole
Os caminhos e formas de vetores criados no Illustrator podem ser copiadas e coladas

diretamente no XD. Muitos designers usam o Illustrator para criar logotipos, ícones e
outros elementos que desejam usar em seus projetos de UI / UX.
4.4.3.1 Em qualquer fase de seu design, você pode copiar as formas,

caminhos ou grupos de vetor e copiá-los diretamente no XD
4.4.3.2 As propriedades do vetor permanecerão editáveis, assim como na

importação. Você pode mover, redimensionar e até editar os
elementos para ajustar melhor ao projeto.
4.5 Integração com Adobe Photoshop
Para aprender sobre a integração do Adobe Xd com o Adobe Photoshop, veja

abaixo:
4.5.1 Abra arquivos de Photoshop no XD
Se você tem trabalhos de interface no Photoshop e deseja trazê-los ao seu

protótipo, não se faz necessário desenhar tudo de novo no Adobe XD.

www.eng.com.br
27
4.5.2 Vá na opção de Menu do Adobe XD e clique em ABRIR;
4.5.3 Localize o arquivo do Photoshop no seu computador e clique em

ABRIR

www.eng.com.br
28
Simples e fácil! Seu arquivo foi aberto sem problemas no Adobe Xd.
4.5.4 Importe arquivos do Photoshop e edite
4.5.5 Outra maneira de abrir seus arquivos é clicando na opção

IMPORTAR

www.eng.com.br
29
**Veja que todas as camadas são preservadas no Adobe XD e você ainda tem a opção
de editar cada elemento sem problema.
4.6 Componentes
Quando se trabalha num projeto de design de interface é necessário criar elementos

base que irão se repetir várias vezes no design. Esses elementos em alguns momentos
precisam ser personalizados de acordo com o contexto onde se situam.
Como consequência disso, o Adobe XD permite criar os componentes, que são

basicamente esses elementos base, eles ajudam a que não seja necessário criar várias
versões do componente. Para isso são criadas as instâncias, e deste modo um
componente pode ser alterado e conter várias instâncias, cada uma com variações de
aparência para diferentes contextos e layouts.

www.eng.com.br
30
4.6.1 As alterações que são feitas numa instância individual são

especificas desse elemento, mas as modificações feitas no
componente mestre são propagadas em todas as instancias cujas
propriedades não foram personalizadas.
4.6.2 Componente mestre pode ser qualquer elemento que você

seleciona e dá clique no botão direito do mouse para convertê-lo
a componente mestre. Você pode reconhecer um componente
mestre quando vê um diamante preenchido de verde no canto
superior esquerdo.

www.eng.com.br
31
4.7 Bibliotecas da Creative Cloud
Para começar a usar as Bibliotecas da Creative Cloud é necessário fazer logon com a
mesma conta Adobe ID em todos os aplicativos da CC.
Para salvar cores, estilos de caractere, componentes e imagens do XD as Bibliotecas da

Creative Cloud, simplesmente clique na opção de Bibliotecas CC no painel de ativos do
Adobe XD. Na janela de Bibliotecas você pode criar quantas Bibliotecas precisar, se
quiser adicionar seus elementos numa biblioteca existente, apenas selecione o nome
da biblioteca.
4.7.1 Para criar uma nova biblioteca clique no ícone MAIS e siga os
passos a continuação

www.eng.com.br
32
4.7.2 Para adicionar ativos a suas bibliotecas com o elemento/ativo

selecionado clique no ícone + na janela Bibliotecas e selecione o
tipo de ativo que deseja salvar para dentro da janela da
Biblioteca, neste exemplo será gráfico. O ativo será adicionado e
exibido como uma imagem em miniatura nas Bibliotecas da CC.
4.7.3 Todos os ativos ficam sincronizados automaticamente com a

nuvem e ficam disponíveis para uso em outros aplicativos da
Adobe.
4.7.4 Para compartilhar a biblioteca com outros usuários, clique no

ícone “Convidar para a Biblioteca” e insira o email da conta
Adobe de seu colega para que ele também possa fazer uso
desses ativos ou colaborar com outros ativos para seu projeto.

www.eng.com.br
33
5 O Protótipo
Depois de fazer o design dos elementos e de todas as telas do seu aplicativo você irá
colocar a interação em cada um deles. Para que o fluxo de telas seja consistente é
importante visualizar o aplicativo como um todo. Por isso que é tão importante fazer
um planejamento e esboço do aplicativo desde o início do projeto quando foi
esboçado os wireframes.
Agora que você tem a ideia de como irá funcionar o aplicativo, clique na aba de
PROTÓTIPO. No que consiste esta fase é que basicamente você conecte cada botão a
próxima ação verificando sempre que todos os elementos que foram criados para um
determinado proposito alcancem a sua respectiva função.

www.eng.com.br
34
5.1 Interações
Vamos no passo a passo de um exemplo muito simples para ativar um botão.
5.1.1 Clique no texto ‘Já tenho uma conta’ da primeira tela de seu
aplicativo

www.eng.com.br
35
5.1.2 Ao clicar você vai observar que é ativado uma seta azul. Então clique,
segure e arraste para a tela desenhada onde o usuário faz login da
conta.
5.1.3 Veja que esse passo vai praticamente configurar o botão para que ele
funcione. Então quando a pessoa que estiver interatuando com o
aplicativo tocar na opção “Já tenho uma conta” ela será direcionada a
tela de Login
5.1.4 Visualize o protótipo de seu aplicativo clicando no ícone de PLAY

para verificar as interações de sua interface no momento que
desejar!

www.eng.com.br
36
6 Compartilhamento para revisão
6.1 Para enviar o seu arquivo do Adobe XD a outros designers ou

stakeholders simplesmente salve o arquivo na nuvem. Para isso,
clique no ícone CONVIDAR PARA DOCUMENTO e insira o email de
seus colaboradores, dessa maneira você poderá receber colaboração
de outros designers no mesmo arquivo no qual você está
trabalhando:
6.2 Para enviar seu protótipo navegável a seu cliente, futuros usuários e
desenvolvedores clique na aba de para poder criar um link de acesso:

www.eng.com.br
37
7 Revisão perguntas
1. Quais as principais vantagens de usar um protótipo?
2. O que é um wireframe?
3. Que tipos de wireframe existem?
4. O que é Adobe XD e quais as vantagens que eu tenho ao utilizá-lo?
5. Como crio uma prancheta com um tamanho diferente no meu arquivo aberto
do Adobe XD ?
6. Quais são as 3 maneiras de importar arquivos do Illustrator no Adobe XD ?

www.eng.com.br
38
7. Como posso importar meu design de interface feito no Photoshop ao Adobe XD

sem perder a capacidade de edição?
8. O que é um componente?
9. Como usar a ferramenta de repetição de grade?
10. É possível salvar ativos de outros aplicativos da Adobe nas Bibliotecas da

Creative Cloud. Qual a principal função desses ativos?
11. Como acesso ao processo de interação do meu protótipo?
12. Qual a opção para visualizar meu protótipo navegável?

www.eng.com.br
39
13. Posso compartilhar meu arquivo do Adobe XD como outros designers da

equipe?
14. Se eu fizer mudanças no meu arquivo do Adobe XD, preciso publicar o

arquivo novamente para verificar as mudanças no protótipo. Qual é o
processo?
15. Como compartilho o meu protótipo navegável com meus futuros usuários e
interessados?

www.eng.com.br
40

www.eng.com.br
41

www.eng.com.br
42

www.eng.com.br
43

Apostila Adobe XD V003

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila Adobe XD V003

Enviado por

Direitos autorais:

Formatos disponíveis

Guia de protótipo navegável

© 2021 by ENG DTP & Multimídia

© 2021 by ENG DTP & Multimídia

Neste minicurso de Adobe XD você vai aprender a projetar, prototipar e compartilhar

2.1 O que é um protótipo?

Um protótipo é um produto de trabalho na fase de testes. É algo que é feito pela

Os protótipos são usados para aumentar a chance de sucesso do projeto.

Alguns motivos para a utilização de protótipos:

• Os protótipos são importantíssimos para testar designs de forma segura e

Para poder construir um protótipo de uma aplicação é preciso primeiro criar um

© 2021 by ENG DTP & Multimídia

O wireframe serve para mostrar as funções do aplicativo, não a aparência. A aparência

Veja um exemplo de wireframe para um aplicativo de compras:

Imagem disponível em: https://www.productplan.com/glossary/wireframe/ . Acesso realizado em 5 de janeiro de

© 2021 by ENG DTP & Multimídia

O Adobe XD é uma ferramenta de design de experiência do usuário poderosa,

3. Baixar o Adobe XD em seu computador

3.1 Acesse o site da Adobe XD https://www.adobe.com/br/products/xd.html

© 2021 by ENG DTP & Multimídia

© 2021 by ENG DTP & Multimídia

3.4 Preencha as informações solicitadas e clique em CONTINUAR:

3.5 O aplicativo será instalado automaticamente no seu computador como

© 2021 by ENG DTP & Multimídia

3.7 Depois de clicar no círculo, você será redirecionado ao navegador a

Você está logado! J

© 2021 by ENG DTP & Multimídia

4. Dando início ao seu projeto

4.1. Criando as telas de sua interface

4.1.1 Escolha um tamanho pré-definido para a prancheta no começo do seu

© 2021 by ENG DTP & Multimídia

4.2 Criando novas pranchetas

© 2021 by ENG DTP & Multimídia

4.2.4 Quando você selecionar a opção, a prancheta será automaticamente

© 2021 by ENG DTP & Multimídia

4.3 Iniciando a edição

4.3.1 Adicione bibliotecas de componentes para sua edição

4.3.2 Selecione e edite os Ativos do documento

© 2021 by ENG DTP & Multimídia

Essas opções são importantes ao passo que proporcionam um maior

© 2021 by ENG DTP & Multimídia

4.3.3 Adicionando formas

4.3.4 Inserindo Imagens dentro de formas

© 2021 by ENG DTP & Multimídia

4.3.4.1 Escolha a imagem desejada e posicione-a na prancheta:

4.3.4.2 Se a imagem não estiver selecionada, ela desaparecerá conforme o

© 2021 by ENG DTP & Multimídia

4.3.4.3 Traga a sua forma ‘para frente’. Veja como:

***Você também pode acessar a caixa “TRAZER PARA FRENTE” clicando na

© 2021 by ENG DTP & Multimídia

4.3.4.4 Selecione a imagem + a forma

4.3.4.5 Vá de novo até ‘OBJETO’ e Selecione “MASCARAR COM FORMA”:

© 2021 by ENG DTP & Multimídia

4.3.4.6 Você pode movimentar sua imagem dentro da forma clicando

4.3.4.7 Pronto! Agora você tem uma imagem corretamente posicionada

© 2021 by ENG DTP & Multimídia

4.3.5 Adicionando caixas de texto

4.3.5.1 Como demonstrado na imagem abaixo, selecione a opção TEXTO (T) do

4.3.5.2 Em seguida, clique em qualquer lugar do projeto de modo a criar uma

© 2021 by ENG DTP & Multimídia

4.3.6.1 Selecione a ferramenta de LINHA (L)

4.3.6.2 Crie a linha de acordo com o desejado para seu protótipo

4.3.7 Usando a ferramenta Caneta

4.3.7.1 Selecione a ferramenta CANETA (P) para criar formas geométricas