Use Adobe XD para crear micro interacciones

Feb 9, 2026

Cómo

[dieciséis] (Crédito de la imagen: Adobe)

Adobe XD puede ayudar con la creación de prototipos: uno de los procesos más importantes en el ciclo de vida del diseño, que desempeña un papel vital en el desarrollo al ayudar a los diseñadores y los equipos de desarrollo con el mantenimiento del flujo de trabajo. Hubo algunos cambios importantes en el panorama de prototipos recientemente: los diseñadores se echan a perder.

Al igual que muchas otras disciplinas, no hay una herramienta de diseño y prototipos individuales que puedan lograr todo. Diferentes etapas requieren un conjunto único de herramientas. Se acabaron los días en que los diseñadores solían confiar únicamente en Photoshop y boceto. Aunque son excelentes herramientas de diseño de la UI, no tienen las capacidades para flujos rápidos de usuarios y estructuras de alambre (consulte nuestra parte superior Herramientas de Wireframe Para más opciones de alámbrico).

Ahora, con la creciente cantidad de interacciones en los diseños, como animaciones, gestos y control de voz, es difícil encontrar una herramienta que pueda lograr todas estas capacidades de prototipos y aún así mantener las cosas simples. La codificación es una forma de crear estas interacciones, pero requiere mucho tiempo. Afortunadamente, Adobe XD ha llegado al rescate al liberar una actualización de su herramienta de prototipos que incluye una función útil llamada 'AUTO ANIMATE'. Es, con mucho, la mayor adición al poderoso conjunto de herramientas.

Obtener Adobe Creative Cloud

La idea aquí es simple: Auto Animate permite a los diseñadores construir prototipos interactivos con animaciones inmersivas simplemente duplicar un tablero de arte o modificar las propiedades de un objeto. Estas propiedades podrían ser cualquier cosa, como las dimensiones, la posición de X e Y, opacidad, rotación. Anteriormente, Adobe XD ofrecía interacciones básicas, como deslizante, empujar y disolverse.

Con la adición de las nuevas características, los diseñadores pueden crear fácilmente animaciones de movimiento, lo que a su vez le ayudará al usuario a crear modelos mentales de flujo de información cuando se estén navegando entre varias pantallas. Esto también se puede utilizar para crear jerarquías visuales, CTA o mensajes que se desvanecen o salgan de la pantalla temporalmente.

En este artículo, explicaré cómo crear simples micro animaciones utilizando esta nueva función de animación automática de Adobe XD. Antes de comenzar, hay algunas cosas que deben considerar cómo se deben manejar los objetos para la animación automática:

Cuando un objeto o elemento no está en el tablero de destino, generalmente se desvanece cuando se prevé una vista previa
Cuando un elemento no está presente en el tablero inicial, tiende a desvanecerse en
Siempre conecte las tablas de arte cuando esté en modo prototipo, lo que creará las interacciones.
Para crear animaciones, siempre asegúrese de que los objetos y los elementos tengan nombres que coinciden en las capas y también el nombre del grupo que puedan estar en

Hacer un cambio de estado utilizando AUTO ANIMATE

Comencemos al hacer un simple ejemplo de cambio de estado utilizando AUTO ANIMATE. En este ejemplo, las propiedades que cambiarían son anchuras, altura y color. Para cualquier transición de animación automática, necesita más de dos tablas de artesanía.

En el tablero inicial, dibuje una forma, en nuestro ejemplo, es un rectángulo verde de 500px x 200px. Duplique este tablero de arte y seleccione el rectángulo en la segunda mesa de instrumentos. Necesitamos modificar las propiedades del rectángulo al aumentar el ancho a 1000 y la altura a 500. También puede realizar modificaciones adicionales, como cambiar la opacidad hasta el 50% o hacer el color rosa.

