Adobe XD: Cómo usar la función Auto-Animate

Jul 25, 2023

Cómo

(Crédito de imagen: Adobe)

A pesar de su entrada tardía en el juego de creación de prototipos, Adobe XD es una de las mejores y más rápidas herramientas de cableado y prototipado disponibles. El prototipado es un proceso clave en el ciclo de vida del diseño, pero también desempeña un papel vital en el desarrollo al ayudar a los diseñadores y equipos de desarrollo con el mantenimiento del flujo de trabajo.

Como diseñadores, a menudo necesitamos muchas herramientas para diseñar las distintas etapas del flujo de trabajo de experiencia del usuario. Adobe está innovando activamente una herramienta multiplataforma que se puede utilizar para probar diseños, crear estructuras alámbricas, entregar especificaciones al equipo de desarrollo y también el diseño colaborativo (consulte nuestra lista de herramientas de estructura alámbrica para más opciones).

La función Auto-Animate significa que Adobe XD también se puede utilizar para crear micro-interacciones y animaciones perfectas como herramientas como Principle. Esto ayuda a los diseñadores a crear ricas experiencias de prototipos, desde flujos de incorporación, animaciones para carruseles móviles, indicadores de progreso y más. La mejor parte de esta característica es que es fácil de aprender y ejecutar.

En este artículo, explicaré cómo crear micro animaciones simples mediante la función Auto-Animate. Analizaremos las interacciones basadas en gestos y en el grifo.

Si aún no tiene Adobe XD, vea cómo descargar Adobe XD publicar, y luego echa un vistazo a nuestro favorito Plugins de Adobe XD .

01. Desliza gestos para añadir a fav o eliminar

Las interacciones de deslizamiento son una de las micro-interacciones más utilizadas en las aplicaciones móviles. Para este ejemplo, echemos un vistazo a una lista de reproducción de música. Para la primera mesa de trabajo, vamos a crear una pantalla de lista de reproducción con cinco canciones en ella. Cada canción es una carta individual y esencialmente cuando cada carta se desliza a la izquierda, debe eliminar la canción de la lista de reproducción. Cuando una tarjeta se desliza hacia la derecha, debe agregar la canción a la cola.

Comencemos y creamos la primera carta. Puede agregar detalles básicos como el nombre de la canción, el nombre del artista, la longitud de la canción y la clasificación. Ahora agrupa todos estos elementos en una sola capa. Duplícalo hasta que se realicen cinco de las cartas similares. Puedes editarlos en función de tu gusto.

Para la primera carta – C1 – vamos a añadir un golpe izquierdo para eliminar la acción. Por lo tanto, vamos a crear un pequeño cuadrado con un fondo rojo, añadir un poco de texto eliminar y un icono como se muestra en la captura de pantalla a continuación. Agrupa todos estos elementos en una capa llamada A1. Ahora combine C1 y A1 en una capa L , de modo que A1 esté en el lado derecho de C1.

02. Cree la segunda tarjeta

Para la segunda carta – C2 – vamos a agregar un añadir a la acción de la cola del golpe derecho de una manera similar. Cree un grupo A2 con icono, texto y fondo verde. Agréguelo a la izquierda del grupo C2 y cree una capa combinada denominada L2. Ahora, la primera mesa de trabajo (S1) está completa. Dupliquemos toda la mesa de trabajo dos veces, en dos estados: S2 y S3. Usaremos S2 para eliminar el golpe y S3 para agregar al golpe de cola. Para ello necesitamos hacer algunos cambios para cada una de estas mesas de trabajo. Aquí están los ajustes para ambos golpes:

● S1 – Cambie la Opacidad de A1 y A2 a 0% y organice L1, L2 para que estén alineados en el centro.

● S2 – Organice la tarjeta L1 para que el borde derecho de L1 esté alineado con las otras cartas. Cambie la Opacidad de A2 a 0%.

● S3 – Organice la tarjeta L2 para que el borde izquierdo de L2 esté alineado con las otras cartas. Cambie la Opacidad de A1 a 0%.

03. Anima las mesas de trabajo

Ahora que las mesas de trabajo están completamente configuradas, el siguiente paso es animarlas. Puede hacerlo entrando en el modo Prototipo en la parte superior izquierda de la herramienta. Ahora en la mesa de trabajo S1, haga clic en la capa L1 y agregue una interacción en el lado derecho de la herramienta estableciendo Trigger to Drag, Action to Auto-Animate y Destination to Artboard S2. También puede agregar información sobre la base de sus preferencias. Pruebe esta interacción haciendo clic en el botón de reproducción en la parte superior derecha de la herramienta. En la mesa de trabajo S1, haga clic en la capa L2 y agregue una interacción similar utilizando la misma configuración pero, en este caso, establezca destino en S3. Esta interacción creará el golpe izquierdo.

04. Expanda sus tarjetas

La segunda interacción que veremos se ve comúnmente en la mayoría de las aplicaciones y sitios web donde está pasando por una lista o un catálogo de productos y cuando hace clic en uno de ellos, se le lleva a una nueva página con más detalles sobre el producto. Auto-Animate hace que sea muy fácil animar este tipo de interacción. En este ejemplo, comencemos creando una página de catálogo de productos. Puede elegir cualquier producto como, por ejemplo, un teléfono móvil (que va a ser nuestro ejemplo), ropa, etc. Para la primera mesa de trabajo (S1), cree una barra de encabezado con un menú de hamburguesa y un icono de perfil.

