21

10 trucos y atajos para trabajar mejor con Adobe XD

3695Puntos

hace un mes

Curso de Adobe XD
Curso de Adobe XD

Curso de Adobe XD

Al finalizar el curso adquirirás las bases teóricas, pero sobre todo prácticas de cómo utilizar esta herramienta para realizar diseños de prototipos con Adobe XD, entendiendo cómo sacar provecho. Todo ello, mientras lo aplicas a un proyecto de creación de tu propio diseño.

Para esta nueva aventura de aprendizaje con Adobe XD, los siguientes 10  tips impulsarán tu viaje cargado de energía y motivación, tal y como lo viví yo en mis inicios con el programa.

¡Anímate a probarlos y compartir tu experiencia sin dejar de aprender!

1. Nombra cada uno de los artboards que utilices en tu proyecto digital

Aunque parezca evidente, es muy fácil olvidarse de nombrar los artboards a medida que el número de pantallas crece.

Usa nombres claros y relacionados con el contenido de la pantalla. Esto te será altamente útil cuando vayas a crear interacciones entre ellas. Una gran ayuda para comprender y agilizar el flujo de navegación, además de organizar de forma eficaz y accesible el contenido visual de tu diseño.

2. Adapta fácilmente tu artboard tras haberlo creado

¿Necesitas modificar las dimensiones de tu artboard durante el proceso creativo? Adobe XD te lo permite sin necesidad de duplicar ni crear un documento nuevo. Puedes cambiar su tamaño desde la herramienta -mesa de trabajo-, ubicada en la barra de herramientas que encontrarás a la izquierda de tu pantalla ¿Una forma más directa? Con el atajo de teclado, letra A.

Aparecerá una lista en el panel de propiedades con las medidas más habituales de móviles, tabletas, ordenadores de sobremesa y resto de dispositivos.

¡Elige la que más se ajuste a tus necesidades y sigue creando sin necesidad de buscar o memorizar las medidas de los tamaños, ni generar múltiples archivos!

3. Familiarízate con los atajos del teclado

Para agilizar tu trabajo, es vital conocer los atajos de teclado. Muchos de ellos aparecerán cuando deslices el ratón por encima de cada funcionalidad. Por ejemplo, en la barra de herramientas puedes comprobar que P significa Polígono, A es Artboard o Z es el Zoom.

Si gradualmente los memorizas e integras en tu actividad, trabajarás de forma mucho más rápida y efectiva.

4. Muévete con seguridad sin perder detalle

Como gran profesional del diseño que eres, no vas a obviar ningún detalle de tu proyecto digital. Con Adobe XD puedes moverte por todo el documento de múltiples formas para que esto no ocurra.

Usa el acceso directo de la tecla Z, para activar la herramienta de zoom acercando o alejando la imagen tanto como necesites. También puedes hacer clic en cualquier punto del artboard para acercarte, o hacer clic y arrastrar para definir el área que deseas ampliar. Recuerda que al pulsar la barra espaciadora, se activa la herramienta -manita-, con la que podrás desplazarte libremente por el documento.

¡Ya no hay excusas para que se escape ningún detalle de tu diseño!

5. Haz importaciones de contenido sin necesidad de trabajar de nuevo

Si antes de conocer Adobe XD has creado prototipos con otras herramientas vectoriales, ¡ahora puedes trabajar con ellos en Adobe XD!

  • Si tus diseños provienen de Illustrator, basta con seleccionar la forma vectorial en Illustrator, copiarla y finalmente pegarla en Adobe XD.
  • Si creaste tu contenido en Sketch, selecciona una o más capas o grupos. Después, haz clic en “Hacer exportable”. Elige el formato SVG para finalmente arrastrar y soltar la capa de Sketch en Adobe XD.

Con este truco, lograrás contenido vectorial editable en Adobe XD. Fácil y de gran utilidad, ¿verdad?
adobe.jpg

6. Un grid o cuadrícula bien armada: es el comienzo perfecto para estructurar y evolucionar tu proyecto

