7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Adobe XD

De la A a la Z de Adobe XD: ¡consejos y trucos!

Scroll to top
Read Time: 12 mins

Spanish (Español) translation by Naudys Angulo (you can also view the original English article)

Permite que te muestre algunos consejos y trucos rápidos para Adobe XD. Veremos 26 funciones, consejos y trucos de Adobe XD de la A a la Z.

A-Z of Adobe XDA-Z of Adobe XDA-Z of Adobe XD

Una vez que te hayas familiarizado con Adobe XD, ¡visita Envato Elements! Con una suscripción, tendrás acceso ilimitado a millones de recursos digitales creativos como gráficos, fuentes de Adobe XD, kits de interfaz de usuario y mucho más. ¡Una simple licencia comercial que puedes cancelar en cualquier momento!

Lo que aprenderás:

  • Cómo crear prototipos en Adobe XD
  • Cómo crear una animación en Adobe XD
  • Cómo trabajar con componentes en Adobe XD
  • Cómo crear una máscara en Adobe XD
  • Cómo aplicar un degradado en Adobe XD
  • Cómo trabajar con los atajos de Adobe XD

A para las Artboards (Mesas de trabajo)

Una Mesa de Trabajo representa el área donde se creará un diseño de pantalla en Adobe XD. Por omisión, tu mesa de trabajo inicial será blanca, y puedes tener múltiples mesas de trabajo en un documento.

Seleccionando la herramienta Mesa de trabajo en la barra de herramientas o pulsando la tecla de acceso rápido A, se abrirá una lista con los tamaños de pantalla más comunes para móviles, tabletas, ordenadores de sobremesa y dispositivos portátiles en la barra lateral derecha. Puedes seleccionar una de las mesas de trabajo preestablecidas y añadirla a tu diseño, o puedes definir tu propia mesa de trabajo de tamaño personalizado.

Haz clic en el nombre de una Mesa de trabajo para seleccionarla, utiliza el cuadro delimitador para escalarla o haz doble clic en el nombre para cambiarle el nombre.

AdobeXD artboardAdobeXD artboardAdobeXD artboard

B es para los Borders (Bordes)

Un Borde (trazo) puede aplicarse a cualquier tipo de objeto dentro de un documento de Adobe XD.

Una vez aplicado, puedes cambiar su color, ajustar el estilo, establecer la alineación y su grosor, o se puede seleccionar uno de los ajustes de borde del tope y uniones. Con la herramienta cuentagotas puedes coger rápidamente un color de tu diseño y utilizarlo para el Borde.

adobeXD borderadobeXD borderadobeXD border

C es para Components (Componentes)

Los componentes son elementos de diseño que se pueden reutilizar fácilmente en las mesas de trabajo dentro de los documentos de Adobe XD.

El elemento de diseño que guardes como componente se convierte en el Componente Principal y se indica con un diamante verde relleno en la esquina superior izquierda. Puedes añadir múltiples instancias de un componente y cuando editas el Componente Principal el resto de las instancias se modifican simultáneamente.

Todos tus Componentes se almacenan dentro del panel de Bibliotecas que puede abrirse o cerrarse fácilmente utilizando el icono de la esquina inferior izquierda, o pulsando el atajo de teclado Mayús + Comando + Y.

Junto con los colores y estilos de personajes, los componentes de Adobe XD son una parte esencial de cualquier sistema de diseño de Adobe XD.

AdobeXD componentsAdobeXD componentsAdobeXD components

D es para la Desktop Preview (Vista previa de escritorio)

Haz clic en el botón Reproducir en la esquina superior derecha para abrir la ventana de Vista Previa del Escritorio para previsualizar e interactuar con tu diseño.

Nota: solo puedes interactuar con tu diseño después de prototiparlo. Cuando llegues a la letra P aprenderás más sobre la creación de prototipos en Adobe XD.

AdobeXD Desktop PreviewAdobeXD Desktop PreviewAdobeXD Desktop Preview

E es para la Ellipse Tool (Herramienta Elipse)

Coge la Herramienta Elipse de tu barra de herramientas o utiliza la tecla de acceso directo E, y luego haz clic y arrastra para crear una nueva elipse en Adobe XD.

Para crear un círculo perfecto, mantén pulsada la tecla Mayúsculas mientras haces clic y arrastras.

