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

Con la animación automática puede crear transiciones inmersivas para visualizar el movimiento de contenido a través de las mesas de trabajo.

En combinación con las posibilidades de los desencadenadores de Arrastrar y Tiempo, le ayudará a crear una amplia gama de efectos, como un deslizamiento y arrastre de YouTube, para contar una historia prototipo mejor.

Interacciones de ondulación en un sitio web
Efecto de ondulación en un sitio web
Efecto de deslizamiento y arrastre en un dispositivo táctil
Efecto de deslizamiento y arrastre en un dispositivo táctil

Para crear un prototipo animado, siga estos pasos:

  1. Antes de comenzar, use estas sencillas reglas para conocer cómo se manejan los objetos durante la animación:

    • Si un objeto no está presente en la mesa de trabajo de destino, aparece progresivamente.
    • Si un objeto no está presente en la mesa de trabajo de origen, desaparece progresivamente.
    • Si un objeto tiene una coincidencia tanto en términos de su nombre de capa como de su grupo, los atributos se animan. Para obtener una lista completa de las propiedades y transiciones compatibles, lea Propiedades de objetos.
  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:

    • Desencadenador: 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. Para definir más interacción para un objeto, seleccione el objeto con una interacción ya definida y haga clic en el botón + en la mesa de trabajo; como alternativa, también puede hacer clic en + en el Inspector de propiedad.

     Recuerde que puede aplicar los desencadenadores de Pulsar, Arrastrar, Pasar el ratónHora una vez y VozTeclas y mando de juego muchas veces. 

  5. Selecciona   Previsualizar las animaciones en navegadores compatibles

     Recuerde que XD no admite el desplazamiento mientras se realiza una vista previa de las mesas de trabajo animadas automáticamente.

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 cosas, como 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?

Conecte las mesas de trabajo y seleccione estas opciones en el Inspector de propiedades del prototipo:

  • Desencadenador: 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 Suavizar 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 el Inspector de propiedades del prototipo:
  • Desencadenador: 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 Suavizar 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 conocer las mejores prácticas y ver a Talin Wadsworth, diseñador principal de Adobe XD, compartir ingeniosos trucos de 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