Une animation de chargement, une coche de validation ou une illustration qui s’anime au survol pèsent lourd quand elles sont livrées en GIF ou en vidéo. Le format Lottie décrit ces animations en vecteurs dans un fichier JSON, lu par une bibliothèque côté site ou application. LottieFiles s’est construit autour de ce format : la plateforme permet de créer ces fichiers, de les stocker, de les partager avec les développeurs et de les servir depuis son propre CDN. Selon l’éditeur, plus de 16 millions de designers et de développeurs l’utilisent.
Quel problème LottieFiles règle, et pour qui
Le frein classique du motion design dans un produit numérique tient au passage de relais. Le designer anime dans un outil de création, puis le développeur doit reproduire le mouvement en code ou se contenter d’une vidéo lourde, non interactive et floue sur les écrans haute densité. Lottie supprime cette étape : l’animation exportée est le fichier que l’application lit.
LottieFiles ajoute ce qui manque au format brut : un éditeur dans le navigateur, une bibliothèque de plus de 800 000 animations gratuites et premium, des espaces de travail pour commenter et valider, et des lecteurs open source (licence MIT) pour le web, iOS, Android, React Native et Flutter. La plateforme s’adresse aux designers produit et UI, aux motion designers qui travaillent sous Adobe After Effects, aux développeurs front et mobile, et aux équipes marketing qui veulent animer un site ou une présentation sans passer par la vidéo.
Comment s’organise le travail sur LottieFiles
D’après la documentation de l’éditeur, le cycle type se déroule en quatre temps :
- Vous partez d’une animation de la bibliothèque, d’un fichier SVG importé, d’un export depuis Figma ou d’une composition After Effects rendue avec le plugin dédié, qui propose aussi un rendu par lots et un contrôle de compatibilité.
- Vous retouchez ou construisez l’animation dans Lottie Creator : calques, images clés, éditeur de courbes, masques, chemins de mouvement et simulation physique, le tout dans le navigateur.
- Vous ajoutez si besoin de l’interactivité avec les State Machines (clic, survol, données) et des Motion Tokens, qui exposent textes et couleurs pour les modifier à l’exécution.
- Vous déposez le fichier dans l’espace de travail, le faites valider par statuts et commentaires image par image, puis le livrez en dotLottie, en JSON, en GIF ou en vidéo, ou via un lien CDN.
Le format dotLottie, poussé par l’éditeur, regroupe plusieurs animations et leurs ressources dans un seul fichier compressé, avec des thèmes (clair, sombre, couleurs de marque) basculables à l’exécution. Côté IA, Motion Copilot génère des calques et des images clés à partir d’une consigne écrite, et un serveur MCP permet à un assistant comme Claude Code ou Cursor de piloter Lottie Creator ou de parcourir les fichiers d’un espace de travail.
Cas d’usage concrets selon votre profil
- Designer produit : animer un parcours d’onboarding directement depuis Figma, exporter en dotLottie et transmettre au développeur un fichier prêt à intégrer plutôt qu’une maquette vidéo.
- Motion designer : rendre plusieurs compositions After Effects en Lottie d’un coup, vérifier le poids et les fonctions non prises en charge, puis enregistrer le fichier source .aep dans l’espace d’équipe.
- Développeur front ou mobile : intégrer une animation avec le lecteur dotLottie pour React, Vue, Svelte, iOS ou Android, et brancher des états interactifs sans réécrire l’animation.
- Équipe marketing : ajouter des animations à un site Webflow, à une présentation ou à un visuel Canva, avec les couleurs de la marque, sans recourir à des outils pour créer des GIF plus lourds.
LottieFiles face à Rive, Lottielab et Jitter
Rive est l’alternative la plus souvent citée pour les interfaces interactives : il repose sur son propre format et son propre moteur d’exécution, pensés pour des animations pilotées par l’état de l’application. LottieFiles mise au contraire sur un format ouvert déjà lu par de nombreuses bibliothèques, ce qui facilite la reprise d’animations existantes et l’export depuis After Effects.
Lottielab et Jitter visent surtout les designers qui veulent animer vite dans le navigateur, avec une prise en main proche d’un outil de maquette. LottieFiles se distingue par l’ampleur de sa bibliothèque, ses plugins pour les outils déjà en place et la gestion des fichiers d’équipe. Si vous comparez aussi les outils de conception d’interface, notre sélection d’alternatives à Figma complète le panorama.
Les limites à connaître avant de vous lancer
- La facturation est annuelle : l’aide de l’éditeur indique que tous les plans sont réglés à l’année, sans formule mensuelle standard.
- Les remboursements ne sont accordés qu’aux clients de l’Union européenne, et seulement dans les 7 jours suivant l’achat.
- Le compte gratuit est vite saturé pour un usage régulier : 5 fichiers privés au total, 20 Mo de stockage et 5 téléchargements d’animations publiques par espace de travail.
- Les prix sont affichés en dollars et le centre d’aide n’existe qu’en anglais.
- Les crédits d’IA sont plafonnés par plan (300 par mois sur Individual) et la référence de l’API GraphQL n’est pas encore publiée.
Comment choisir votre plan
Le compte gratuit suffit pour découvrir le format, tester des animations de la bibliothèque et faire quelques retouches. Dès que vous produisez des animations pour vous-même ou pour un client, Individual débloque les dépôts illimités, les animations premium, l’hébergement CDN et 2 Go de stockage. L’éditeur précise toutefois que l’usage commercial en équipe relève du plan Team.
Team se justifie dès deux éditeurs : fichiers partagés, historique des versions, commentaires, palettes de marque et spectateurs illimités. Team+ et Enterprise, sur devis, visent les organisations qui ont besoin d’un système de motion commun, de SSO, de journaux d’audit ou d’un accompagnement dédié. Comme l’engagement est annuel, commencez par mesurer le nombre réel d’éditeurs avant de dimensionner l’abonnement.