¿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 webblog 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.

archivos lotties que es programas diseño grafico crear animaciones lottie descargar lottiefiles

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.

Ventajas de usar animaciones de Lottie

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.

  • La introducción de Lottie permite a los diseñadores hacer un gran trabajo más rápido y con más facilidad.

  • Funciona en cualquier dispositivo y se integra fácilmente con las herramientas que ya está utilizando.

  • Las animaciones de Lottie se pueden integrar sin problemas en aplicaciones y webs, ya que no reduce su calidad y puedes hacerlos interactivos.

  • Se puede usar las animaciones de Lottie como calcomanías en las plataformas de mensajería, ya que técnicamente no están restringidas a dispositivos móviles y web.

  • El tamaño de un archivo Lottie aumenta la velocidad de descarga y reduce la cantidad de espacio en disco utilizado.

Cómo agregar animaciones de Lottie en cualquier lugar

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.

#1 Incrusta animaciones de Lottie sin código

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.

  • Visita cualquier sitio web de animación.

  • Desplácete hacia abajo y copie la URL oEmbed.

  • Pega el enlace de inserción en una plataforma compatible.

#2 Agrega animaciones de Lottie en HTML

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:

  • Visita cualquier sitio web de animación.

  • Copia la URL de animación de Lottie. También puedes usar ese enlace si su archivo Lottie JSON está alojado en otro lugar.

  • Visita la página del reproductor web de Lottie. Pega la URL de animación de Lottie en la sección Su URL JSON de Lottie.

  • Puedes personalizar su modo de reproducción, orientación, color de fondo, tamaño, velocidad y más.

  • Copia el código generado.

  • Pega el código en su HTML.

#3 Agrega animaciones de Lottie a las bibliotecas y marcos de JavaScript

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.

  • Instala paquetes usando npm o yarn

npm install --save @lottiefiles/lottie-player
  • Importa el reproductor.

import * as LottiePlayer from "@lottiefiles/lottie-player";
  • Incluye el siguiente código:

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

#4 Agregue animaciones de Lottie a las aplicaciones de iOS y Android

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.

#5 Agrega animaciones de Lottie a Figma y Adobe XD

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:

  • Figma: haz click en el lienzo > Complementos > LottieFiles.

  • Adobe XD: en la pantalla de inicio, haz click en Complementos > Complementos > LottieFiles para XD.

#6 Agrega animaciones de Lottie a Webflow y WordPress

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.

  • Con Webflow, simplemente debes descargar cualquier animación de Lottie desde LottieFiles. A continuación, arrastra y suelta el archivo en cualquier lugar del editor de Webflow.

  • Para agregar animaciones de Lottie a WordPress, descargua el complemento de WordPress de LottieFiles. Abre el editor de WordPress y agrega un nuevo bloque Lottie. Las animaciones de Lottie se pueden insertar explorando la biblioteca de animaciones de LottieFiles, cargándolas desde tu biblioteca de medios o pegando desde una URL.

#7 Para todo lo demás, exportar como GIF o MP4

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:

  • Visita cualquier sitio web de animación.

  • Haz click en Descargar.

  • Elije la opción que quieras, si GIF o MP4.

Mejores páginas para descargar animaciones de Lottie

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.

ganador 1

IconScout

mejores plantillas themes temas wordpress lms formacion cursos online eduma

Iconscout es una biblioteca que cuenta con material gráfico para descargar e ilustraciones, haciendo posible dar con recursos como iconos, imágenes de stock e ilustraciones adquiridos por LottieFiles para cualquier proyecto. Cada colección está disponible en una variedad de estilos, tamaños y formatos. Y con nuevas adiciones agregadas a la colección de Iconscout todos los días, también tendrás acceso a nuevas ideas en iconografía.

ganador 2

LottieFiles

mejores plantillas themes temas wordpress lms formacion cursos online eduma

LottieFiles es una plataforma para probar, colaborar y descubrir animaciones que atienden principalmente a una comunidad de animadores, diseñadores, desarrolladores e ingenieros, cuyo objetivo es hacer que el descubrimiento, la creación y la implementación de las animaciones de Lottie sean más fáciles y eficientes. También es el creador del complemento LottieFiles para After Effects que ayuda a convertir tu archivo de animación en un archivo Lottie.

ganador 3

Drawer Design

mejores plantillas themes temas wordpress lms formacion cursos online eduma

