Animation Lottie sur Figma : plan d'intégration

Animation Lottie sur Figma: plan d'intégration

Très joli dans la présentation client. Beaucoup moins joli dans le navigateur.

L’export d’une animation Lottie depuis Figma vers le web permet d’éviter ce gâchis. À condition de ne pas traiter Lottie comme un bouton magique nommé « Exporter ». Le format fonctionne très bien pour des animations vectorielles légères et interactives, mais il dépend fortement de la structure du fichier Figma, du nommage des calques et de la simplicité des effets utilisés.

Le principe est simple: tu construis une transition dans Figma avec Smart Animate, puis un plugin comme LottieFiles ou Aninix convertit cette logique en fichier JSON ou dotLottie. Ensuite, le développeur l’intègre dans le site. Simple sur le papier. En production, les détails font toute la différence.

De Figma à Lottie: ce qui se passe réellement

Figma n’est pas un logiciel d’animation spécialisé. C’est un outil de conception d’interface qui permet de simuler des transitions entre plusieurs frames ou composants. Avec Smart Animate, Figma compare les éléments présents dans deux états et anime les propriétés qu’il parvient à relier: position, taille, rotation, opacité, couleur ou certains changements de forme.

Lottie, de son côté, est un format d’animation vectorielle destiné à être lu sur le web et dans des applications. Le fichier ne contient pas une vidéo image par image. Il décrit des objets, leurs propriétés et leur évolution dans le temps. C’est cette logique qui rend l’animation légère, nette à toutes les tailles et exploitable par le navigateur.

La conversion via un plugin Figma suit généralement ce chemin:

1. Création des frames ou composants dans Figma.

2. Définition des transitions avec Smart Animate.

3. Vérification du nommage et de la hiérarchie des calques.

4. Export à l’aide d’un plugin Lottie.

5. Génération d’un fichier JSON ou dotLottie.

6. Prévisualisation et contrôle du rendu.

7. Intégration dans le site ou l’application.

Le point souvent oublié se trouve entre les étapes 3 et 6. Le plugin ne devine pas ton intention graphique. Il lit la structure du document. Si cette structure est confuse, l’export sera confus aussi. Un fichier Figma bricolé à la dernière minute donne rarement une animation exploitable, même si le prototype paraît impeccable à l’écran.

Une bonne animation Lottie commence rarement dans le plugin. Elle commence dans un fichier Figma rangé comme si quelqu’un d’autre devait vraiment le reprendre.

Le rôle des plugins

Le plugin LottieFiles pour Figma permet de convertir des prototypes et composants animés avec Smart Animate en fichiers Lottie au format JSON ou dotLottie. D’autres extensions, comme Aninix, proposent également des passerelles entre le prototype Figma et l’animation exploitable sur le web.

Le choix du plugin compte, mais il ne faut pas lui faire porter toute la responsabilité. Deux plugins peuvent produire un résultat différent à partir du même fichier, notamment lorsqu’il contient des masques, des rotations complexes ou des effets de transparence. La prévisualisation intégrée est donc utile, mais elle ne remplace pas le test dans le navigateur cible.

Pour un élément décoratif simple, l’export peut être rapide. Pour une animation centrale de page d’accueil, un logo animé ou une micro-interaction liée à une action utilisateur, prévois une vraie phase de contrôle. C’est une animation de production, pas seulement une démo de prototype.

Construire l’animation dans Figma sans saboter l’export

La première erreur consiste à concevoir une animation spectaculaire avant de vérifier ce que le format pourra réellement restituer. Figma autorise des effets visuels qui ne se traduisent pas toujours proprement en Lottie. Le prototype peut donc être excellent comme outil de présentation et médiocre comme source d’export.

Pour garder une animation vectorielle web fiable, travaille avec des éléments simples et identifiables:

• formes vectorielles propres;
• composants réutilisables;
• propriétés d’opacité et de position clairement différenciées;
• rotations limitées et prévisibles;
• masques utilisés avec modération;
• hiérarchie de calques cohérente;
• transitions courtes et lisibles.

Le nommage identique des calques entre les différentes frames est une règle de base. Si un cercle s’appelle Cercle principal dans une frame et Ellipse 12 dans la suivante, Figma ou le plugin peut ne pas comprendre qu’il s’agit du même objet. Résultat: au lieu d’une transformation fluide, tu obtiens une disparition suivie d’une apparition. Techniquement, ça bouge. Visuellement, ça sent le prototype qui n’a jamais quitté Figma.

