Una de las prestaciones que se han añadido últimamente a Adobe XD, la aplicación para creación de interfaces y prototipos interactivos, es la función Auto-animate que permite crear animaciones de un modo muy sencillo obviando una línea de tiempo.

Este tipo de animación puede crear efectos dinámicos de interacción que permite al diseñador de UX conseguir increíbles efectos y transiciones que serían mucho más laboriosos de confeccionar de otro modo, como programación CSS por ejemplo.

El método de confeccionar este tipo de animaciones es tan simple como efectivo: Se colocan unos elementos en un artboard o mesa se trabajo de origen y se vinculan con un artboard o mesa de trabajo de destino. Los elementos que tengan el mismo nombre en ambas mesas adaptarán su forma, tamaño, posición, color y atributos desde el artboard de origen hasta el artboard de destino siguiendo una interpolación que puede ajustarse con diferentes curvas y suavizados de aceleración. Si el objeto de origen no existe en el artboard de destino, éste simplemente se funde a transparencia. Asimismo un objeto que exista en destino pero no tenga un equivalente en origen aparecerá con un fundido desde transparente al opacidad. Este método produce transiciones y animaciones suavizadas de forma muy rápida. El porque no se ha introducido una línea de tiempo que permitiría realizar efectos de animación aún más elaborados está muy bien explicado en el siguiente artículo de Oliver Lindberg https://theblog.adobe.com/auto-animate-how-to-create-automatic-animations-xd/ y que básicamente viene a decir que lo que se buscaba era el perfecto equilibrio entre sencillez de uso de la interfaz y obtención rápida de buenos resultados. En ese sentido hay que reconocer que el objetivo se ha conseguido. Siempre tienes herramientas más especializadas como Animate o After Effects si lo que quieres es conseguir animaciones más complejas.

Aún así no penséis que la función de auto-animación de XD se limita a transiciones básicas entre interacciones, se pueden llegar a conseguir resultados realmente interesantes y que podrían funcionar como animaciones autónomas tal y como se puede apreciar en este pequeño tutorial