Es probable que, en función de la casuística, necesites crear versiones del diseño original de cada pantalla de tu proyecto digital. Si cuentas con un buen grid o cuadrícula, ¿qué mejor que aplicarla con pequeños matices? Adobe XD te permite hacerlo con la opción de Repetir Cuadrícula.

Para crearla, 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.

7. Crea infinidad de recursos visuales de forma rápida y ordenada

Los componentes son los elementos clave de diseño visual en tu proyecto digital, especialmente porque son reutilizables en todos los artboard que vayas a utilizar.

El elemento de diseño original que guardes será un componente maestro o principal, fácilmente reconocible por un rombo verde relleno en la esquina superior izquierda.

Puedes generar múltiples instancias de cada componente, logrando variantes que te encajen en el diseño de cada pantalla. Al editar el componente principal, el resto de las instancias se modificarán simultáneamente. Además, los componentes son muy accesibles, ya que se almacenan automáticamente en el panel de Bibliotecas. Su atajo de teclado es Mayús + Comando + Y.

Como ves, se trata de una forma fácil y rápida de enriquecer tus diseños con muy poco esfuerzo.

8. Formas perfectas con un clic

¿Cuántas veces has invertido más tiempo del habitual para lograr la figura perfecta? Con Adobe XD es muy sencillo. Si cuando creas una figura, pulsas la tecla de mayúsculas, se convertirá en armónica y proporcionada. Además, si la usas con la herramienta -línea-, esta será totalmente recta.

¡Prueba a usarla con polígonos y elipses y verás su efectividad!

9. Diseños ordenados son sinónimo de efectividad

Las capas son un elemento imprescindible porque cualquier objeto que crees en Adobe XD es una capa. Estas se apilan unas sobre otras y su visibilidad en el artboard viene marcada por su ubicación en el panel Capas.

Un buen consejo es agruparlas en función del contenido y jugar con su visibilidad para trabajar mejor. Recuerda nombrar cada capa y agrupación para alcanzar un mejor contexto y orden de tus diseños. Puedes visualizar el panel de Capas desde el icono ubicado en la esquina inferior izquierda o pulsando la tecla Comando + Y.

10. Animaciones orgánicas y efectivas con Adobe XD

Cuando animes tu proyecto, piensa en movimientos naturales que como usuario te gustaría encontrar: desplazamientos de izquierda a derecha, de arriba a abajo, etc. Adobe XD te lo pone muy fácil. Basta con arrastrar los cables para conectarlos y deja que la opción de Auto-Animate se encargue de las transiciones. Empareja los artboards con los estados de los componentes para tener una visión más completa. ¡Juega con todas las opciones antes de implantarlas!

Por último, dentro del viaje formativo los trucos más valiosos son las experiencias propias que descubrirás durante el aprendizaje. Disfruta del proceso y de todo lo que te ofrece Adobe XD.

El próximo paso está en ti y tu curiosidad.

¡Adelante! Y no olvides la invitación, ¡mañana 14 de septiembre, inscríbete aquí, un workshop conmigo!

Curso de Adobe XD
Curso de Adobe XD

Curso de Adobe XD

Al finalizar el curso adquirirás las bases teóricas, pero sobre todo prácticas de cómo utilizar esta herramienta para realizar diseños de prototipos con Adobe XD, entendiendo cómo sacar provecho. Todo ello, mientras lo aplicas a un proyecto de creación de tu propio diseño.
Daniel
Daniel
torresburriel

3695Puntos

hace un mes

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
3
7332Puntos

¡Hola!
¿Estará disponible para verse después? A esa hr se me dificulta mucho porque trabajo…

¡Gracias!

1
6324Puntos
un mes

Hola, Jorge. Si te inscribes luego sí que está disponible el taller. Finalmente se realizará mañana día 21 de septiembre.

3

😎😎😎 Muy buen aporte, Adobe XD es una herramienta indispensable en el prototipado.