Drawer Design es un mercado de animaciones Premium Lottie de alta calidad para propietarios, diseñadores y desarrolladores de startups ocupados. La animación de Drawer Lottie viene con un archivo fuente Ae y en múltiples formatos de archivo: Ai, Xd, Sketch, Figma, SVG, EPS y PNG.

Creattie

mejores apps teclados android ios emoticonos emojis gratis redes sociales facebook whatsapp twitter linkedin instagram youtube animoji

Creattie es un proveedor global de animaciones premium de Lottie. Tienen la opción de una prueba gratis donde puedes personalizar tu visión cambiando los colores, la configuración de animación y elegir formato. Además, cuentan con colecciones seleccionadas con fuertes principios de diseño.

Fiverr

mejores apps teclados android ios emoticonos emojis gratis redes sociales facebook whatsapp twitter linkedin instagram youtube animoji

Fiverr es un mercado para servicios freelance, donde la empresa proporciona una plataforma para que los trabajadores autónomos ofrezcan servicios a clientes desde cinco dólares por gig (presentación de servicios con una descripción de lo que se ofrece y qué pueden esperar al contratarlo).

LottieFlow

mejores apps teclados android ios emoticonos emojis gratis redes sociales facebook whatsapp twitter linkedin instagram youtube animoji

LottieFlow es una herramienta de desarrollo creada por la agencia de Findulce, donde puedes descargar animaciones de íconos de Lottie para implementar en tu sitio web o aplicación de forma gratuita, cambiar el color hexadecimal, personalizar la aceleración y descargar el archivo JSON.

Lordicon

mejores apps teclados android ios emoticonos emojis gratis redes sociales facebook whatsapp twitter linkedin instagram youtube animoji

Lordicon es un estudio de diseño y animación independiente cuya misión es revolucionar la industria de los íconos enmarcando la vida en forma de píxel. Día a día, crean diseños memorables que muestran inteligentemente el mensaje de tu marca de una manera muy visual y estética.

LottieLab

mejores apps teclados android ios emoticonos emojis gratis redes sociales facebook whatsapp twitter linkedin instagram youtube animoji

LottieLab es una herramienta cuya misión es democratizar el diseño de movimiento para todos, ayudando principalmente a diseñadores, desarrolladores y especialistas en marketing a crear experiencias digitales más mágicas para sus usuarios mediante animaciones.

Motion Elements

mejores apps teclados android ios emoticonos emojis gratis redes sociales facebook whatsapp twitter linkedin instagram youtube animoji

MotionElements es el mercado de microstock principal de Asia para los realizadores de video de todo el mundo. Ofrece una experiencia para vendedores y compradores, ofreciendo videos de stock, música, modelos 3D, After Effects y plantillas de Apple Motion con licencia libre de derechos.

Vidalgo

mejores apps teclados android ios emoticonos emojis gratis redes sociales facebook whatsapp twitter linkedin instagram youtube animoji

Vidalgo es una plataforma de animaciones basada en el formato de archivos Lottie para creadores, consumidores de animación y coleccionistas de arte digital. Son una herramienta de personalización de animaciones impulsada por IA y tokenización futura para las obras de los artistas.

Mejores programas para crear animaciones Lottie

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:

ganador 1

LottieFiles

mejores plantillas themes temas wordpress lms formacion cursos online eduma

El complemento LottieFiles convierte tu animación de Adobe After Effects en un archivo de formato Lottie para usar en la web y en dispositivos móviles. El complemento proporciona un flujo de trabajo fluido para iterar en animaciones y probar el soporte de funciones en diferentes plataformas.

ganador 2

LottieFlow

mejores plantillas themes temas wordpress lms formacion cursos online eduma

LottieFlow es una herramienta de desarrollo creada por la agencia de Findulce, donde puedes descargar animaciones de íconos de Lottie para implementar en tu sitio web o aplicación de forma gratuita, cambiar el color hexadecimal, personalizar la aceleración y descargar el archivo JSON.

ganador 3

Synfig

mejores plantillas themes temas wordpress lms formacion cursos online eduma

Synfig Studio es un editor de gráficos vectoriales y una herramienta libre de animación, que se caracteriza por contar con herramientas y funciones para llevar a cabo proyectos animados de inicio a fin. Está disponible de manera gratuita tanto para Windows como Mac OSX y Linux.

Bodymovin

