Aprenda a crear microinteracciones usando la animación automática.

Con la animación automática, puede crear fácilmente prototipos animados con los efectos de deslizamiento/arrastre u ondulación de YouTube que ayudan a visualizar el movimiento del contenido en las mesas de trabajo. Esto le ayudará a contar mejor la historia del prototipo, a la vez que agrega una capa enriquecida a la experiencia general del usuario.

Interacciones de ondulación en un sitio web
Efecto de ondulación en un sitio web
Efecto deslizar y arrastrar en un dispositivo táctil
Efecto deslizar y arrastrar en un dispositivo táctil

Crear un prototipo animado

  1. Antes de comenzar:

    • Los objetos que desee animar deben tener el mismo nombre de capa en todas las mesas de trabajo.
    • Solo puede animar propiedades específicas de los objetos, como el tamaño, la posición y la rotación; consulte las propiedades de objetos para obtener más información.
  2. Conecte las mesas de trabajo en el modo de prototipo. 

  3. Haga clic en el conector para ver el panel de interacción que aparece en Inspector de propiedades y configure las siguientes opciones:

    • Desencadenar : seleccione una opción para activar una animación. Por ejemplo, para simular una experiencia de tarjeta táctil, seleccione Tocar.
    • Acción: seleccione Animación automática.
    • Destino: seleccione la mesa de trabajo de destino para la transición de la animación.
    • Suavizado: seleccione una opción para simular efectos de suavizado. Por ejemplo, seleccione Suavizar salida si quiere que se suavice la salida de sus animaciones con respecto al prototipo.
    Flujo de trabajo de animación automática
    Flujo de trabajo de animación automática

    A. Seleccionar el tipo de desencadenador B. Seleccionar una acción para la animación automática C. Seleccionar la mesa de trabajo de destino D. Seleccionar los efectos de suavizado 
  4. Seleccione en la aplicación XD para previsualizar las animaciones en navegadores compatibles en escritorio, móvil o web.Para compartir su prototipo con los interesados desde la aplicación de XD de escritorio, haga clic en Compartir y seleccione Compartir para revisión.

Ejemplos y archivos de muestra

¿Quiere aprender las bases de la animación automática? Comience con este kit de interfaz de usuario que tiene las interacciones básicas, elementos de IU, ejemplos de arrastre, etc.

También puede usar más archivos de muestra para probar la animación automática.

¿Quiere lograr un efecto de deslizamiento de YouTube sin la molestia de las líneas de tiempo y los fotogramas clave?

Cablee las mesas de trabajo y seleccione estas opciones en la pantalla superior de desencadenadores:

  • Desencadenar: seleccione Arrastrar.
  • Acción: seleccione Animación automática.
  • Destino: seleccione la mesa de trabajo de destino para la transición de la animación.
  • Suavizado: seleccione una opción para crear efectos de suavizado. Por ejemplo, seleccione Facilitar entrada-salida si quiere que se suavice la entrada-salida de sus animaciones con respecto al prototipo.

Descargue los archivos de muestra y pruébelos o vea este vídeo para obtener más información.

Tiempo de visualización: 1 minuto.


¿Quiere aprender cómo crear un menú móvil animado con efecto de suavizado en la entrada? 

  1. Descargue los archivos de muestra.
  2. En el modo de prototipo, conecte el menú Hamburguesa a la mesa de trabajo home_expanded y seleccione las siguientes opciones en la pantalla elevada Desencadenar:
  • Desencadenar: seleccione Tocar.
  • Acción: seleccione Animación automática.
  • Destino: seleccione la mesa de trabajo de destino para la transición de la animación.
  • Suavizado : seleccione el efecto Facilitar entrada.
  • Duración : establezca la duración en 0,8 segundos.

¿Quiere añadir animaciones avanzadas a los diseños? Mire este vídeo para trabajar con After Effects. 

Exportar desde Adobe XD a After-Effects (Tiempo de visualización: 1 minuto)


También puede consultar la comunidad de XD para obtener más tutoriales y archivos de muestra.

Prácticas recomendadas

¿Sabía que puede jugar con las diversas opciones de suavizado para cambiar la experiencia del usuario con sus prototipos animados? Siga leyendo para consultar las prácticas recomendadas y ver algunos ingeniosos trucos sobre el uso de la animación automática.

Tiempo de visualización: 1 minuto.


Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea