Desenhar formas no Adobe XD

Quer usar ferramentas de criação de formas para criar um ícone ou um ativo de design? Você está no lugar certo.

Criar arte no XD é fácil com a variedade de ferramentas de desenho disponíveis na barra de ferramentas. Você pode criar ícones ou gráficos simples rapidamente com qualquer uma das ferramentas de criação de formas disponíveis ou usar a ferramenta de caneta avançada para criar formas ou objetos complexos. 

Continue lendo para explorar as possibilidades infinitas de usar ferramentas de criação de formas para criar seus ativos de design!

Desenhar usando as ferramentas de forma no XD

Já utiliza o Adobe XD?

Atualizar seu aplicativo

Confira as Novidades

Experimente

Obter o arquivo de exemplo

Antes de continuar

Familiarize-se com estes conceitos no XD:

Caminho

Uma forma é composta de vários segmentos de linha chamados caminhos. Um caminho simples consiste em dois pontos de ancoragem, que funcionam como marcadores segurando um fio no lugar.

Pontos de ancoragem

Os pontos inicial e final de um segmento de linha são marcados por pontos de ancoragem. Use os pontos de ancoragem para controlar o comprimento e a curva de um caminho. A alça de direção em um ponto de ancoragem determina a direção de um caminho.

Quantidade de cantos

O número de lados em um polígono.

Raio do canto

O raio do canto renderiza cantos arredondados para as formas.

Caixa delimitadora

Caixa delimitadora é uma borda retangular em torno de uma imagem, uma forma ou um texto que é possível arrastar para mover, transformar, girar ou dimensionar.

Deseja criar uma forma básica?

Todas as ferramentas de desenho, incluindo as ferramentas de formas, estão disponíveis na barra de ferramentas no modo de Design. As opções para cada ferramenta estão disponíveis no Inspetor de propriedades na parte direita.


Barra de ferramentas no Adobe XD


(Os visuais são representativos)

A ferramenta Retângulo (R): renderiza um retângulo, um retângulo arredondado, um quadrado ou uma forma personalizada.


ferramenta Elipse (E): renderiza elipses e círculos. Arraste com a tecla Shift pressionada para restringir a forma a um círculo.


A ferramenta Polígono (Y): renderiza um polígono com no mínimo três lados (triângulo) e chegue até 100 lados (hecatontágono).

<Inserir imagem>

ferramenta Linha (L): renderiza um segmento de linha reta.

Desenhar um retângulo ou quadrado

Desenhar retângulos e quadrados arredondados
Desenhar um retângulo ou quadrado

A ferramenta Retângulo na barra de ferramentas permite desenhar um retângulo ou um quadrado. Além disso, você também pode usar a ferramenta para criar formas personalizadas.

Para desenhar um retângulo, selecione a ferramenta Retângulo  na barra de ferramentas e arraste o mouse para a direita.

Para restringir a forma a um quadrado, simplesmente mantenha pressionada a tecla Shift enquanto desenha. 

Como faço para conferir cantos arredondados a um retângulo?

Você pode refinar ainda mais um retângulo adicionando uma borda arredondada a apenas um ou todos os cantos, modificando o Raio do canto.

Ajustar os cantos individualmente
Ajustar os raios dos cantos individualmente

Para alterar um único raio de canto, mantendo pressionada a tecla Option/Alt, clique na alça do raio  do canto que você deseja ajustar e arraste-o em direção ao centro da forma.

Como alternativa, defina um valor para esse canto na caixa de texto Raio diferente para cada canto  no Inspetor de propriedades.

Ajustar os quatro cantos simultaneamente
Ajustar todos os cantos para o mesmo raio

Para arredondar todos os cantos de uma vez, arraste qualquer uma das alças do raio do canto  em direção ao centro do retângulo.

Como alternativa, defina um valor uniforme para todos os cantos da caixa de texto Mesmo raio para todos os cantos  no Inspetor de propriedades.

 Não é possível modificar o raio do canto ao converter a forma em um caminho.

Desenhar um círculo ou uma elipse

A ferramenta Elipse é útil para desenhar círculos e elipses.

Desenhar um círculo

Selecione a ferramenta Ellipse  na barra de ferramentas. Mantenha a tecla Shift pressionada ao arrastar para restringir a forma para um círculo enquanto você desenha.

Desenhar uma elipse

Arraste o mouse para a direita.Observe as informações de posicionamento do objeto mostradas em Largura e Altura, e os eixos X e Y no Inspetor de propriedades.

Desenhar um polígono

A ferramenta Polígono traz uma variedade de formas, como triângulos, losangos, pentágonos, estrelas, corações.

Na barra de ferramentas, selecione a ferramenta Polígono e desenhe o triângulo padrão.

  • Mantenha a tecla Shift pressionada enquanto desenha para endireitar e restringir o polígono.
  • Para modificar a forma mais distante do Inspetor de propriedades, deixe a forma selecionada.

Alterar a contagem de cantos e o raio

