¿Tiene alguna pregunta o idea para compartir? Entre y participe en la Comunidad de Adobe XD. ¡Nos gustaría tener noticias suyas y ver sus creaciones!
Aprenda a importar y utilizar Lottie para diseñar animaciones exuberantes en Adobe XD.
Lottie es un formato de animación ligera que se puede exportar desde Adobe After Effects como archivo JSON. Los archivos Lottie son de menor tamaño en comparación con formatos como GIF y PNG animados. Los desarrolladores pueden reutilizar archivos Lottie en su código.
XD le permite importar archivos y controlar la reproducción de Lottie. Después de ajustar la reproducción de Lottie y conectar el prototipo, puede previsualizarlo antes de compartirlo.
Para importar su archivo Lottie a XD, arrástrelo a una mesa de trabajo. Otra opción es seleccionar Archivo > Importar.
Una vez importado, el primer fotograma de Lottie se muestra en el lienzo. Si el primer fotograma de Lottie está en blanco, verá un fotograma en blanco en el lienzo. En tales casos, use el panel Capas para localizar el Lottie.
Cuando seleccione el Lottie en el modo Diseño, verá un icono de reproducción en la esquina superior izquierda.
Después de importar el archivo de Lottie a XD, controle cuándo se reproducirá. Siga estos pasos para establecer una opción de reproducción:
Cuando configura una opción de reproducción para la Lottie en el modo Diseño, las interacciones asociadas se configuran automáticamente en el modo Prototipo.
Al seleccionar Reproducir automáticamente, el desencadenador Tiempo se configura automáticamente con una demora de 0 segundos.
Al seleccionar Reproducir al tocar, el desencadenador Tocar se configura automáticamente con la acción predeterminada Alternar reproducción/pausa.
Al seleccionar Sin reproducción, no se establece ninguna interacción en el modo de prototipo.
Para personalizar la reproducción de Lotties, en la sección Animaciones del Inspector de propiedades, seleccione Editar reproducción.
Si selecciona Editar reproducción, cambia automáticamente al modo Prototipo.
En el modo Prototipo, opte por cualquiera de estas personalizaciones:
Elija uno de estos desencadenadores: Tiempo (configurar Demora a más de 0 segundos), Teclas y mando de juego, o Voz.
Cambie la acción de reproducción de Lottie del desencadenador Tocar de Alternar reproducción/pausa a Reproducir o Pausar.
Una vez que establezca una opción de reproducción para su Lottie, piense en conectarlo con otras interacciones:
Para obtener más información sobre la creación de prototipos en XD, consulte Crear prototipos interactivos.
Ahora que ya sabe cómo configurar una opción de reproducción para su Lottie y conectarlo con otras interacciones, probemos algunos ejemplos.
Practique la creación de prototipos con animaciones de Lottie utilizando los archivos de muestra:
Aprenda a animar una pantalla de carga usando Lottie.
Cuando acabe con la conexión de las interacciones, obtenga una vista previa del prototipo y compruebe las interacciones.
Aprenda a animar los elementos del menú cuando se seleccionan.
Establézcalos en un desencadenador Tocar con Tipo de acción como Transición.
En el modo de diseño, cree una copia de la planta 1 colóquela en la mesa de trabajo. Establézcalo en Reproducir automáticamente.
En el modo de diseño, cree una copia de la planta 2 colóquela en la mesa de trabajo. Establézcalo en Reproducir automáticamente.
Cuando acabe con la conexión de las interacciones, obtenga una vista previa del prototipo y compruebe las interacciones.
Explore más ejemplos que incluyan vídeos, animaciones de Lottie y estados de componentes.
Después de conectar el prototipo, use cualquiera de las siguientes opciones para acceder a la vista previa:
Cuando el diseño esté listo para compartirse con las partes interesadas, elija los permisos de acceso correspondientes y publique el prototipo o el vínculo de las especificaciones de diseño y compártalo.
Mire este vídeo de 2 minutos para ver algunas sugerencias profesionales sobre cómo trabajar con Lottie en XD.
¿Tiene alguna pregunta o idea para compartir? Entre y participe en la Comunidad de Adobe XD. ¡Nos gustaría tener noticias suyas y ver sus creaciones!
Inicia sesión en tu cuenta