Un fichier propre vaut mieux qu’un effet malin

Voici une structure de travail raisonnable pour une animation d’interface:

Le bon réflexe consiste à créer une version dédiée à l’export. Pas forcément un nouveau fichier complet, mais au moins une page Figma nettoyée. Tu y conserves les éléments nécessaires, tu supprimes les explorations abandonnées et tu réduis les effets inutiles.

Ce n’est pas du perfectionnisme. C’est du cadrage. Le même principe que pour un devis: moins il y a de zones floues, moins tu passes de temps à expliquer pourquoi le résultat ne correspond pas à ce que personne n’avait formalisé.

Les règles de nommage qui évitent les mauvaises surprises

Le nommage des calques n’est pas la partie glamour du métier. Pourtant, c’est l’un des leviers les plus efficaces pour réussir un export Lottie depuis Figma.

Dans chaque état de l’animation, les éléments qui doivent évoluer doivent conserver un nom identique et une place logique dans la hiérarchie. Si la structure change complètement d’une frame à l’autre, le moteur d’animation doit deviner. Et les moteurs qui devinent produisent des résultats créatifs. Pas toujours dans le bon sens.

Adopte une convention lisible:

• fond_principal
• logo_symbole
• logo_nom
• bouton_icone
• titre_principal
• illustration_cercle_01

Le style de nommage importe moins que sa cohérence. Évite les noms automatiques générés par Figma, les doublons et les calques appelés Copie, Copie 2 ou Nouveau groupe. Dans six semaines, même toi tu ne sauras plus lequel devait s’animer.

Ce qui doit rester identique

Entre les frames de départ et d’arrivée, conserve autant que possible:

• le nom du calque;
• son rôle dans la hiérarchie;
• son type d’objet;
• son point d’ancrage;
• la logique de regroupement;
• la relation avec les autres éléments animés.

Un changement de position est généralement plus fiable qu’un remplacement complet de forme. Une variation d’opacité est plus prévisible qu’un effet de fusion complexe. Une rotation simple est plus facile à tester qu’une rotation combinée à plusieurs masques imbriqués.

Pour les composants, travaille avec de vrais états. Un bouton au repos, un bouton au survol et un bouton actif doivent partager une structure similaire. Si chaque variante est dessinée comme une illustration indépendante, le plugin aura moins de chances de reconstruire une transition propre.

La durée: courte ne veut pas dire brutale

Les données disponibles sur l’export Figma vers Lottie mentionnent un délai d’animation instantané de 1 ms pour la transition automatique. Cela ne signifie pas que toutes les animations doivent durer 1 ms, évidemment. Cette valeur concerne un déclenchement technique, pas une règle de direction artistique.

Dans une interface, une micro-interaction doit donner une sensation de réponse immédiate. Mais elle doit rester perceptible. Un mouvement trop rapide devient un clignotement. Un mouvement trop lent transforme un clic banal en cérémonie administrative.

Pour choisir une durée, demande-toi ce que l’animation doit faire:

• confirmer une action;
• attirer l’attention;
• expliquer une transformation;
• accompagner une navigation;
• installer une ambiance de marque.

Une confirmation peut rester très brève. Une transition de page mérite davantage de respiration. Une animation de logo doit être regardée une fois, puis ne plus gêner l’usage. Si elle réclame l’attention à chaque chargement, ce n’est plus une identité animée: c’est un collègue pénible qui tape sur ton épaule toutes les trente secondes.

JSON ou dotLottie: choisir le bon format

L’export peut produire un fichier JSON classique ou un fichier dotLottie. Les deux formats servent à transporter l’animation, mais ils ne répondent pas exactement aux mêmes besoins.

Le JSON reste un choix courant et facile à manipuler. Il contient les données vectorielles nécessaires à la lecture de l’animation. Il peut convenir à un fichier unique, à une intégration existante ou à un environnement qui utilise déjà des lecteurs Lottie configurés autour de ce format.

Le dotLottie est plus récent dans les usages courants et apporte plusieurs avantages pratiques. Il peut réduire la taille des fichiers, regrouper plusieurs animations dans un seul fichier et conserver des éléments d’interactivité issus du prototype. Pour un projet avec plusieurs états, plusieurs icônes ou différentes animations liées à une même expérience, cette organisation peut devenir intéressante.

