Dibujar formas en Adobe XD

¿Quiere utilizar herramientas de creación de formas para crear un icono o un activo de diseño? ¡Esta aplicación es la que necesita!

Gracias a la variedad de herramientas de dibujo disponibles en la barra de herramientas, crear elementos visuales e ilustraciones en XD es algo muy sencillo. Puede crear con rapidez iconos o gráficos sencillos con cualquiera de las herramientas de creación de formas disponibles o utilizar la herramienta avanzada de lápiz para crear formas u objetos más complejos. 

Siga leyendo para descubrir las innumerables aplicaciones que ofrecen las herramientas de creación de formas para crear sus recursos de diseño.

Dibujar con las herramientas de formas de XD

¿Es la primera vez que usa Adobe XD?

Obtener prueba gratuita

¿Ya está en Adobe XD?

Actualizar la aplicación

Descubra las novedades

Pruébela

Obtener archivo de muestra

Antes de continuar

Familiarícese con estos conceptos de XD:

Trazado

Una forma se compone de varios segmentos de línea llamados trazados. Un trazado simple consta de dos puntos de ancla, que sirven de fijadores que dejan vinculado un cable.

Puntos de ancla

Los puntos de inicio y fin de un segmento de línea vienen marcados por los puntos de ancla. Los puntos de ancla se utilizan para regular la longitud y la curva de un trazado. El controlador de dirección en un punto de ancla determina la dirección de un trazado.

Número de esquinas

Es el número de lados de un polígono.

Radio de vértice

El Radio de vértice representa los vértices redondeadas de las formas.

Cuadro delimitador

Un cuadro delimitador es un borde rectangular alrededor de una imagen, forma o texto que se puede arrastrar para mover, transformar, rotar o redimensionar.

¿Quiere crear una forma básica?

Todas las herramientas de dibujo, incluidas las herramientas de formas, se pueden encontrar en la barra de herramientas en el modo Diseño. Las opciones de cada herramienta están disponibles en el Inspector de propiedades que está a la derecha.


Barra de herramientas de Adobe XD


(las imágenes son solo ilustrativas)

La herramienta Rectángulo (R) permite crear un rectángulo normal, un rectángulo redondeado, un cuadrado o una forma personalizada.


La herramienta Elipse (E) permite crear elipses y círculos. Mantenga pulsada la tecla Mayús para forzar que la forma se convierta en un círculo.


La herramienta Polígono (Y) permite crear un polígono con tres lados como mínimo (triángulo) hasta un máximo de 100 lados (hectágono).

<Insert image>

La herramienta Línea (L): permite crear un segmento de línea recta.

Dibujar un rectángulo o cuadrado

Dibujar rectángulos y cuadrados redondeados
Dibujar un rectángulo o cuadrado

La herramienta Rectángulo de la barra de herramientas le permite dibujar un rectángulo o un cuadrado. Aparte de esto, también puede utilizar la herramienta para crear formas personalizadas.

Para dibujar un rectángulo, seleccione la herramienta Rectángulo  en la barra de herramientas y luego arrastre el puntero del ratón hacia la derecha.

Para hacer que la forma pase a ser un círculo o un cuadrado, mantenga pulsada la tecla Mayús mientras traza el dibujo. 

¿Cómo le aplico esquinas redondeadas a un rectángulo?

Puede pulir o depurar un rectángulo añadiéndolo un borde redondeado a uno solo o a todos los vértices si modifica el ajuste Radio de vértice.

Ajuste de los vértices uno a uno
Ajustar los radios de los vértices uno a uno

Para cambiar un solo radio de vértice, mantenga pulsada la tecla Opción/Alt, haga clic en el controlador del radio  del vértice que desee ajustar y arrástrelo hacia el centro de la forma.

Si lo prefiere, también puede elegir un valor para ese vértice en el cuadro de texto Diferente radio para cada vértice  en el Inspector de propiedades.

Ajuste simultáneo de los cuatro vértices
Ajustar todos los vértices al mismo radio

Para redondear todos los vértices a la vez, arrastre cualquiera de los controladores de los radios de vértice  hacia el centro del rectángulo.

O bien, también puede elegir un valor uniforme para todos los vértices en el cuadro de texto Mismo radio para todos los vértices  en el Inspector de propiedades.

 No es posible modificar el radio de vértice si convierte la forma en un trazado.

Dibuja un círculo o una elipse

La herramienta Elipse sirve para dibujar círculos y elipses.

Dibujar un círculo

Seleccione la herramienta Elipse  en la barra de herramientas. Mantenga pulsada la tecla Mayús mientras arrastra para hacer que la forma se convierta en un círculo o un cuadrado mientras dibuja.

Dibujar una elipse

Arrastre el puntero del ratón hacia la derecha. Fíjese en la información sobre la colocación de los objetos que aparece en los parámetros Anchura y Altura, así como en los ejes X e Y, en el Inspector de propiedades.

Dibujar un polígono

La herramienta Polígono incluye una serie de formas, como triángulos, rombos, pentágonos, estrellas y corazones.

En la barra de herramientas, seleccione la herramienta Polígono y dibuje el triángulo predeterminado.

  • Mantenga pulsada la tecla Mayús mientras dibuja para enderezar y contraer el polígono.
  • Para seguir modificando la forma en el Inspector de propiedades, deje la forma seleccionada.