05. Trabajar en imágenes y detalles

Ahora, cree un elemento de texto de encabezado con el número de elementos de catálogo. Para cada una de las tarjetas de producto, vamos a tener una imagen, el nombre del teléfono, el precio y las calificaciones. Podemos llamar a estas tarjetas C1 a C6. La mejor manera de hacer esto es crear la primera tarjeta (C1) y luego utilizar una característica increíble de XD llamada Repetir cuadrícula, que se encuentra en la esquina superior derecha del panel herramienta. Esto le permite duplicar elementos con facilidad, manteniendo intacta la alineación y el espaciado. La configuración de esta mesa de trabajo está completa. Vamos a animar la segunda carta, por lo que es importante desagrupar los elementos de esa tarjeta para que XD pueda realizar Auto-Animate.

06. Diseñar la segunda mesa de trabajo

Ahora para ponerse a trabajar en la segunda mesa de trabajo. Duplique la primera mesa de trabajo y elimine las tarjetas C1, C3-C6. Vamos a usar la tarjeta existente C2 para crear esta página, por lo que los nombres de las capas son los mismos. En primer lugar, expanda el fondo de la tarjeta para que cubra toda la página debajo de la barra de encabezado. Ahora podemos organizar los otros artículos de cualquier manera que queramos- la idea básica es que debe ser diferente de cómo estaba la tarjeta en la mesa de trabajo S1, porque es cuando se puede ver la transición. Por esa razón, vamos a aumentar el nombre del móvil a 25px y hacerlo audaz. Del mismo modo, aumente el tamaño del precio y colóquelo debajo del nombre del móvil. A continuación se encuentra la parte importante : la imagen del teléfono móvil. Hay que aumentar su tamaño significativamente y también alinearlo en el centro.

07. Aplique los toques finales

Para ordenar todo y finalizar el diseño, organice las calificaciones y las estrellas debajo de todo y a la izquierda. Dado que esta mesa de trabajo representa la versión detallada del producto, ahora puede incluir información adicional sobre el teléfono como la memoria, los colores disponibles del teléfono, accesorios dados con el teléfono y así sucesivamente, en función de sus preferencias. Todo lo demás seguirá mientras desplazas por la mesa de trabajo. También puede cambiar el icono de encabezado de la hamburguesa, para permitir que el usuario vuelva a la mesa de trabajo anterior S1. Recuerde cambiar el nombre del icono para que coincida con el nombre del icono en la primera mesa de trabajo.

08. Crear la micro-interacción

Vayamos al modo prototipo ahora para crear la micro-interacción. Para ello, seleccione la tarjeta C2 en la mesa de trabajo S1 y arrastre la flecha azul a la mesa de trabajo S2. En el panel Interacción del lado derecho, establezca Trigger as Tap, Action as Auto-Animate y Destination as S2. Para interacciones más fluidas, es bueno ir con Ease Out for Easing y un tiempo de 0.4 o 0.6 segundos. Haga clic en el icono de flecha atrás en la mesa de trabajo S2 y arrastre la flecha a S1. Puede usar la misma configuración para esto para que sea coherente. Ahora haga clic en S1 y reproduzca el prototipo para ver la magia. Observará una animación suave cuando se toque la tarjeta C2. Ajuste la configuración de aceleración para que la animación sea más suave.

09. Ir más allá de lo básico

Ahora tiene una idea básica de cómo crear interacciones simples. También puede intentar animar automáticamente cambiando los colores de los elementos, tamaños y formas para ver transiciones suaves entre varias mesas de trabajo. Además de tocar y arrastrar disparadores, hay otros desencadenadores con los que los diseñadores pueden experimentar, como el uso de teclas de teclado y teclas de gamepad para activar prototipos en un toque de tecla en particular. También hay un modo en el que puedes crear y diseñar prototipos de voz para Alexa, Siri, etc., donde puedes asignar oraciones y hablarlas para obtener respuestas específicas.

Leer más:

el los mejores constructores de sitios web
Los accesos directos de Adobe XD que debe conocer (pero probablemente no lo haga)
Construir prototipos con Adobe XD

Adobe XD: Cómo usar la función Auto-Animate

01. Desliza gestos para añadir a fav o eliminar

02. Cree la segunda tarjeta

03. Anima las mesas de trabajo

04. Expanda sus tarjetas

05. Trabajar en imágenes y detalles

06. Diseñar la segunda mesa de trabajo

07. Aplique los toques finales

08. Crear la micro-interacción

09. Ir más allá de lo básico

Cómo - Artículos más populares

Ilustración de mapa: una guía paso a paso

Cómo resolver una cara para la animación

Cómo pintar un paisaje urbano con bloques de color

Comienza con el lienzo HTML

Cómo agregar fondos CSS divertidos a sus sitios

Dibuja un retrato de lápiz de un perro

Afila tus habilidades de dibujo

Modelo Darth Vader en Zbrush

Categorías