Ahora haga clic en la pestaña Prototype en la esquina superior izquierda. Seleccione el primer tablero y víncelo usando la flecha en la segunda mesa de instrumentos. Cuando hace esto, hay una pestaña de interacción a la derecha de la aplicación que se puede usar para establecer parámetros como el gatillo, la acción, el destino y la alivia. Cada parámetro se puede personalizar de acuerdo a sus necesidades. Hay cinco tipos de disparadores, incluyendo TAP, DRART y TIMIDO, que iniciarán la animación.

Establezca la pestaña de acción de forma predeterminada para animar automáticamente y, debido a que solo hay dos tablones de artabería en nuestro ejemplo, configure la pestaña de destino en el tablero 2. También hay múltiples transiciones suaves que pueden elegirse y cronometrarse. Haga clic en el icono de reproducción en la parte superior derecha para ver animar automáticamente hacer su magia y animar el rectángulo. Cuando hay más de dos elementos que deben cambiarse simultáneamente, asegúrese de que los nombres de estos elementos sean los mismos tanto en los tablas de arte. Esto informará la solicitud de que estos dos elementos deben ser animados.

Expandir tarjetas

Ahora avancemos a un ejemplo con más interactividad y uno que incluye múltiples elementos. Comencemos creando el primer tablero de arte para esto, que consiste en una tarjeta. La tarjeta tendrá elementos como un encabezado, descripción y un enlace en el historial de vista de lectura inferior. Junto al enlace, habrá un icono de flecha hacia abajo. Cuando el usuario hace clic en el enlace, la tarjeta se abrirá como un cajón para mostrar entradas anteriores. Dado que esto sucede en la función Click / TOP, las entradas anteriores no deben crearse en el primer tablero de arte.

A continuación, duplamos este tablero de arte y cambiamos algunas propiedades de la tarjeta. Lo primero que debe hacer es aumentar la altura de la tarjeta rectangular para que se vea como un estado ampliado. El encabezado y la descripción a continuación se deben sin cambios. Ahora es el momento de agregar esas entradas que mencionamos antes.

Imagina que hay tres entradas para la tarjeta. Cada entrada tiene un nombre de entrada, fecha de entrada y un botón como se muestra en la imagen principal. Puede crear una entrada y duplicarlo dos veces para crear un grupo de entradas. Organízalos como se muestra en la imagen principal y coloque el enlace de texto de HISTORIO VER A continuación, estas entradas. Debido a que está en un estado ampliado, gire el icono de la flecha para que se enfrente hacia arriba. Eso es. Has completado la configuración de las tablas de arte.

Para crear la animación, vaya al primer tablero de arte y haga clic en la pestaña Prototype desde la esquina superior izquierda. Ahora haga clic en el enlace Ver HISTORIAL en el primer ejemplo y arrastre el enlace del prototipo a la segunda mesa de instrumentos. Esto hace que el historial de visión vincule el gatillo. Cambie las propiedades en la pestaña de interacción a la derecha configurando el gatillo para tocar y la acción para animar automáticamente. Pruébalo para ver la animación del cajón suave. Haz cambios en la opción de flexibilización en la pestaña de interacción si encuentra que la animación no es lo suficientemente suave.

Hacer animaciones de arrastre

Arrastre es una de las animaciones más comunes cuando se trata de interacciones móviles. Probemos un ejemplo simple con dos tablas de arte. Para la primera mesa de arte, comience por crear un círculo de cualquier color y dimensiones. Ahora cree un rectángulo con un ancho de 250px y una altura de 25px. Duplica este rectángulo ocho veces, manteniendo un espacio de 20px entre cada duplicado, para que cree una pila. Coloque el círculo encima del primer rectángulo antes de duplicar esta mesa de arte.

