Saiba como usar as ferramentas de desenho e texto do Adobe XD para criar objetos gráficos e de texto.

Você pode desenhar rapidamente ícones e gráficos simples no Adobe XD CC usando as ferramentas de desenho na barra de ferramentas esquerda, as ferramentas Retângulo, Elipse, Linha e Caneta. A ferramenta de seleção ajuda a selecionar uma linha específica, formas ou objetos para editá-los.

Você pode combinar estas formas de diferentes maneiras para criar formas e objetos compostos ou mascarar partes da forma. Para obter mais informações sobre técnicas de mascaramento e combinação, consulte Combinar objetos usando operações booleanas e mascarar objetos com formas.

Desenhar retângulos e quadrados

  1. Selecione a ferramenta Retângulo .

  2. Execute uma das seguintes ações:

    • Para desenhar um retângulo, arraste diagonalmente até o retângulo atingir o tamanho desejado.
    • Para desenhar um quadrado, mantenha pressionada a tecla Shift ao arrastar diagonalmente, até o quadrado atingir o tamanho desejado.
  3. Para desenhar um retângulo arredondado, desenhe um retângulo e, depois, clique nele para ver as alças de edição do raio. Clique em qualquer alça e arraste-a para o centro do retângulo. Você também pode usar o Inspetor de propriedades para inserir um valor específico do raio de um ou mais cantos.

    Desenhar retângulos e quadrados arredondados
    Desenhar retângulos e quadrados arredondados

  4. Para personalizar ainda mais seu quadrado ou retângulo, você pode editar os raios do canto.

    • Para ajustar o raio de apenas um canto, faça o seguinte:
      • Pressione Option + clique, clique na alça do canto e arraste o mouse.
      • Edite o valor dos raios dos cantos individualmente depois de selecionar  no Inspetor de propriedades.
    • Para ajustar o raio de todos os cantos simultaneamente, faça o seguinte:
      • Clique em um raio do canto e arraste o mouse. 
      • Edite o valor dos raios depois de selecionar  no Inspetor de propriedades.
    Ajustar os quatro cantos simultaneamente
    Ajustar os quatro cantos simultaneamente

    Ajustar os cantos individualmente
    Ajustar os cantos individualmente


Desenhar elipses e círculos

  1. Selecione a ferramenta Elipse .

  2. Execute uma das seguintes ações:

    • Arraste diagonalmente até a elipse atingir o tamanho desejado.
    • Para criar um círculo, mantenha a tecla Shift pressionada enquanto arrasta.
    Redimensionar elipse
    Arrastar e redimensionar a elipse.

    Arrastar e redimensionar o círculo.
    Segure a tecla Shift e arraste para redimensionar o círculo.

Desenhar linhas

  1. Selecione a ferramenta Linha .

  2. Posicione o ponteiro no local desejado para o início da linha e arraste até o local desejado para o término da linha.

    Desenhar linhas
    Desenhar linhas usando a ferramenta Linha.

Desenhar com a ferramenta Caneta

Observação:

Tutorial: desenhar ícones e formas para o seu design.

Saiba como usar a ferramenta Caneta para desenhar imagens no Adobe XD CC.