AdobeXD EllipseAdobeXD EllipseAdobeXD Ellipse

F es para Fill (Relleno)

Un Relleno establece el color de un elemento de diseño en Adobe XD.

Al hacer clic en la rueda de color de Relleno del inspector de propiedades, se abrirá la ventana del selector de color. Utilizando el menú desplegable de la parte superior puedes seleccionar uno de los tres tipos de Relleno: Color sólido, Degradado lineal o Degradado radial. La dirección de un degradado de Adobe XD puede ajustarse directamente en la mesa de trabajo utilizando los dos puntos finales, mientras que los colores de un degradado de Adobe XD pueden ajustarse desde la ventana del selector de color.

Utilizando la herramienta cuentagotas puedes coger rápidamente un color de tu diseño y utilizarlo para el Relleno.

AdobeXD fillAdobeXD fillAdobeXD fill

G es para Grid

Cada vez que seleccionas una mesa de trabajo tienes la opción de activar la Cuadrícula en el inspector de propiedades. Las cuadrículas pueden usarse para definir la estructura principal de un diseño y para medir, alinear o crear fácilmente objetos de píxeles perfectos.

Mediante el menú desplegable, puedes seleccionar una Cuadrícula de diseño o una Cuadrícula cuadrada. Dependiendo del tipo de cuadrícula que selecciones obtendrás una lista de configuraciones que pueden ser utilizadas para ajustar la cuadrícula.

Haz clic en el botón Hacer predeterminado para establecer la configuración actual de la cuadrícula por omisión o haz clic en el botón Usar predeterminado para reemplazar la configuración actual de la cuadrícula con los valores por omisión.

Una cuadrícula bien montada puede ser el comienzo perfecto para una estructura de alambre de Adobe XD.

AdobeXD gridAdobeXD gridAdobeXD grid

H es para Horizontal Scrolling (Desplazamiento horizontal)

Con el Desplazamiento Horizontal puedes establecer áreas de tu diseño para que se desplacen independientemente del resto del contenido. Para crear este tipo de animación en Adobe XD, selecciona los elementos que quieres que formen parte de tu área de desplazamiento, ve al inspector de propiedades y encontrarás tres opciones de desplazamiento: Desplazamiento horizontal, Desplazamiento vertical o Desplazamiento horizontal y vertical.

Una vez seleccionada la opción de desplazamiento deseada, puedes ajustar el tamaño de esa área de desplazamiento directamente en la mesa de trabajo utilizando los tiradores azules.

AdobeXD scrollingAdobeXD scrollingAdobeXD scrolling

I es para Interactions (Interacciones)

Las interacciones son un componente esencial cuando se hace un prototipo de un diseño y se utilizan para definir disparadores y acciones para hacer que tu diseño sea interactivo. Puedes encontrar todas las configuraciones en el inspector de propiedades y ten en cuenta que solo puedes acceder a ellas cuando estás en modo Prototipo.

AdobeXD interactionsAdobeXD interactionsAdobeXD interactions

J es para Joins (Uniones)

Las uniones afectan a los puntos de esquina de un borde. Dependiendo del tipo de unión que selecciones en el inspector de propiedades, puedes hacer que las esquinas aparezcan afiladas (Unión en inglete), redondeadas (Unión redonda) o cuadradas (Unión en bisel).

AdobeXD border joinsAdobeXD border joinsAdobeXD border joins

K es para Command + K (Comando + K)

Usando este atajo de Adobe XD puedes guardar tu elemento seleccionado como un componente de Adobe XD.

Esta primera instancia será tu Componente Principal, lo que significa que el resto de las instancias ajustarán su apariencia dependiendo de este Componente Principal.

AdobeXD keyboard shortcutAdobeXD keyboard shortcutAdobeXD keyboard shortcut

L es para Layers (Capas)

Las capas son un componente fundamental porque cualquier objeto que crees en Adobe XD es una capa. Las capas se apilan unas sobre otras, y su visibilidad en la mesa de trabajo viene determinada por su ubicación en el panel Capas.

El panel de Capas puede abrirse o cerrarse utilizando el icono del panel de capas de la esquina inferior izquierda, o pulsando la tecla Comando + Y.

AdobeXD layersAdobeXD layersAdobeXD layers

La M es para Mask (Máscara)

La máscara te da la posibilidad de ocultar partes de tus elementos de diseño en Adobe XD.

