Inicio • Blog • Herramientas y Recursos online • Qué Es LOTTIE y 17 Páginas para Crearlos o Descargarlos
Qué Es LOTTIE y 17 Páginas para Crearlos o Descargarlos
- Ignacio Santiago
- noviembre, 2022
- Sin respuestas
¿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. Los archivos Lottie vienen a cubrir esa necesidad y en esta guía te explicamos 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. Debido a esto, la mayoría de las aplicaciones no utilizaban ningún tipo de animación, 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.
Este es un pequeño listado con las mejores páginas para descargar y crear animaciones de Lottie:
- IconScout – El más completo.
- LottieFiles – Muy polivalente.
- Drawer Design – Con gran capacidad de personalización.
Qué es Lottie, cómo funciona y para qué sirve
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.
Lottie utiliza una combinación de componentes vectoriales y de trama para crear animaciones de alta calidad que son multiplataforma por naturaleza. Para algunos elementos y parámetros de animación, le permite agregar interactividad y cambiar parámetros durante el tiempo de ejecución.
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.
Lottie tiene la ventaja de poderse usar en diferentes plataformas (web, android, ios, windows…), aunque hay pequeñas incompatibilidades entre las características de algunas plataformas, en general eso es una enorme ventaja.
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.
Con estos complementos, puedes buscar rápidamente animaciones gratuitas de lottie en figma o adobe xd. De esta forma puedes encontrar lo que necesitas sin cambiar entre aplicaciones o pestañas del navegador.
#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 mencionamos a continuación.
#1 IconScout
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.
Características
- Ofrece una amplia variedad de iconos, ilustraciones y fuentes para diseñadores y desarrolladores.
- Proporciona una plataforma para descargar y utilizar recursos gráficos en proyectos digitales.
- Permite a los usuarios realizar búsquedas avanzadas para encontrar rápidamente los elementos gráficos deseados.
- Puede integrarse con varias herramientas y plataformas de diseño para una experiencia más fluida.
Planes de precios
- Individual Plan($9,99/Mes).
- Team Plan ($14,99/Mes).
#2 LottieFiles
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.
Características
- Especializado en archivos de animación Lottie, utilizados en aplicaciones y sitios web.
- Permite la creación y edición de animaciones Lottie de manera sencilla.
- Ofrece una comunidad para compartir y explorar animaciones creadas por otros usuarios.
- Puede integrarse con varias herramientas de diseño para una implementación más fácil.
Planes de precios
- Individual Plan ($19,99).
- Team plan ($24,99/Mes).
Ofrecen un plan gratuito.
#3 Drawer Design
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.
Características
- Puede previsualizar su animación Lottie en vivo, sin necesidad de exportarla primero. Esto le permite realizar cambios y ver los resultados de inmediato.
- Puede editar los colores de su animación Lottie en tiempo real. Esto le permite personalizar la apariencia de su animación para que se ajuste a su marca o estilo.
- Puede exportar su animación Lottie a varios formatos, incluidos SVG, PNG y MP4. Esto le brinda flexibilidad para utilizar su animación en diferentes aplicaciones.
- Ofrece una biblioteca de animaciones Lottie gratuitas que puede usar en sus proyectos. Esto puede ahorrarle tiempo y esfuerzo al crear su propia animación.
Planes de precios
- Completamente gratuito.
- Desde $12
#4 Creattie
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.
Características
- Ofrece un editor de Lottie completo que le permite crear y editar animaciones Lottie desde cero. Este editor incluye una variedad de herramientas y funciones para ayudarlo a crear animaciones complejas y atractivas.
- Se integra con Adobe Creative Cloud, lo que le permite crear y editar animaciones Lottie directamente en sus aplicaciones favoritas de Adobe, como Photoshop, Illustrator y After Effects.
- Puede exportar animaciones Lottie a React Native, lo que le permite utilizarlas en aplicaciones móviles nativas. Esto le brinda una experiencia de usuario fluida y receptiva.
- Ofrece asistencia al cliente 24/7 para ayudarlo con cualquier problema que pueda tener con sus herramientas.
Planes de precios
- Premium ($19,99/Mes).
- Premium Plus ($29,99/Mes).
Ofrecen un plan gratuito.
#5 Fiverr
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).
Características
- Ofrece una previsualización en vivo de sus animaciones, lo que le permite ver cómo se verán antes de exportarlas.
- Incluye una biblioteca de animaciones Lottie gratuitas que puede usar en sus proyectos. Esto puede ahorrarle tiempo y esfuerzo al crear su propia animación.
- Te permite editar los colores de su animación en tiempo real.
- Te permite exportar su animación a varios formatos, incluidos SVG, PNG y MP4. Esto le brinda flexibilidad para utilizar su animación en diferentes aplicaciones.
Planes de precios
- Desde 5€.
#6 LottieFlow
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.
Características
- Herramienta centrada en la creación de animaciones Lottie.
- Diseñada con una interfaz de usuario amigable para facilitar la creación de animaciones.
- Permite previsualizar las animaciones en tiempo real durante el proceso de creación.
- Facilita la exportación de animaciones para su uso en proyectos.
Planes de precios
- Completamente gratuito
#7 Lordicon
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.
Características
- Especializado en la creación y proporciona iconos animados.
- Ofrece una variedad de iconos animados que pueden ser utilizados en diferentes proyectos.
- Permite personalizar los iconos animados según las necesidades del usuario.
- Puede integrarse fácilmente en sitios web y aplicaciones.
Planes de precios
- Plan gratuito.
- Pro ($16/Mes).
#8 LottieLab
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.
Características
- Es una herramienta intuitiva que no requiere conocimientos de codificación.
- LottieLab ofrece una variedad de herramientas y funciones para crear animaciones complejas y atractivas.
- Puedes importar y exportar animaciones Lottie en varios formatos, incluidos JSON, ZIP y MOV.
- Su versión es gratuita con funciones limitadas, así como planes de suscripción pagos con más funciones.
Planes de precios
- Completamente gratuito.
#9 Motion Elements
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.
Características
- Ofrece una amplia variedad de recursos multimedia, incluyendo vídeos y elementos de animación.
- Proporciona opciones de licencia para el uso de sus recursos en proyectos comerciales y personales.
- Cuenta con un catálogo extenso de elementos animados que pueden ser utilizados en diversos tipos de proyectos multimedia.
- Algunos elementos pueden ser personalizados para adaptarse a las necesidades específicas del usuario.
Planes de precios
- Completamente gratuito.
- Desde 5€
#10 Vidalgo
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.
Características
- Especializado en animaciones vectoriales para su uso en proyectos digitales.
- Diseñado para ser fácil de usar, incluso para aquellos sin experiencia avanzada en animación.
- Permite exportar animaciones en formatos populares para su integración en aplicaciones y sitios web.
- Ofrece plantillas predefinidas que facilitan la creación de animaciones sin empezar desde cero.
Planes de precios
- A consultar.
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:
#1 LottieFiles
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.
Características
- Especializado en archivos de animación Lottie, utilizados en aplicaciones y sitios web.
- Permite la creación y edición de animaciones Lottie de manera sencilla.
- Ofrece una comunidad para compartir y explorar animaciones creadas por otros usuarios.
- Puede integrarse con varias herramientas de diseño para una implementación más fácil.
Planes de precios
- Basic plan (Gratuito).
- Individual Plan ($19,99/Mes).
- Team Plan ($24,99/Mes).
#2 LottieFlow
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.
Características
- Herramienta centrada en la creación de animaciones Lottie.
- Diseñada con una interfaz de usuario amigable para facilitar la creación de animaciones.
- Permite previsualizar las animaciones en tiempo real durante el proceso de creación.
- Facilita la exportación de animaciones para su uso en proyectos.
Planes de precios
- Completamente gratuito.
#3 Synfig
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.
Características
- Synfig Studio es un software de animación 2D de código abierto.
- Ofrece características avanzadas para la creación de animaciones complejas.
- Tiene una interfaz gráfica de usuario que facilita el proceso de animación.
- Al ser de código abierto, permite a los usuarios personalizar y contribuir al desarrollo.
Planes de precios
- Completamente gratuito.
#4 Bodymovin
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.
Características
- Tiene una interfaz intuitiva que es fácil de aprender y usar.
- Ofrece una variedad de herramientas y funciones para crear animaciones complejas y atractivas.
- Puede importar y exportar animaciones Lottie en varios formatos, incluidos JSON, ZIP y MOV.
Planes de precios
- Completamente gratuito.
#5 Cavalry
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.
Características
- Es una herramienta que combina diseño y animación.
- Ofrece una interfaz intuitiva para facilitar la creación de animaciones y diseños interactivos.
- Permite realizar ajustes en tiempo real durante la reproducción de la animación.
- Ofrece opciones versátiles de exportación para adaptarse a diferentes plataformas y proyectos.
Planes de precios
- Inicio (Gratuito).
- Profesional (£16/Mes).
#6 Haiku Animator
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.
Características
- Se centra en la creación de animaciones interactivas y componentes de interfaz de usuario.
- Puede integrarse con herramientas de diseño populares como Sketch y Figma.
- Facilita la exportación de animaciones y componentes para que los desarrolladores los implementen en sus proyectos.
- Permite la colaboración en tiempo real entre diseñadores y desarrolladores.
Planes de precios
- Completamente gratuito.
#7 KeyShape
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.
Características
- Es una herramienta de animación basada en vectores.
- Diseñada con una interfaz sencilla para facilitar la creación de animaciones 2D.
- Permite exportar animaciones en formatos compatibles con la web y aplicaciones.
- Ofrece soporte para efectos avanzados en animaciones vectoriales.
Planes de precios
- Versión de prueba de 14 días.
- App Store ($29,99).
#8 LottieLab
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.
Características
- Se especializa en la creación y gestión de animaciones Lottie.
- Diseñada para ser accesible y fácil de usar para diseñadores y desarrolladores.
- Facilita la colaboración entre miembros del equipo durante el proceso de creación.
- Permite previsualizar las animaciones en tiempo real antes de la implementación.
Planes de precios
- Completamente gratuito.
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.
Estos son las mejores páginas para descargar y crear animaciones de Lottie:
- IconScout – El más completo.
- LottieFiles – Muy polivalente.
- Drawer Design – Con gran capacidad de personalización.
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.