Cambiar el radio y el número de esquinas

Herramienta Polígono
Usar las teclas de las flechas para aumentar o reducir el número de esquinas

En el Inspector de propiedades del polígono, verá las opciones Número de esquinas, Radio de vértice y Relación de estrellas.

Use el cuadro de texto Número de esquinas   para cambiar el número de lados del polígono. Use las flechas de dirección arriba y abajo del teclado mientras dibuja para aumentar o reducir el número de lados del polígono.

¿Quiere crear un polígono con esquinas redondeadas? Arrastre el controlador de Radio de vértice  desde la esquina superior del polígono hacia el centro. También puede indicar un valor en el cuadro de texto Radio de vértice  en el Inspector de propiedades.

Crear formas de estrella y corazón

¿Quiere añadir una opción de valoración o puntuación en su diseño? Puede añadir formas de estrella y corazón personalizables en él sin tener que crearlas desde cero.

(Estrella)

(Corazón)

  1. Dibuje un polígono en la mesa de trabajo.
  2. Haga clic en el controlador de Relación de estrellas () en la esquina superior derecha del polígono y arrástrelo hacia el radio.
    O bien, en el cuadro de texto Relación de estrellas  del Inspector de propiedades, introduzca un valor del 1 al 100.
  3. Use el cuadro de texto Número de esquinas   para elegir el número de lados. Puede hacer una estrella de tres lados con la forma de triángulo predeterminada y añadir hasta 100 lados.

  1. Dibuje un polígono en la mesa de trabajo.
  2. En el Inspector de propiedades, haga clic en el cuadro de texto Número de esquinas  e introduzca el símbolo del corazón <3.

 

Dibujar una línea

La herramienta Línea le permite dibujar líneas horizontales, diagonales y verticales.  Para dibujar una línea diagonal o vertical, mantenga pulsada la tecla Mayús mientras la dibuja.

Dibujar una curva usando una línea recta

Para hacer una curva, dibuje una línea y haga doble clic en ella con la herramienta Seleccionar para convertir la línea en un trazado. Haga doble clic en un punto de ancla para que se vea el controlador de dirección. Tras esto, arrastre el controlador a cualquier dirección para crear una curva perfecta. Añada más puntos de ancla al vector si lo desea.

Editar formas

En Adobe XD, puede editar formas con rapidez con solo usar la herramienta Seleccionar. En esta sección, aprenderá a crear un bocadillo con la herramienta Elipse (o elegir la forma que desee). 

Herramienta Polígono
Crear un bocadillo con herramientas de formas (todas las imágenes son ilustrativas)

  1. Dibuje una elipse en la mesa de trabajo.
  2. Haga clic en la herramienta Seleccionar y haga doble clic en la forma para convertirla en un trazado. Hecho esto, podrá editar los puntos de ancla. Siga editando los puntos de ancla existentes o haga clic en el segmento del trazado para añadir nuevos puntos de ancla.
  3. Dibuje el apéndice del bocadillo tirando de uno de los puntos de ancla en la dirección que desee.
    Pulse Esc para salir del modo de edición del trazado. El cuadro delimitador volverá a aparecer y los puntos de ancla se ocultarán.

Vídeo: ¿Cómo se crean iconos con formas básicas?

“Adobe XD ofrece una variada gama de herramientas de dibujo para crear los elementos iconográficos que necesita para su sistema de diseño”. – Dani Beaumont, responsable principal de producto de XD.

Para obtener más información sobre cómo crear sus propios diseños de iconos desde cero o utilizar las bibliotecas de iconos existentes, vea este vídeo de 4 minutos.

Para ver otros tutoriales y probar archivos de muestra descargables, consulte Crear iconos con formas básicas.

Consejos y trucos

Ahora que ya sabe cómo crear iconos en XD, le ofrecemos algunos consejos y trucos prácticos:

  • Puede deformar la forma predeterminada de un rectángulo convirtiéndola en un trazado. Seleccione los dos puntos de ancla de la parte superior arrastrando el puntero del ratón por los puntos o pulse la tecla Mayús. Arrastre uno de los puntos de ancla hacia la izquierda o hacia la derecha, asegurándose de que quede alineado con la posición original de los puntos de ancla.
  • Al dibujar una forma, mantenga pulsada la tecla Opción (Mac) o Alt (Windows) para dibujar una forma desde el centro.

Para conocer más consejos sobre cómo hacer uso de las herramientas de dibujo de XD, siga en Twitter a @Elainecchao, responsable de producto de XD.

¿Qué viene después?

Ya ha aprendido los conceptos básicos para crear iconos a través de las herramientas de formas de XD. Si desea descubrir más funcionalidades relacionadas con las formas, consulte cómo combinar formas básicas para crear patrones geométricos únicos.

Aunque XD cuenta con todas las herramientas de dibujo para crear ilustraciones vectoriales, también puede aprovechar la gama más amplia de herramientas de dibujo disponible en Illustrator. Siga leyendo para conocer muchas otras formas con las que puede traer recursos y contenidos de Illustrator a XD.

¿Tiene alguna pregunta o idea?

¿Tiene alguna pregunta o idea?

Si tiene alguna pregunta que hacer o una idea que compartir, venga y participe en la Comunidad de Adobe XD. Nos gustaría que nos dejara sus comentarios y ver sus creaciones.

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?