mejores apps teclados android ios emoticonos emojis gratis redes sociales facebook whatsapp twitter linkedin instagram youtube animoji

BodyMovin es una extensión de After Effects para exportar animaciones de Lottie. Las animaciones se exportan de manera predeterminada como archivos .json que usa el reproductor lottie.js que viene con el complemento. Puede renderizar animaciones en el navegador en svg, canvas y html.

Cavalry

mejores apps teclados android ios emoticonos emojis gratis redes sociales facebook whatsapp twitter linkedin instagram youtube animoji

Cavalry es un potente software de animación 2D para Mac y Windows. Cavalry hace que la animación 2D sea más inteligente, fácil y rápida de producir. Diseño en tiempo real para publicidad, dispositivos móviles, visualización de datos, web, transmisión, interfaz de usuario, juegos y más.

Haiku Animator

mejores apps teclados android ios emoticonos emojis gratis redes sociales facebook whatsapp twitter linkedin instagram youtube animoji

Haiku Animator es la solución para crear animaciones de interfaz de usuario multiplataforma, impulsado por el motor Lottie de código abierto de Airbnb. Te permite llevar el diseño a producción, comenzando con tus herramientas de diseño y terminando con tu base de código.

KeyShape

mejores apps teclados android ios emoticonos emojis gratis redes sociales facebook whatsapp twitter linkedin instagram youtube animoji

Keyshape es una herramienta que combina herramientas de dibujo y animación de gráficos vectoriales en una sola aplicación. Te permite dibujar y animar íconos, pancartas y gráficos en movimiento para páginas web y sitios de redes sociales. Está disponible en ciertos países y solo sirve para Mac.

LottieLab

mejores apps teclados android ios emoticonos emojis gratis redes sociales facebook whatsapp twitter linkedin instagram youtube animoji

LottieLab es una herramienta cuya misión es democratizar el diseño de movimiento para todos, ayudando principalmente a diseñadores, desarrolladores y especialistas en marketing a crear experiencias digitales más mágicas para sus usuarios mediante animaciones.

Conclusión: Utiliza animaciones Lottie para dar más valor a tu proyecto

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.

¿Te ha gustado el contenido?

Puntuación media 5 / 5. Votos: 2733

¡Todavía no hay votos! Sé el primero en valorar el contenido.

Estas herramientas también te pueden interesar

Cuando tratas con marketing digital significa que manejas gran cantidad de datos y tareas, que es crítico controlar. Para ello, es muy importante rodearse de herramientas online que te permitan administrar tu estrategia de marketing online y que hagan que el trabajo sea mucho más fácil.

¿Te ha gustado? Comparte el contenido
Publicado por Ignacio Santiago

Soy muchas cosas, pero todo empezó como Blogger. Desde ahí he crecido como especialista en Marketing Online, aunque con mucha experiencia en Diseño Web, Blogging, SEO y WordPress. Ayudo a emprendedores y pequeñas empresas a crear, mejorar y potenciar su presencia y visibilidad en Internet, con un branding fuerte, que inspire confianza y que genere ventas.

Contenidos relacionados
Deja tu comentario
  1. Gustavo 25/11/2022 a las 10:34 - Responder

    Hola,

    Casualmente estuve probando Lottie cuando me apareció este artículo. Yo lo que hago para añadir imágenes a mi web es copiar y pegar la URL de la imagen. Mi duda es si esto sobrecarga y hace más pesada la web.

    • Ignacio Santiago 25/11/2022 a las 20:42 - Responder

      Hola Gustavo 😊,

      Gracias por tu comentario. Lo mejor para mostrar un Lottie es descargar el archivo JSON y subirlo a tu sitio web (todo lo optimizado posible). De otra manera estás haciendo peticiones a otro servidor, por lo que va a afectar mucho a la velocidad de carga.

      Un saludo

Suscríbete y estate al día en marketing digital

Únete a más de 50.000 personas que, aparte de recibir los primeros todas las actualizaciones del blog e importantes descuentos en herramientas, tienen acceso gratuito a todos nuestros contenidos.

servicios marketing digital diseño web wordpress seo fondo
servicios marketing digital diseño web wordpress seo fondo
Suscríbete y estate al día en marketing digital

Únete a más de 50.000 personas que, aparte de recibir los primeros todas las actualizaciones del blog e importantes descuentos en herramientas, tienen acceso gratuito a todos nuestros contenidos.