O demarcador mais simples que você pode desenhar com a ferramenta Caneta é uma linha reta, feita com a seleção da ferramenta Caneta para criar dois pontos de ancoragem. Ao continuar clicando, você cria um demarcador feito de segmentos de linha reta conectados por pontos de vértice.

  1. Selecione a ferramenta Caneta .

  2. Posicione a ferramenta Caneta no local desejado para o início do segmento e clique para definir o primeiro ponto de ancoragem.

  3. Clique novamente onde você deseja que o segmento termine (clique com a tecla Shift pressionada para restringir o ângulo do segmento a um múltiplo de 45°).

  4. Continue clicando para definir pontos de ancoragem para outros segmentos retos.

    Observação:

    Para converter um ponto de ancoragem de reto em curvado e vice-versa, clique duas vezes no ponto de ancoragem.

    O último ponto de ancoragem adicionado sempre é exibido como um círculo sólido, que indica que ele está selecionado. Os pontos de ancoragem anteriormente definidos tornam-se vazados e desmarcados conforme mais pontos de ancoragem são adicionados.

  5. Complete o demarcador executando um dos seguintes procedimentos:

    • Para deixar o demarcador aberto, clique em Esc.
    • Para fechar o demarcador, posicione a ferramenta Caneta sobre o primeiro ponto de ancoragem (vazio). Clique ou arraste para fechar o demarcador.
    • Para selecionar e arrastar o ponto inicial sem fechar o demarcador, segure a tecla Cmd/Ctrl.
    Desenhar linhas retas
    Desenhar linhas retas usando a ferramenta Caneta.

Desenhar curvas

Você cria uma curva adicionando um ponto de ancoragem onde uma curva muda de direção e arrastando as linhas de direção que formam a curva. O comprimento e a inclinação das linhas de direção determinam a forma da curva.

As curvas são mais fáceis de serem editadas e seu sistema pode exibi-las e imprimi-las mais rápido se elas forem desenhadas usando o menor número de pontos de ancoragem possível. O uso de muitos pontos também pode gerar saliências indesejadas em uma curva. Em vez disso, desenhe pontos de ancoragem bem espaçados e pratique a formatação das curvas ajustando o comprimento e os ângulos das linhas de direção.

  1. Selecione a ferramenta Caneta .

  2. Posicione a ferramenta Caneta no local desejado para o início da curva e mantenha o botão do mouse pressionado.

  3. Arraste para definir a inclinação do segmento curvado que você está criando e, em seguida, solte o botão do mouse.

    Observação:

    Mantenha a tecla Shift pressionada enquanto arrasta para restringir a ferramenta a múltiplos de 15.

  4. Posicione a ferramenta Caneta no local em que deseja que o segmento curvado termine e execute um dos procedimentos a seguir:

    • Para criar uma curva em forma de C, arraste em uma direção oposta à linha de direção anterior. Em seguida, solte o botão do mouse.
    • Para criar uma curva em forma de S, arraste na mesma direção da linha de direção anterior. Em seguida, solte o botão do mouse.
    Desenhar curvas
    Desenhar curvas usando a ferramenta Caneta.

  5. Para criar várias curvas suaves, continue arrastando a ferramenta Caneta a partir de locais diferentes.

    Observação:

    Arraste linhas direcionais segurando a tecla Option para quebrar a direção das linhas de um ponto de ancoragem.

  6. Complete o demarcador executando um dos seguintes procedimentos:

    • Para fechar o demarcador, posicione a ferramenta Caneta sobre o primeiro ponto de ancoragem (vazio). Clique ou arraste para fechar o demarcador.
    • Para deixar o demarcador aberto, pressione Esc.

Desenhar linhas retas seguidas de curvas

  1. Usando a ferramenta Caneta (), clique nos pontos de vértice em dois locais para criar um segmento reto.

  2. Posicione a ferramenta Caneta sobre a extremidade selecionada. Para definir a inclinação do segmento curvado criado em seguida, clique no ponto de ancoragem e arraste a linha direcional que é exibida.

  3. Posicione a caneta onde deseja colocar o próximo ponto de ancoragem; em seguida, clique (e arraste, se desejado) no novo ponto de ancoragem para completar a curva.

Desenhar curvas seguidas de linhas retas

  1. Usando a ferramenta Caneta (), arraste para criar o primeiro ponto suave de um segmento curvado e solte o botão do mouse.

  2. Reposicione a ferramenta Caneta no local em que deseja que o segmento curvado termine; arraste para completar a curva e solte o botão do mouse.

  3. Posicione a ferramenta Caneta sobre a extremidade selecionada.

  4. Reposicione a ferramenta Caneta onde deseja que o segmento reto termine e clique para completar o segmento reto.

    Curvas seguidas de linhas retas
    Desenhar curvas seguidas de linhas retas