Para enmascarar en Adobe XD, selecciona tu capa junto con la que deseas que actúe como máscara, haz clic con el botón derecho en tu selección y ve a Máscara con forma. También puedes utilizar el atajo de teclado Mayús + Comando + M. Esto enmascarará tu capa y creará un grupo de máscaras dentro del panel Capas.

Para editar un grupo enmascarado, haz doble clic en él y esto te permitirá ajustar la capa enmascarada o la máscara. Para desactivar una máscara en Adobe XD, haz clic con el botón derecho del ratón sobre ella y ve a Desagrupar máscara o pulsa Mayúsculas + Comando + G.

AdobeXD maskAdobeXD maskAdobeXD mask

N es para Command + N (Comando + N)

Usa este atajo de teclado de Adobe XD para abrir la pantalla de bienvenida de Adobe XD, donde puedes crear un nuevo documento, abrir uno de tus diseños recientes, aprender cosas nuevas sobre Adobe XD o explorar tus documentos compartidos.

AdobeXD keyboard shortcutAdobeXD keyboard shortcutAdobeXD keyboard shortcut

O es para Opacity (Opacidad)

La opacidad te da la posibilidad de ajustar la transparencia de cualquier capa en Adobe XD. El 100% es el valor por defecto que hace que tu capa sea totalmente visible, mientras que al 0% tu capa es completamente invisible.

AdobeXD opacityAdobeXD opacityAdobeXD opacity

P es para Prototype (Prototipo)

El Prototipo de Adobe XD te permite visualizar cómo los usuarios experimentarán tu aplicación o sitio web.

Para construir tu propio prototipo, primero tienes que cambiar al modo Prototipo. Haz clic en el botón Prototipo de la esquina superior izquierda y entonces podrás conectar las mesas de trabajo de tu proyecto, eligiendo el disparador, la acción o las animaciones de Adobe XD que funcionen con tu diseño.

Cuando tu prototipo esté terminado, podrás previsualizar tu animación en Adobe XD usando el botón de vista previa de escritorio.

AdobeXD prototypeAdobeXD prototypeAdobeXD prototype

Q es para  Command + Q (Comando + Q)

Utiliza este atajo clásico de Adobe XD siempre que quieras salir rápidamente de Adobe XD.

AdobeXD keyboard shortcutAdobeXD keyboard shortcutAdobeXD keyboard shortcut

R es para Repeat Grid (Repetir Cuadrícula)

Con Repetir Cuadrícula, puedes repetir fácilmente un elemento de tu diseño de Adobe XD. Esto puede ser un verdadero ahorro de tiempo cuando necesites crear una lista o una fila de elementos que tengan el mismo tamaño.

Para crear una cuadrícula repetida, selecciona el elemento que quieres repetir y haz clic en el botón Repetir cuadrícula del inspector de propiedades. Utilizando los tiradores verdes de la mesa de trabajo puedes ajustar fácilmente el tamaño de la cuadrícula y al pasar por encima del área entre los elementos puedes ajustar el espaciado horizontal o vertical.

AdobeXD repeat gridAdobeXD repeat gridAdobeXD repeat grid
AdobeXD repeat gridAdobeXD repeat gridAdobeXD repeat grid

S es para Stacks (Pilas)

Las pilas permiten que los elementos de un grupo tengan un espacio definido entre ellos. Para crear una pila, primero debes agrupar los elementos que quieres apilar.

Selecciona tu grupo y enfoca el inspector de Propiedades. Asegúrate de que la opción Redimensionado interactivo está activada y luego marca la casilla Apilar. Adobe XD comprobará tu diseño y decidirá qué tipo de apilado se ajusta a tus necesidades: Horizontal o Vertical.  Una vez creada, puedes cambiar el tipo de tu pila o puedes ajustar el espaciado o el relleno de los elementos dentro de tu pila.

Si cambias el tamaño de un elemento o lo reordenas dentro de una pila, el resto de los elementos se moverán para conservar los ajustes de espaciado predefinidos.

AdobeXD stacksAdobeXD stacksAdobeXD stacks

T es para Text (Texto)

Coge la Herramienta de texto o utiliza la tecla de acceso directo T siempre que quieras añadir texto en Adobe XD.

