- Los archivos de Lottie simplifican el diseño y hacen que las animaciones sean más ligeras y rápidas.
- El programa reduce la fricción entre diseñadores y desarrolladores al llevar las animaciones del estudio a la pantalla en cuestión de minutos.
¿Te imaginas poder crear y editar animaciones complejas y vídeos interactivos para aplicaciones y webs sin que los archivos pesen y ralenticen los procesos de carga? Desde hace unos años existe. Lottie es un estándar de animación que acorta la fase de diseño y tiene un peso muy pequeño. Este tipo de archivo nació en 2017 como una librería capaz de interpretar animaciones de After Effects exportadas en JSON (JavaScript Object Notation). Un formato de texto ligero y legible por humanos para el intercambio de datos estructurados, utilizado sobre todo en aplicaciones web y APIs (Interfaz de Programación de Aplicaciones). Este avance significaba que los diseñadores podían enviar animaciones sin necesidad de que un desarrollador tuviera que reconstruirlas.
La principal ventaja de los archivos Lottie es su peso. Y es que, con el formato JSON, no es necesario pixelar cada fotograma. Mediante la descripción de vectores y keyframes, las animaciones pueden ser mucho más ligeras que los archivos GIF. De hecho, en casos extremos un Lottie de 9 KB puede ser equivalente a un GIF de 2,8 MB. Esto se traduce en un mejor Time to Interactive, menos consumo de datos y mayor control sobre las animaciones.
La suite que lleva las animaciones a todas partes
Con los años, estos archivos se han consolidado y ha nacido LottieFiles. La plataforma que permite llevar estas animaciones de alta calidad y poco peso a los diferentes soportes digitales. En este sentido, LottieFiles se ha convertido en la suite de facto para trabajar con este tipo de archivos. En ella, los usuarios encuentran opciones de previsualización y pruebas, optimización de peso, bibliotecas de players y runtimes, y una larga lista de integraciones con otros programas (After Effects, Figma, Webflow, WordPress, VS Code, entre otras). Su crecimiento es tal que, a día de hoy, más de 3 millones de usuarios de 135.000 empresas utilizan sus servicios.
Normalmente, las animaciones de LottieFiles suelen nacer en Adobe After Effects. Una vez diseñadas, los usuarios pueden exportarlas a archivo JSON usando el plugin Bodymovin. Además, ahora existe también el contenedor .lottie (dotLottie), un ZIP con cerebro que empaqueta una o varias animaciones JSON y sus recursos en un solo archivo, ofreciendo una mejor compresión y organización. Tanto es así que el ahorro puede llegar a representar alrededor del 80%, según el archivo. Sin embargo, los usuarios pueden optar por otras opciones como Figma o crear directamente las animaciones en Lottie Creator (el propio editor de la plataforma).
Una vez subida o creada, los usuarios pueden optimizar el peso de la animación. De esta forma, limpian el archivo JSON eliminando etiquetas y recursos innecesarios y empaquetándolo, si conviene, en formato dotLottie. Para crear una animación desde cero en Lottie Creator, los usuarios pueden importar todos los elementos en archivos SVG, JSON o .lottie. Después de subirlos, la herramienta permite animar con keyframes y cambiar parámetros como la posición, la escala, la rotación, las capas, los colores, etc.
Integración sencilla en webs y apps
Integrar una animación Lottie en una web o app es igual de sencillo que incrustar un vídeo de YouTube: solo es necesario el enlace que genera la propia plataforma LottieFiles. De hecho, los editores modernos, incluso sin tocar código, ya ofrecen un bloque de Lottie. Esto permite simplemente introducir el enlace o arrastrar el archivo y decidir factores como si la animación tiene que arrancar sola o a qué velocidad tiene que moverse. Si la web depende de WordPress o Webflow, el proceso es casi idéntico al de subir una imagen.
El proceso de subir una animación en una app sigue la misma lógica. El equipo añade un componente de Lottie a la pantalla correspondiente, le indica qué animación debe mostrar y define su comportamiento: si se repite, si arranca nada más abrirse la pantalla o si espera a que el usuario toque algo. En iPhone y en Android existen componentes nativos para esto, y en marcos multiplataforma como React Native o Flutter también hay piezas listas que se usan como cualquier otro elemento visual. Para el usuario final no hay misterio: es un icono que se anima, un check que celebra una acción o un cargador que hace la espera más amable.
Planes y precios de LottieFiles
LottieFiles cuenta con varios planes de suscripción. En primer lugar, el plan individual (17 euros mensuales) incluye subidas ilimitadas de archivos, uso de Lottie Creator y Lottie Editor, optimización (JSON y dotLottie), hosting/CDN, oEmbed y exportación a GIF/MP4/WebM/MOV, entre otras funciones. Por otro lado, el programa también ofrece un plan de equipo por 21 euros mensuales por usuario. Esta opción suma a todo lo anterior funciones de equipo, como historial de versiones, comentarios, paleta de marca, roles y permisos, facturación unificada, acceso a la biblioteca del equipo desde Figma/Canva y posibilidad de alojar archivos fuente de AE/Figma.
Por último, existe una versión gratuita limitada que permite subir hasta cinco archivos privados en total, subir animaciones a la biblioteca abierta sin límite y descargar hasta 10 animaciones públicas al mes. Si lo que se quiere es crear animaciones desde Lottie Creator, el plan gratuito permite crear todos los archivos que se quieran, aunque con restricciones a la hora de exportarlos.
