No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Adobe XD

Curso de Adobe XD

Ricardo Mendi

Ricardo Mendi

Herramientas de Alineación y Transformación en Adobe XD

10/21
Recursos

¿Cómo personalizar tus diseños en Adobe XD?

La personalización de diseños es una parte esencial en el proceso creativo, y Adobe XD proporciona herramientas poderosas para impulsar tu imaginación. En esta guía, exploraremos técnicas clave que pueden transformar tus creaciones, brindándote las habilidades necesarias para alinear, combinar y personalizar elementos de manera efectiva.

¿Qué es la herramienta de alinear y cómo se usa?

La herramienta de alinear en Adobe XD es fundamental para organizar tus elementos con precisión y consistencia. A menudo, los diseños iniciales pueden parecer desordenados. Aquí es donde entra en juego esta herramienta:

  • Alinear texto: Selecciona varios bloques de texto para alinear sus bordes. Puedes optar por alineación a la izquierda, centrada o a la derecha, lo que garantiza una presentación nítida y coherente.
  • Centrar elementos: Al trabajar con formas como triángulos que funcionan como cursores, el alineamiento enfatiza uniformidad, especialmente cuando se desea que gocen de simetría visual en el diseño.

¿Cómo combinar y crear nuevas formas?

La habilidad para combinar formas abre un mundo de posibilidades creativas. Adobe XD permite realizar estas combinaciones con gran facilidad:

  • Sumar formas: Al unir múltiples formas, puedes crear una sola figura unificada, útil para consolidar los elementos del diseño.
  • Restar y diferenciar: Estas opciones son perfectas para crear efectos como el de una luna o para obtener intersecciones, amplificando la complejidad y sofisticación de tu composición.
  • Preservar las líneas originales: Mantener las líneas de las formas originales te da la libertad de separar o volver a modificar las composiciones tantas veces como desees.

¿Qué es posible con la herramienta de pluma?

La herramienta de pluma es ideal para diseñadores que buscan soltar su creatividad al máximo. Te permite crear formas personalizadas, fuera de las geometrías básicas:

  • Crear puntos y curvas: Al hacer clic y mover el ratón, puedes añadir puntos con tiradores para controlar las curvas, dando lugar a un sinfín de posibilidades en iconos y logotipos.
  • Personalización extrema: Los tiradores también facilitan ajustes finos, permitiéndote modificar cada curva hasta lograr el efecto deseado.

¿Cómo se pueden manejar y editar imágenes?

La integración de imágenes en Adobe XD va más allá de simplemente colocar una foto en tu diseño. Existen múltiples maneras de personalizarlas:

  • Recorte a medida: Ajusta las dimensiones de una imagen en el panel de propiedades sin perder resolución, encuadrando áreas específicas que deseas destacar.
  • Creación de máscaras: Al trabajar con formas, como círculos o incluso formas personalizadas, las máscaras permiten integrar imágenes de manera creativa, funcionando bien para detalles como fotografías de autores en un diseño editorial.

Estas técnicas no solo enriquecen tus proyectos, sino que también fomentan la exploración de nuevas ideas y creatividad. Continúa experimentando y comparte tus avances con la comunidad, pues cada diseño es un paso hacia la perfección.

Aportes 24

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

¡Pequeño aporte! 😃
Para importar imágenes tambien se puede arrastrar desde nuestro administrador de archivos y soltar en Adobe XD.
.
Nota: Hacer una mascara en Adobe XD es mucho mas fácil que hacerla en Figma. No quiero decir que hacerla sea complicado, solo que aquí es mucho mas practico.

Tip: incluso cuando ya se obtiene la imagen con la máscara deseada, & deseas cambiarla, Solo arrastras la imagen a tu figura y automáticamente se agrega a tu máscara de recorte.
Esto evita que trabajes doble.

Tip:

Las imagenes tambien las puedes copiar desde internet y pegar directamente en Adobe XD desde

Que tal… buen les comparto el avance de mi proyecto. Gustoso de recibir vuestro Feedback…! Saludos 😀

amigos miren mi practica una app para chicas

Comparto mi pequeño avance 😄

Yo pensando 🙄 como llevar todo esto a CSS y en esta clase si me superó!🥴🥴
P.D. La única que se me ocurre es crear el archivo de la máscara, o la forma creada, en un archivo independiente.

Este es sólo un ejemplo de cómo podemos usar las formas libres como máscaras de recorte

Aplicando un poco de lo aprendido. ![](https://static.platzi.com/media/user_upload/Captura%20de%20Pantalla%202023-12-25%20a%20la%28s%29%2012.31.33-3ae16143-da45-422d-af67-445d708c4efb.jpg)
![](https://static.platzi.com/media/user_upload/Basico%20adobe%20xd%202-8c897897-c617-4ad9-a1c6-5824bcf94a53.jpg)
Facil de entender :)

Las últimas 2 herramientas de creación de forma son más bien: Se mantienen las áreas que se solapan entre ambas formas y Se mantienen las áreas que no se solapan entre ambas formas

Por si alguien quedó confundido, la última no junta las formas y deja los bordes, parece que deja los bordes pero en realidad hay un hoyo en medio de esa forma.

Recortar imágenes en ancho, alto o ambos.

Cómo importar imágenes al artboard

Creación de formas (Fusionar, Restas, Diferencia y Suma)

Relación de componentes - Alineación

Creación de formas irregulares - Herramienta de Pluma

Cómo crear máscaras de imágenes con formas.

![](https://static.platzi.com/media/user_upload/Obras%20desktop-f7a6d1d0-674a-4a01-81e7-d70e52c50a73.jpg)
Gracias, familiarizarse es importante hasta alcanzar la perfección.

En las últimas versiones de Adobe XD no sale esta opción

Muy buena explicación , Que buena clase

Pienso que para hacer mascaras personalizadas quizás podrías utilizar una librería de SVG y así ganar tiempo en el diseño…este programa en conjunto con adobe photoshop e illustrator, puede ser muy poderoso ❤️