Una vez que hagas clic en tu mesa de trabajo, podrás escribir un nuevo texto. Puedes seleccionar tu fuente de Adobe XD y establecer el resto de ajustes en el inspector de propiedades.

AdobeXD textAdobeXD textAdobeXD text

U es para Command + Option + U (Comando + Opción + U)

Usa este atajo de Adobe XD para realizar la operación booleana Añadir que unirá los objetos seleccionados.

Además de Añadir tienes otras tres operaciones booleanas que se pueden utilizar para combinar las formas seleccionadas en Adobe XD:

  • Restar (Comando + Opción + S)
  • Intersección (Comando + Opción + I)
  • Excluir la superposición (Comando + Opción + X)
AdobeXD boolean commandAdobeXD boolean commandAdobeXD boolean command
AdobeXD boolean commandAdobeXD boolean commandAdobeXD boolean command

V es para la Herramienta Move (Mover)

La tecla de acceso directo V te permite acceder a la herramienta Mover, que se puede utilizar principalmente para seleccionar y mover objetos en la mesa de trabajo.

Usando esta misma herramienta, puedes hacer doble clic en un trozo de texto si deseas editarlo o puedes hacer doble clic en un grupo de formas si deseas seleccionar un objeto específico dentro de ese grupo.

AdobeXD move toolAdobeXD move toolAdobeXD move tool

W es para Command + W (Comando + W)

Utiliza este atajo de teclado clásico de Adobe XD siempre que quieras cerrar tu documento actual de Adobe XD.

AdobeXD keyboard shortcutAdobeXD keyboard shortcutAdobeXD keyboard shortcut

X es para Command + X (Comando + X)

Utiliza este atajo de teclado clásico de Adobe XD siempre que quieras Cortar un objeto de tu diseño.

AdobeXD keyboard shortcutAdobeXD keyboard shortcutAdobeXD keyboard shortcut

Y es para la Polygon Tool (Herramienta Polígono)

El atajo de teclado Y te ofrece la herramienta Polígono que puede ser usada para crear estrellas, triángulos, rombos, pentágonos, hexágonos, etc.

Mantén presionada la tecla Mayúsculas mientras haces clic y arrastras para crear una forma equilátera. Pulsa las teclas de flecha arriba y abajo mientras haces clic y arrastras para aumentar o disminuir el número de lados, o pulsa las teclas de flecha izquierda y derecha mientras haces clic y arrastras para convertir el polígono en una forma de estrella.

Una forma creada con la herramienta Polígono también puede editarse desde el inspector de propiedades.

AdobeXD polygonAdobeXD polygonAdobeXD polygon

Z es para la herramienta Zoom

La tecla de acceso directo Z te permite utilizar la herramienta Zoom para acercar o alejar la imagen.

Haz clic en cualquier lugar de la mesa de trabajo para acercarte, o haz clic y arrastra para definir el área que deseas ampliar.

Para alejar la imagen, mantén pulsada la tecla Opción y haz clic en cualquier parte de la mesa de trabajo.

AdobeXD zoomAdobeXD zoomAdobeXD zoom

¿Listo para probar más tutoriales de Adobe XD?

¡Genial! Así que ahora que hemos pasado desde la A a la Z de Adobe XD, por qué no pasar al siguiente nivel y probar uno de los tutoriales más profundos en Envato Tuts+. Puedes aprender cómo crear un wireframe en Adobe XD, y cómo usar todas las características presentadas para construir tu propio diseño.

¡Tanto si estás trabajando en un sistema de diseño de Adobe XD como si solo quieres aprender más, Envato Tuts+ te tiene cubierto!

  • Adobe XD
    Prueba un nuevo curso corto sobre Adobe XD Auto-Animate
    Andrew Blackman
  • Adobe XD
    Cómo crear un diseño de interfaz de usuario de aplicación de reproductor de música en Adobe XD
    Andrei Marius
  • Adobe XD
    Cómo crear un diseño de interfaz de usuario de reserva de hotel en Adobe XD
    Andrei Marius
  • Adobe XD
    Como crear una plantilla de sitio web de curriculum vitae en Adobe XD
    Andrei Marius
  • Adobe XD
    Cómo crear un diseño de interfaz de usuario de una aplicación de finanzas en Adobe XD
    Andrei Marius
  • Adobe XD
    Cómo utilizar las transformaciones 3D en Adobe XD
    Adi Purdila
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.