No queda mucho por hacer por la segunda mesa de arte. Simplemente reduce la brecha entre cada uno de los rectángulos duplicados, por lo que se siente como si estuviera comprimido. Similar a la primera mesa de arte, coloque el círculo encima del primer rectángulo. El paso final es prototiparlo haciendo clic en la pestaña Prototype desde la esquina superior izquierda. Ahora haga clic en el círculo desde el primer tablero y conviértalo en un gatillo. Al igual que los ejemplos anteriores, cambie las propiedades en la pestaña de interacción a la derecha configurando el gatillo para arrastrar y la acción para animar automáticamente. Cuando hace clic en el botón Reproducir para obtener una vista previa de la animación, podrá ver una acción suave como si el bloqueo se comprime por la esfera.

Crear animaciones infinitas cargadoras

Una de las mejores características de Adobe XD es que se puede aplicar automáticamente animación entre múltiples tablas de arte. Para hacer tal animación, solo necesita hacer cambios simples en una de las propiedades.

Vamos a crear una animación de carga en la que se llena una batería. La clave para obtener esto es perfecta es crear correctamente el primer tablero de arte. El primer tablero de arte tiene un marcador de posición de batería como se muestra en la imagen. Se puede crear utilizando formas rectangulares. Para la batería real dentro del marcador de posición, la primera tabla de arte debe estar vacía (lo que representa 0%). Duplique este tablero de arte y cree un rectángulo verde con una altura de 50px que se ajuste perfectamente dentro del marcador de posición. Cree duplicados similares para que la altura de la batería en la tabla del tercer arte se incremente en 50px y así sucesivamente. Continuar hasta que el tablero esté completamente lleno.

Ahora tenemos que crear un bucle infinito entre estos tablones de arte para que cree una animación de carga síncrona. Para esto, vaya al modo prototipo, haga clic en el primer tablero de arte y arrastre la flecha del prototipo a la segunda mesa de instrumentos. Cambie las propiedades en el panel de interacción, configurando el gatillo a la hora y luego configure el retardo a 0 segundos, lo que animará a la segunda tabla de arte cuando lo previsualizaron. Realice los mismos cambios en todos los tablones de arte, al enlazar el segundo al tercero y así sucesivamente antes de que finalmente vincule el último tablero de arte hasta el primero. Hemos vinculado con éxito a todos los tableros de artesanía para formar un bucle infinito. Cambie los ajustes de flexibilización y duración según su requisito para que la carga sea más suave.

Aunque hay toneladas de variaciones que se pueden intentar usar Adobe XD, las capacidades actuales de la herramienta son limitadas y aún están siendo actualizadas por el equipo de desarrollo. Por lo tanto, en comparación con las herramientas como principio, es posible que se sienta como si XD tenga un conjunto de herramientas restringido. Sin embargo, Adobe ha hecho un excelente trabajo de hacer que la herramienta sea simple para aprender y usar. La creación de interacciones complejas puede tomar algún tiempo y esfuerzo, pero son totalmente alcanzables utilizando la función Auto Animate de XD. La clave es entender lo básico de los objetos en movimiento, cambiar el tamaño de ellos, agregando capas y usando desencadenantes.

Este artículo apareció originalmente el número 326 de neto , la revista líder en el mundo para diseñadores web y desarrolladores. Comprar Número 326 o Suscríbete aquí .

Leer más:

40 tutoriales brillantes de WordPress
11 Frameworks de JavaScript increíbles
¿El neumorfismo es realmente la tendencia más caliente de 2020?

Use Adobe XD para crear micro interacciones

Hacer un cambio de estado utilizando AUTO ANIMATE

Expandir tarjetas

Hacer animaciones de arrastre

Crear animaciones infinitas cargadoras

Cómo - Artículos más populares

Cómo hacer una aplicación de Apple Watch

Cómo usar reaccionar resorte para animar componentes

Cómo dibujar un elefante

Añadir colores digitales a los dibujos de lápiz

Crea una imagen multi-exposición con Adobe CC

Crea efectos de ondulación con Pixijs

Convierte tus diseños 2D en 3D con Project Felix

Cómo crear manga con un Wild West Twist

Categorías