Le dotLottie ne rend pas automatiquement une animation meilleure. Il la rend potentiellement mieux organisée et plus légère. Si l’animation elle-même contient trop d’éléments ou d’effets, changer d’extension ne corrigera pas sa conception.

Pour un site avec plusieurs animations de marque, le format dotLottie peut faciliter la gestion. Tu peux centraliser plusieurs variantes au lieu de distribuer une collection de fichiers isolés. Pour une simple icône animée placée dans un bouton, le JSON peut rester parfaitement adapté.

Le choix doit donc partir de l’intégration prévue, pas d’un réflexe de nouveauté. Le dernier format à la mode n’est pas toujours celui qui simplifie le travail du développeur.

Le meilleur format n’est pas celui qui paraît le plus moderne dans la présentation. C’est celui que ton équipe peut charger, contrôler et maintenir sans te rappeler à 23 h 14.

Masques, rotations et effets complexes: là où ça casse

Les animations Lottie issues de Figma sont particulièrement efficaces lorsque les objets restent simples. Les ennuis apparaissent lorsque le prototype s’appuie sur des masques complexes, des rotations élaborées, des flous ou des modes de fusion spécifiques.

Certaines propriétés avancées de Figma peuvent présenter des problèmes de rendu lors de l’export direct. Il ne faut donc jamais considérer la prévisualisation comme une preuve définitive de compatibilité. Un rendu acceptable dans le plugin peut se comporter différemment une fois intégré dans le site, selon le lecteur utilisé, le navigateur ou la taille d’affichage.

La méthode la plus saine est de tester par paliers:

1. Exporte d’abord la structure sans les effets décoratifs.

2. Vérifie les positions, les tailles et les opacités.

3. Ajoute ensuite les rotations et les transformations.

4. Réintroduis les masques un par un.

5. Termine par les effets visuels les plus fragiles.

6. Compare le rendu Figma, la prévisualisation du plugin et le navigateur.

Si une animation devient instable après l’ajout d’un effet, tu sais au moins où chercher. Sans cette méthode, tu risques de supprimer au hasard des éléments jusqu’à obtenir un résultat approximatif. C’est une technique très répandue chez les freelances pressés. Elle s’appelle aussi perdre une demi-journée en silence.

Que faire lorsqu’un effet ne passe pas?

Tu as trois options, dans cet ordre:

• simplifier l’effet pour le conserver en vectoriel;
• remplacer l’effet par une combinaison d’opacité, de position ou de couleur;
• sortir cette séquence du flux Lottie et utiliser un autre format.

Par exemple, un flou complexe peut être remplacé par une forme semi-transparente ou par plusieurs couches très légères. Ce ne sera pas exactement le même rendu, mais l’animation sera souvent plus robuste. Un masque imbriqué peut être reconstruit avec une forme plus simple. Une rotation élaborée peut être divisée en plusieurs mouvements indépendants.

Ne transforme pas une contrainte technique en drame artistique. Une interface efficace n’a pas besoin de restituer chaque détail de ton fichier Figma. Elle doit transmettre le bon mouvement, au bon endroit, avec un coût raisonnable pour le site.

Intégrer l’animation Lottie dans un projet web

Une fois le fichier exporté, le travail n’est pas terminé. Il faut décider où l’animation apparaît, comment elle se déclenche et ce qu’elle fait lorsque l’utilisateur ne peut pas ou ne veut pas la regarder.

Les extensions et intégrations web permettent d’utiliser des animations Lottie dans des environnements modernes comme React JS ou au moyen de composants web personnalisés. L’intégration peut donc s’adapter à une application, une page marketing ou un système de composants.

Avant de transmettre le fichier au développeur, prépare un mini dossier d’intégration. Pas un roman. Quelques informations utiles:

• nom de l’animation;
• format livré;
• dimensions de référence;
• durée;
• déclencheur prévu;
• boucle ou lecture unique;
• état initial;
• comportement sur mobile;
• version statique de secours;
• effets éventuellement retirés pendant l’export.

Le déclencheur doit être clair. Une animation peut se lancer au chargement, à l’apparition dans la fenêtre, au survol, au clic ou après une action utilisateur. Chaque option modifie la perception de l’interface.

Une animation de chargement peut boucler. Une confirmation de formulaire doit probablement jouer une fois. Une illustration placée dans une page longue peut se lancer lorsqu’elle entre dans le champ de vision, plutôt que de consommer des ressources dès l’ouverture de la page.

