Qué Es LOTTIE y 17 Páginas para Crearlos o Descargarlos

¿Has oído hablar del nuevo estándar de animación para web y apps llamado Lottie, pero no terminas de entender cómo funciona ni qué ventajas tiene? ¿Te gustaría utilizar elementos gráficos animados en tu pagina web, blog o tienda online pero sin que afecten al rendimiento y a la velocidad de carga? ¡Estás en el sitio correcto! Las animaciones han sido siempre una de las armas más potentes para explicar o vender cualquier tipo de producto o servicio en un sitio web. Eso si, siempre han sido muy caras de desarrollar y, además, afectaban gravemente a la velocidad de carga (son elementos gráficos muy pesados). Los archivos Lottie vienen a cubrir esa necesidad y en esta guía te explico en detalle qué son, cómo crearlos y dónde descargarlos.

En el pasado, crear animaciones complejas para aplicaciones de Android, iOS y React Native era un proceso largo y difícil. Era vital agregar archivos de imagen voluminosos para cada tamaño de pantalla o escribir miles de líneas de código frágiles y difíciles de mantener. Debido a esto, la mayoría de las aplicaciones no utilizaban ningún tipo de animación, a pesar de que es una herramienta poderosa para comunicar ideas y crear experiencias de usuario atractivas. Aquí es donde irrumpe las animaciones Lottie, un nuevo estándar de animación que te ofrece la posibilidad de mostrar una animación, pero con un proceso de diseño muy corto y un peso de archivo muy pequeño.

Lottie es un formato de archivo de animación basado en JSON que permite a los diseñadores enviar animaciones a cualquier plataforma con la misma facilidad que los activos estáticos. Son archivos pequeños que se pueden usar en cualquier dispositivo y se pueden escalar hacia arriba o hacia abajo sin pixelarse. Lottie Files te permite crear, editar, verificar, colaborar y enviar un Lottie de la manera más fácil posible. Una animación de Lottie puede reproducir sus animaciones en la web o en dispositivos móviles manteniendo una buena calidad. También puede realizar ajustes inteligentes para que las animaciones sean interactivas.

Lottie son archivos de animación que funcionan en cualquier dispositivo y se pueden escalar sin pixelación ni pérdida de calidad.

La principal diferencia entre los gifs animados y los archivos de Lottie es que los primeros consisten en imágenes, mientras que los segundos se generan usando códigos en archivos JSON, lo que los hace totalmente personalizables y más fáciles porque todo está basado en códigos. Gracias a este formato de animación puedes crear páginas web muy creativas sin perder velocidad de carga, ya que esto es un aspecto fundamental para una buena experiencia de usuario hoy en día, especialmente en dispositivos móviles.

Antes de que los archivos de Lottie llegaran al mercado, la única idea era crear las animaciones y enviarlas a los desarrolladores para volver a codificarlas. Este trabajo no daba un resultado muy satisfactorio debido al formato de baja resolución que producíe imágenes pixeladas. Lottie Files tiene como objetivo proporcionar a los animadores y desarrolladores un lugar para probar, compartir y descubrir animaciones en la web. Esta nueva herramienta proporciona una serie de beneficios y son los siguientes.

Cada plataforma, como la web, las aplicaciones móviles o su herramienta de diseño favorita, tienen su propia forma de implementar la animación. Una animación creada para una plataforma (como una animación SVG en línea en su sitio web) no siempre es fácil de transferir a otra plataforma (como una publicación de Instagram). Con Lottie Files, puedes tomar cualquier animación gratuita de su biblioteca o una creada por ti o tu equipo y enviarla a cualquier lugar. Para ayudarte, hemos reunido siete formas de agregar animaciones de Lottie a casi cualquier plataforma.

La forma más fácil de agregar la animación de Lottie es con la función de inserción. Las animaciones de Lottie se pueden incrustar en cualquier sitio que admita el formato oEmbed. Incluye más de 25 000 plataformas, incluidas Notion, Medium, Ghost, Reddit y WordPress. Te voy a explicar cómo incrustar cualquier animación en solo unos pocos pasos.

