Caminho
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!
Antes de continuar
Familiarize-se com estes conceitos no XD:
- Noções básicas sobre a área de trabalho.
- Configurar pranchetas no XD.
|
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.
![]() |
A ferramenta Retângulo (R): renderiza um retângulo, um retângulo arredondado, um quadrado ou uma forma personalizada. |
|
---|---|---|
|
<Inserir imagem> A ferramenta Linha (L): renderiza um segmento de linha reta. |
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.
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.
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.
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 |
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
Alterar a contagem de cantos e o raio


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.
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.
|
|
|
|
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).
- Desenhe uma elipse na prancheta.
- 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.
- 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?
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.