Ne pas oublier les performances

Lottie est léger par nature lorsqu’il est utilisé pour ce qu’il sait faire: des animations vectorielles structurées. Cela ne veut pas dire qu’un fichier gigantesque devient léger par magie. Une illustration composée de centaines d’éléments, de transformations et d’effets peut rester coûteuse à afficher.

Pour garder une animation raisonnable:

• réduis le nombre de calques réellement animés;
• évite les détails invisibles à la taille d’affichage;
• supprime les éléments restés dans le fichier par erreur;
• limite les boucles permanentes;
• choisis une taille d’affichage cohérente;
• teste sur mobile, pas uniquement sur ton ordinateur de travail;
• prévois une image de remplacement si l’animation ne se charge pas.

La résolution vectorielle évolutive est l’un des intérêts majeurs du format. L’animation reste nette lorsqu’elle change de taille, contrairement à une vidéo ou à un GIF mal dimensionné. Mais cette souplesse ne dispense pas de penser au poids du fichier et au moment où il est chargé.

Un site n’est pas une planche Behance interactive. Chaque animation doit avoir une fonction: guider, confirmer, expliquer ou renforcer l’identité visuelle. Si elle ne fait rien de tout cela, elle est peut-être simplement là parce que le plugin permettait de l’exporter.

Le plan de livraison qui évite les allers-retours

Dans un projet client, le problème ne vient pas toujours de la technique. Il vient souvent du flou entre la maquette, le prototype et ce qui doit réellement être mis en ligne.

Pour cadrer la livraison, utilise une convention simple:

1. Une animation, un objectif

Ne livre pas un fichier nommé animation_finale_v7_dernier_export.lottie. Donne-lui un nom qui décrit son usage: logo-intro, formulaire-succes, menu-mobile-ouverture.

Le nom doit aider le développeur à comprendre où le fichier va, sans ouvrir cinq logiciels.

2. Un état de départ identifiable

Indique si l’animation commence visible, masquée, réduite ou déjà dans un état intermédiaire. Une animation qui démarre au mauvais moment peut donner l’impression que le site clignote ou que le composant est cassé.

3. Une règle de déclenchement

Précise si la lecture est automatique, contrôlée par le défilement, déclenchée par une action ou répétée en boucle. Le mot « animé » ne suffit pas. Il décrit un résultat, pas un comportement.

4. Une solution de secours

Prévois une image statique ou une version simplifiée. Cela protège les utilisateurs dont le navigateur ou le contexte d’affichage ne restitue pas correctement l’animation. C’est également utile pour les situations où l’animation est désactivée ou ne doit pas se lancer.

5. Une validation hors Figma

Demande une vérification dans le contexte réel: navigateur, largeur mobile, vitesse de connexion raisonnable, interaction clavier lorsque l’animation accompagne un composant d’interface. Une animation peut être parfaite seule et devenir gênante lorsqu’elle ralentit l’apparition d’un contenu essentiel.

Lottie doit servir le web, pas l’ego du prototype

L’export Figma vers Lottie est particulièrement intéressant pour les designers qui veulent transmettre des animations propres aux développeurs sans passer obligatoirement par Adobe After Effects. Le flux Figma, plugin, JSON ou dotLottie peut suffire pour de nombreuses micro-interactions et animations d’interface.

Mais il faut accepter une règle un peu moins flatteuse: tout ce qui est possible dans Figma n’est pas nécessairement pertinent dans Lottie. Les masques complexes, les effets avancés et les compositions surchargées demandent des tests ou une simplification. Ce n’est pas une faiblesse du processus. C’est le moment où le design rencontre enfin son support réel.

Si tu veux une intégration d’animation Lottie sur un site propre, commence donc par réduire l’ambition au bon endroit: moins d’effets gratuits, plus de structure, un nommage rigoureux et une vraie validation dans le navigateur. Exporte en JSON lorsque l’intégration est simple. Choisis dotLottie lorsqu’il apporte une organisation ou une compression utiles. Et ne livre jamais un fichier sans expliquer comment il doit se comporter.

Ton objectif n’est pas de prouver que Figma sait faire bouger une interface. Ton objectif est de donner au site une animation légère, lisible et maintenable. C’est moins spectaculaire qu’un prototype rempli d’effets. C’est aussi ce qui fonctionne après la mise en ligne.