Como criar gráficos com o Adobe XD: um guia para iniciantes

O Adobe XD é uma ferramenta poderosa que permite criar designs de UI/UX para software, aplicativos, sites e muito mais. Isso também inclui a criação de maquetes, protótipos e componentes de interface do usuário personalizados para uma interface. Você pode criar designs simples e complexos usando o Adobe XD.

Aqui, descreveremos como adicionar gráficos simples, incluindo formas, imagens e texto, a um novo projeto do Adobe XD. Isso será seguido por um guia sobre como converter um grupo de formas em componentes e como reutilizar esses componentes na página. Por fim, o artigo também abordará como exportar seus gráficos. Vamos pular direto.

Criando um projeto Adobe XD

Ao criar um novo projeto do Adobe XD, você deve selecionar um tamanho de layout para seu projeto. Ele fornece alguns modelos para você escolher com base em alguns dispositivos populares.

Alguns exemplos disso incluem o iPhone X/XS/11 Pro (375px por 812px), iPad (768px por 1024px) ou Web 1920 (1920px por 1080px). Como alternativa, você também tem a opção de selecionar uma largura e uma altura personalizadas para o seu projeto.

Depois de criar um novo projeto, o Adobe XD abrirá uma página em branco. É aqui que você pode começar a adicionar imagens, formas, texto ou outros elementos de design. Dependendo da versão do Adobe XD que você possui, você pode explore alguns dos novos recursos que o Adobe XD oferece.

O elemento de design de nível superior é a própria página de tela. Se você realçá-lo, poderá usar o painel direito para alterar algumas de suas propriedades diretamente, como a largura ou a altura da tela.

Como adicionar imagens

Há várias maneiras de adicionar imagens ao seu projeto do Adobe XD.

• A primeira opção é clicar no botão Hamburger ícone de menu na parte superior da coluna à esquerda. Clique em Importare abra o arquivo que deseja adicionar.
• Outra opção é navegar até sua imagem no explorador de arquivos e arrastar o arquivo diretamente para o Adobe XD.
• Uma terceira opção é copiar e colar sua imagem se você a tiver aberto em outro software, como o Microsoft Word.

Como redimensionar e reposicionar uma imagem

Você pode reposicionar e redimensionar uma imagem diretamente na tela ou alterando suas propriedades.

1. Destaque a imagem. Ao destacar um elemento de design na tela, você poderá ver suas propriedades no painel direito.
2. Altere a largura e a altura da imagem. Estes são representados por C e H Campos.
3. Você também pode alterar a X e S coordenadas de onde o canto superior esquerdo da imagem começa.
4. Para mover a imagem, clique e arraste a imagem na tela.
5. Para redimensionar, arraste os pontos localizados nas bordas da imagem.

Como ajustar as bordas de uma imagem

Você pode ajustar os cantos da imagem para alterar sua forma.

1. Destaque a imagem.
2. Você verá alguns pontos localizados ao redor da imagem. Além disso, também existem alguns pontos localizados dentro dos cantos da imagem.
3. Clique e arraste em um ponto localizado dentro da imagem. Isso irá remodelar lentamente a imagem em uma forma diferente.

Como adicionar outros efeitos à imagem

Você pode manipular a imagem ainda mais adicionando efeitos. Isso inclui opacidade, bordas, efeitos de desfoque e muito mais.

1. Realce a imagem e altere o Ovelocidade no painel direito.
2. Ainda no painel direito, altere a cor do Bpedido. Aqui, você também pode alterar o espessura, estilo traço, e estilo de canto da fronteira.
3. Adicione um efeito de desfoque à imagem e altere o Quantidade de desfoque do objeto para aumentar ou diminuir a intensidade do desfoque.

Como adicionar formas

Você pode adicionar formas no Adobe XD por meio do painel esquerdo.

1. No painel esquerdo, você pode optar por criar várias formas básicas, incluindo retângulo, círculo, triângulo e linha. Selecione a forma que deseja desenhar.
2. Clique em qualquer ponto na tela e arraste o cursor para começar a criar a forma.

Como adicionar formas personalizadas

Você pode usar a ferramenta de forma personalizada para criar sua própria forma.

1. No painel esquerdo, selecione o caneta ícone.
2. Clique em qualquer lugar na tela para adicionar seu primeiro ponto, ou "canto", para a forma. Para cada ponto da forma, clique na tela na área onde você gostaria que ela estivesse.
3. Quando terminar de criar a forma, pressione o botão Esc tecla do seu teclado.

Como alterar a cor de uma forma

Você pode alterar a cor da forma usando o painel direito.

1. Destaque a forma.
2. No painel direito, altere o Fdoente.
3. Além disso, você também pode adicionar bordas, efeitos de desfoque e alterar a opacidade da forma da mesma forma que as imagens.

Como adicionar texto

Você também pode adicionar e editar texto da mesma forma que você adiciona formas.

1. Clique no Texto ícone no painel esquerdo.
2. Clique em qualquer lugar na tela para adicionar uma nova caixa de texto. Digite o texto desejado na caixa de texto.
3. Use o painel direito para editar o Tamanho, família de fontes, e alinhamento Campos.

Como criar componentes

Um componente é um grupo de elementos de design que podem ser reutilizados. Para criar e usar um componente, primeiro você precisa ter um grupo de formas ou outros objetos de design.

1. Realce o grupo de formas na tela. Clique com o botão direito do mouse no grupo e selecione Criar componente.
2. Na parte inferior do painel esquerdo, clique em Bens. Um novo menu será aberto listando todos os ativos que você possui, incluindo o componente que acabou de adicionar.
3. Clique e arraste o componente da lista de componentes para a tela. Isso criará exatamente o mesmo grupo de elementos.

Como exportar itens

Você pode exportar itens individuais, bem como a página inteira.

1. Se você deseja exportar um único item, realce o item que deseja exportar.
2. Clique no Hamburger ícone de menu na parte superior da coluna da esquerda.
3. Selecionar Exportar, depois clique em Selecionado.
4. Se você deseja exportar a página inteira (ou todas as páginas), selecione Todas as pranchetas em vez de.
5. Você pode especificar o formato do arquivo (PNG, JPG, SVG ou PDF), para que será o item exportado (como Web ou iOS) e onde deseja salvar seu arquivo.

Seja habilidoso no Adobe XD

Estes são apenas o básico. Alguns outros recursos incluem a capacidade de adicionar hiperlinks, símbolos, integrações de aplicativos e kits de interface do usuário. O Adobe XD também lança novos recursos de vez em quando para ajudar a melhorar e agilizar a criação de seus modelos e designs de interface do usuário personalizados.

Existem vários cursos disponíveis on-line para ajudar a levar suas novas habilidades de design para o próximo nível.

Esses cursos da Adobe transformarão você em um mestre da Creative Cloud

Leia a seguir

Sobre o autor