Ferramenta Polígono
Usar as setas do teclado para aumentar ou diminuir a contagem dos cantos

No Inspetor de propriedades do polígono, você verá agora a opção Quantidade de cantos, a opção Raio do canto e o Proporção da estrela.

Use a caixa de texto Quantidade de cantos para alterar o número de lados do polígono. Use as setas para cima e para baixo do teclado para aumentar ou diminuir os lados.

Quer um polígono com cantos arredondados? Basta arrastar a alça do Raio do canto no canto superior do polígono em direção ao centro. Você também pode especificar um valor na caixa de texto Raio do canto no Inspetor de propriedades.

Criar formas de estrela e coração

Quer adicionar uma experiência de classificação em seu design? Você pode adicionar formas personalizáveis de estrela e coração em seu design sem criá-lo do zero.

(Estrela)

(Coração)

  1. Desenhe um polígono na prancheta.
  2. Clique na alça Proporção da estrela () no canto superior direito do polígono e arraste em direção ao raio.
    Como alternativa, na caixa de texto Proporção de estrela no Inspetor de propriedades, digite um valor de 1 a 100.
  3. Use a caixa de texto Quantidade de cantos para definir a contagem lateral. Você pode fazer uma estrela de três lados usando a forma de triângulo padrão e chegar até 100 lados.

  1. Desenhe um polígono na prancheta.
  2. No Inspetor de propriedades, clique na caixa de texto Quantidade de cantos  e digite o símbolo do coração <3.

 

Desenhar uma linha

A ferramenta Linha permite desenhar linhas horizontais, diagonais e verticais. Para desenhar uma linha diagonal ou vertical, mantenha a tecla Shift pressionada conforme você desenha.

Desenhar uma curva usando uma linha reta

Para fazer uma curva, desenhe uma linha e clique duas vezes nela usando a ferramenta Selecionar para converter a linha em um caminho. Clique duas vezes em um ponto de ancoragem para exibir sua alça de direção. Agora, arraste a alça em qualquer direção para renderizar uma curva perfeita. Adicione mais pontos de ancoragem ao vetor, se desejar.

Edição de formas

No Adobe XD, você pode editar formas rapidamente com uma única ferramenta: Selecionar. Nesta seção, vamos aprender a criar um balão de fala usando a ferramenta Elipse (ou escolher qualquer forma que desejar). 

Ferramenta Polígono
Crie um balão de fala usando ferramentas de forma (todas as imagens são representativas)

  1. Desenhe uma elipse na prancheta.
  2. Clique na ferramenta Selecionar e clique duas vezes na forma para convertê-la em um caminho. Nesse momento, você pode editar os pontos de ancoragem. Continue editando os pontos de ancoragem existentes ou simplesmente clique no segmento de caminho para adicionar novos pontos de ancoragem.
  3. Desenhe uma cauda (ápice) para o balão de fala arrastando um dos pontos de ancoragem para a direção desejada.
    Pressione Esc para sair do modo de edição de caminho. A caixa delimitadora reaparece e os pontos de ancoragem são ocultados.

Vídeo: como faço para criar ícones usando formas básicas?

“O Adobe XD possui um poderoso conjunto de ferramentas de desenho para criar a iconografia necessária para o seu sistema de design.” – Dani Beaumont, gerente de produto principal do XD.

Para saber mais sobre como criar sua própria iconografia do zero ou usar as bibliotecas de ícones existentes, assista a este vídeo de 4 minutos.

Para outro tutorial e arquivos de amostra para download, consulte Criar ícones com formas básicas.

Dicas e truques

Agora que você sabe como criar iconografia no XD, confira algumas dicas e truques úteis:

  • Você pode inclinar a forma de retângulo padrão convertendo-a em um caminho. Selecione os dois pontos de ancoragem na parte superior arrastando o mouse pelos pontos ou use a tecla Shift. Arraste um dos pontos de ancoragem para a esquerda ou direita, mantendo-o alinhado com a posição original dos pontos de ancoragem.
  • Ao desenhar formas, mantenha a tecla Option (Mac) ou Alt (Windows) pressionada para desenhar uma forma a partir do centro.

Para obter mais dicas profissionais sobre como trabalhar com as ferramentas de desenho no XD, siga a @Elainecchao, gerente de produto do XD, no Twitter.

O que vem por aí?

Oferecemos informações básicas sobre a criação de ícones usando as ferramentas de forma do XD. Se você quiser explorar mais as possibilidades com formas, veja como combinar formas básicas para criar padrões geométricos únicos.

Embora o XD tenha todas as ferramentas de desenho para criar arte vetorial, você também pode aproveitar a ampla variedade de ferramentas de desenho do Illustrator. Continue lendo para conhecer as muitas formas pelas quais você pode importar ativos do Illustrator para o XD.

Tem alguma dúvida ou sugestão?

Tem alguma dúvida ou sugestão?

Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer.

Receba ajuda com mais rapidez e facilidade

Novo usuário?