También puedes agregar animaciones de Lottie a páginas web usando HTML. Esto es útil si está utilizando una plataforma que no admite incrustaciones o si necesita más control sobre la reproducción de las animaciones de Lottie. Te voy a explicar cómo agregar la animación de Lottie en HTML:

También puede instalar Lottie Web Player utilizando el administrador de paquetes de nodos (npm) o yarn, y luego implementarlo en bibliotecas y marcos HTML o JavaScript.

npm install --save @lottiefiles/lottie-player

import * as LottiePlayer from "@lottiefiles/lottie-player";

<lottie-player
autoplay
controls
loop
mode="normal"
src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
style="width: 320px"
></lottie-player>

Crea aplicaciones móviles más atractivas con las animaciones de Lottie. Por ejemplo, puedes usar Lottie para cargar animaciones, incrustar animaciones, botones interactivos, etc. Si usas la plataforma móvil, también puedes obtener la aplicación móvil LottieFiles. Esta aplicación te ayuda a crear, probar y previsualizar animaciones en dispositivos móviles, ahorrándote un valioso tiempo de desarrollo.

También puedes agregar animaciones de Lottie a herramientas de diseño. Primero, tienes que instalar los complementos de LottieFiles para Figma o Adobe XD. Una vez instalado, simplemente debes ejecutar los complementos:

Agregar animaciones es tan fácil como arrastrar y soltar. Aún mejor, puedes personalizar la forma en que se reproducen estas animaciones y configurarlas para que reaccionen a las acciones del usuario. Te voy a explicar como realizarlo en cada web.

Si te encuentras con una plataforma que no es compatible con Lottie (todavía), puedes exportar las animaciones de Lottie como GIF o videos MP4. Te voy a explicar como funciona:

Las animaciones pueden ser muy complejas, pero al final usamos archivos de imagen y JSON, lo que significa pequeños requisitos que brindan una alta probabilidad. Las animaciones se pueden reproducir, pausar, detener, avanzar rápidamente o cambiar la escala. Si quieres utilizar los archivos de Lottie en tu sitio web, hay varias plataformas/repositorios/bibliotecas para descargar las animaciones y son los siguientes que te menciono a continuación.

Dentro del UX, el movimiento es uno de los principios que más influye en la atención del usuario. La respuesta de un botón a acciones o animaciones sutiles en ilustraciones sirven, no solo como feedback básico en una relación IHM (interacción hombre-máquina), sino también como atracciones que agregan valor a nuestras soluciones. Para trabajar con Lottie, he reunido los mejores programas que necesitarás para crear las mejores animaciones:

Si aún no estás convencido de que estos archivos son necesarios, te puedo asegurar que con estas sencillas animaciones podrás captar por completo la atención de tus usuarios y convertir simples ilustraciones en animaciones que inviten a tus clientes a seguir navegando por tu site. Estos poderosos recursos agregan valor a nuestros proyectos y nos ayudan a comunicar de manera más efectiva. Estos archivos Lottie JSON no solo reducen el tiempo de carga de tu sitio web, sino que también brindan un diseño de interfaz moderno y actual con recursos que lo ayudan a interactuar con los usuarios.

Te recomendamos los programas/páginas IconScout, LottieFiles, Drawer Design, LottieFlow y Synfig Studio porque son las mejores herramientas para descargar y crear tus propios diseños de animación Lottie, permitiendo la personalización completa y con un peso mucho menor. Además, en todos estos medios encontrarás un buen repositorio de archivos para descargar, editar y llevarte a tu web o app. Los archivos Lottie han llegado para quedarse y van a ser un elemento cada vez más utilizado en diseño web.

¿Qué te ha parecido mi guia sobre Lottie y las páginas/programas para crearlos y descargarlos? ¿Conocías alguna página o programa de animación? ¿Hay alguna que te haya llamado la atención? ¿Crees que me he dejado alguna? ¿Te has quedado con alguna duda o pregunta? Entonces te pido que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero me alegraré mucho de leerlo y responderlo.