Você está na página 1de 4

Adobe XD – Conhecimentos

Objetivo Principal
- O Adobe XD é voltado para UX/UI Design e Criação de Interfaces de Sites e Aplicativo

Aprendizados
 Criar Forma Geométrica Proporcionalmente - Segurar SHIFT
 Criar Elipse Alinhada com o Centro - Segurar SHIFT + ALT
 Criar Formas Personalizadas Utiliza-se a Ferramenta CANETA (P)
 Para Deformar Qualquer Elemento Geométrica Criado – Seleciona o Elemento
- Duplo clique nele – Seleciona o ponto que vai querer deformar - Duplo clique
no ponto selecionado.

 No Painel de Propiedade do Objeto selecionado, em Sombra, X e Y alteram a


posição da sombra e D altera a intesidade da sombra.
 Para Desfocar um Objeto é no Painel de Propiedades do Objeto selecionado
 Para Alterar a medida das bordas de um objeto é no Painel de Propiedades,
acima de preenchimento de cor
 Para Rotacionar um Objeto em 360°, Seleciona o Objeto e Aperta CTRL + T

 Para Medir o espaçamento dos elementos nas Pranchetas, clica na prancheta


e ativa a função GRADE
 Para Aplicar um Degradê em algum elemento, Seleciona o Objeto, Clica em
Preenchimento e Altera para Degradê Linear – É possível também adicionar
mais de 2 pontos de degradê em um determinado elemento.
 Para Medir a Distância dos elementos, Segurar ALT
 Para Repetir um ou mais elementos de maneira rápida e alinhada, Seleciona o
elemento desejado, e no canto superior direito clica em Repetição de Grade

 Para Reutilizar Textos, Elementos e Cores, acessar a Biblioteca (Ícone acima do


menu Camadas), clica em ativos do documento e lá você pode salvar os
elementos para usar depois. Para adicionar o elemento, cor ou texto seleciona
o objeto, clica com o botão direito, Seleciona Add cor a ativos/ Criar
Componente/ Add Estilo de Caractere
 Para Salvar as cores que está utilizando, no Painel de Propiedades do
elemento selecionado, em Preenchimento, Tem um ícone de + que salva as
cores
 Para Colocar uma Imagem dentro de uma Forma, Arrastar a imagem para
dentro da forma
 Para Ajustar uma Imagem dentro da forma, duplo clique na forma com a
imagem dentro, e ajusta a imagem.

 Para Selecionar vários elementos juntos, Clica neles Segurando SHIFT


 Para Aplicar um Bluor no elemento, deixar ele com uma claridade maior,
ativar a opcao Desfoque de Fundo, no Painel de Propiedades do Objeto
selecionado
 Para Aumentar um Elementos dos dois lados, Segura ALT enquanto aumenta
um dos lados do elementos que o outro lado vai aumentar proporcionalmente
também
 Para Deformar mais de um Ponto de um Elemento Criado ao mesmo tempo,
Com o elemento selecionado, Clica nos pontos que deseja editar Segurando
SHIFT

UI Kits
 Elementos de Interface para utilizar nos projetos
 Há vários disponíveis para baixar na internet
 Em Plugins no Adobe XD, é possível acessar o Creative Cloud e baixar Fotos,
Temas, Vetores, Vídeos, Pacotes de Vetores e mais.

Criação de Web Layout / Versão Mobile


 Avaliar a Montagem de um Wireframe esboço antes. Criar um Guia de
Estilos para o Projeto quando terminar
 Definir Paleta de Cores, Tipografia, ícones antes de começar e colocar ao
lado do esboço do Wireframe
 Para Criar um Botão Interativo na Home do Site, Add o Botão na Home,
Duplica a Prancheta, Seleciona tudo e diminui a Opacidade, Cria onde o
botão da Home levaria.
 Para Compartilhar um Link do Projeto, Clica no Menu Compartilhar ( ALT +
3 ) e no canto superior direito configura e copia o Link.
 Para Criar Animação de Aumentar Elemento quando passa o Mouse,
Duplica a Prancheta, Na Prancheta Duplicada Aumenta o tamanho do
elemento.

Prototipagem
 Clicar no Menu Protótipo (ALT + 2)
 Para fazer troca de telas quando clicar em determinado item, Seleciona o
item, coloca a setinha para tela desejada, e configura o estilo de animação
no painel no canto direito da tela. (CALL TO ACTION!)

Tipografia
 H1 = Título, H2 = Subtítulo, Body = Texto
 Utilizar sempre Hierarquia de Textos!
 Estudar o Material do curso sobre Tipografia, quando for apresentar ou fazer
um projeto
 Estudar Classificação Tipográficas no Material do curso antes produzir um
projeto.
 Google Fonts para achar fontes

Shapes (Formas) Pen Tool (Caneta) Operações Booleanas


 Para Editar os Raios da Borda de uma Forma Criada, Segura ALT e altera o
formato individualmente
 Na Ferramenta Caneta (P) Quando for criar uma Forma Personalizada, Vai
dando duplo clique nos pontos criados para Adicionar Curva!
 Para Criar uma Máscara de Corte, Cria uma forma, Cria um elemento dentro
da forma, Duplica só a forma e coloca sobreposto dos dois, e depois clica em
Mascarar como Forma
 Operações Booleanas = Trata-se de Realizar Cortes Pegando Interseções,
exclusões de dois ou mais formas criadas, Fazer União de dois ou mais
elementos (VER EXEMPLO NO XD),
 Para Utilizar as Operações Booleanas, Crie Duas Formas Interligadas,
Selecione uma das opções de corte que ficam logo abaixo da opção Repetição
de Grade no canto superior direito do painel de Propiedades dos objetos
selecionados

Buscando Inspiração / Paleta de Cores


 Pinterest, Behance, Dribble, Design Inspiration, Collect UI
 Ex de Pesquisa: Landing Page, Footer, UI Interface.
 Pesquisar sobre Teoria da Cor quando for apresentar o Projeto!!!! (Para ficar
mais formal!!!)
 Sites p/ pegar Paleta de Cores: Color Hunt, UI Gradients, Adobe Color, Flat UI
Color, UI Color

Animações e Micro Interações/ Função 3D


 Para Realizar Animações e Micro Interações, Cria um ícone, agrupa tudo, add
a componentes, Cria o estado Hover, coloca a interação e faz a prototipagem
 Os Elementos que forem ser animados devem permanecer no mesmo
agrupamento
 Apertar CTRL T para ativar a função 3D

Você também pode gostar