Desenhar dois segmentos curvados conectados por um vértice

  1. Usando a ferramenta Caneta (), arraste para criar o primeiro ponto suave de um segmento curvado.

  2. Reposicione a ferramenta Caneta e arraste para criar uma curva com um segundo ponto suave.

  3. Reposicione a ferramenta Caneta no local em que deseja que o segundo segmento curvado termine, e arraste um novo ponto suave para completar o segundo segmento curvado.

Modo de Desenho versus modo de Edição

Para alternar os modos de desenho e de edição, pressione a tecla Esc.

Você também pode inserir o “modo de edição de demarcador” clicando duas vezes na forma ou no demarcador. Nesse modo, os pontos de ancoragem da forma são visíveis, mas o movimento do mouse não desenha nada. Você pode manipular os pontos de ancoragem/controle ou inserir novos pontos de ancoragem nos segmentos existentes no demarcador.

Ao desenhar com a ferramenta Caneta, você pode executar todas as edições descritas acima, além de desenhar novos segmentos.

Estender demarcadores existentes

Ao selecionar a ferramenta Caneta, todos os demarcadores da prancheta abaixo do ponteiro do mouse exibem alças nos pontos de início e fim. Clique em uma das alças para continuar desenhando o demarcador a partir deste ponto.

Estender um demarcador fechado vai reabri-lo e colocar a ferramenta Caneta no modo de desenho para ele.

Selecionar pontos de ancoragem

Clique duas vezes no desenho para exibir os pontos de ancoragem. Clique em um ponto de ancoragem para selecioná-lo. Para selecionar vários pontos de ancoragem, segure a tecla Shift e selecione os pontos de ancoragem ou marque-os e selecione-os usando a ferramenta Seleção.

Ajuste os pontos de ancoragem selecionados usando o teclado, arraste-os usando o mouse ou edite suas propriedades (coordenadas x e y) no inspetor de propriedades.

Desabilitar o ajuste de pontos de ancoragem

Quando você coloca um novo ponto de ancoragem ou arrasta um existente, as linhas de ajuste são exibidas quando uma âncora está vertical ou horizontalmente próxima a outro ponto de ancoragem. Mantenha a tecla Cmd/Ctrl pressionada para desabilitar o ajuste de pontos de ancoragem.

Adicionar e editar pontos de ancoragem

Clique duas vezes no desenho para selecioná-lo e exibir os pontos de ancoragem. Clique no demarcador para adicionar novos pontos de ancoragem no local do cursor.

Adicionar e editar pontos de ancoragem
Adicionar e editar pontos de ancoragem

Excluir pontos de ancoragem

Selecione os pontos de ancoragem e pressione Excluir.

Atalhos de desenho

Ferramenta de desenho Atalho de teclado no MacOS Atalho de teclado no Windows
Selecionar V V
Retângulo R R
Elipse E E
Linha L L
Caneta P P
Zoom

Entrar no modo Zoom: Z

  • Ampliar o zoom: clique em qualquer lugar na tela do Adobe XD ou clique na prancheta desejada. Ou selecione uma área para ampliar o zoom.
  • Reduzir o zoom: Option + Clique

Para ativar temporariamente a ampliação e a redução de zoom:

  • Pressione Espaço + Cmd e, depois, clique ou selecione uma área na prancheta para ampliar o zoom.
  • Para reduzir o zoom, pressione Espaço + Cmd + Opt

Entrar no modo Zoom: Z

  • Ampliar o zoom: clique em qualquer lugar na tela do Adobe XD ou clique na prancheta desejada. Ou selecione uma área para ampliar o zoom.
  • Reduzir o zoom: Alt + Clique

Para ativar temporariamente a ampliação de zoom:

  • Pressione Espaço + Ctrl e, depois, clique ou selecione uma área na prancheta para ampliar o zoom.
Aplicar zoom na seleção ⌘3 Ctrl + 3

Inserir texto em um ponto

Clique na ferramenta de texto e depois no local onde deseja que o texto comece. Digite o texto e pressione Return.

Quando você digita texto selecionando um ponto na tela, uma linha de texto horizontal é exibida no local onde você clicou e é expandida conforme os caracteres são digitados. Cada linha de texto é independente: a linha aumenta ou diminui à medida que é editada, mas não há quebra para a próxima linha. A inserção de texto desse modo é útil para a adição de algumas palavras à arte-final.

Inserir texto em um ponto
Inserir texto em um ponto.

Você pode digitar texto sobre outros objetos e organizar o texto para ser exibido à frente usando as opções Objeto > Organizar.

Inserir texto em uma área

Clique na ferramenta de texto e depois no local onde deseja inserir o texto na tela e arraste para definir a área de texto. Em seguida, clique dentro da área para começar a digitar o texto.

Quando você define a área de texto, os limites de um objeto controlam o fluxo de caracteres, horizontal ou verticalmente. Quando um texto atinge um limite, ele é quebrado automaticamente para se ajustar em uma área definida. Essa maneira de inserir texto é útil quando você deseja criar um ou mais parágrafos, como em um folheto.

Inserir texto no Experience Design
Clique na ferramenta de texto e comece a digitar o texto.

Importar texto de arquivos de texto

Você pode incluir com facilidade texto pré-escrito na sua prancheta usando um dos seguintes métodos:

  • Arrastar um arquivo de texto para a prancheta.

Você pode incluir com facilidade texto pré-escrito em seu design simplesmente arrastando um arquivo de texto sem formatação para a prancheta. Essa ação cria uma área de texto na prancheta com o conteúdo do arquivo de texto.          

  • Arrastar um arquivo de texto para uma repetição de grade.

Você também pode arrastar um arquivo de texto (com novas linhas) e, depois, arrastá-lo sobre um componente de texto em uma repetição de grade. Todos os elementos de texto são preenchidos com o texto do arquivo em questão.

Para obter mais informações, consulte Adicionar texto de um arquivo de texto a uma repetição de grade

  • Copiar e colar o texto na prancheta.

Você também pode copiar e colar texto na prancheta criando um elemento da área de texto que pode ser movido e editado com facilidade no Adobe XD.

Redimensionar a área de texto

Clique no texto e arraste a alça para alterar o tamanho da fonte. Este recurso está disponível somente para texto expansivo.

Arrastar a alça e redimensionar o texto
Arrastar a alça para redimensionar o texto.

Formatar texto

Clique no texto e, em seguida, especifique a fonte, o tamanho da fonte e o alinhamento do texto usando o Inspetor de propriedades.

Você também pode selecionar palavras ou caracteres individuais em um bloco de texto e formatar essas seções individualmente.

Formatar todo o objeto de texto ou as seções individuais do texto
Formatar todo o objeto de texto ou as seções individuais do texto

Alterar o espaçamento de caracteres e linhas

Para alterar o espaçamento de caracteres, clique no objeto de texto e especifique o espaçamento usando a opção Espaçamento de caracteres no Inspetor de propriedades.

Para alterar o espaçamento de caracteres em um subconjunto de texto, clique no texto e especifique o espaçamento em mili-ems usando o Inspetor de propriedades.

Alterar o espaçamento de caracteres de um texto em um objeto de texto
Alterar o espaçamento de caracteres de um texto em um objeto de texto

Para alterar o espaçamento entre linhas, clique na área de texto e especifique o espaçamento usando a opção Espaçamento entre linhas no Inspetor de propriedades.

Para restaurar a altura da linha para o padrão, insira 0 na opção Espaçamento entre linhas no Inspetor de propriedades.

Alterar o espaçamento entre linhas
Alterar o espaçamento entre linhas

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