Introduction : Figma Motion rebat les cartes, mais pour qui ?
Depuis l'annonce de Figma Motion à la Config 2026, une question circule dans les équipes design : faut-il désinstaller Jitter, Rive ou les plugins Lottie ?
Nous avons regardé le deep-dive officiel de Figma, un tutoriel complet, puis surtout un crash-test comparatif face à Rive pour trancher la question.
Verdict : Figma Motion ne remplace personne. Il redistribue les rôles — et ce guide compare les quatre outils sur le seul critère qui compte vraiment : que va devenir cette animation une fois créée ?
Figma Motion en pratique : ce qu'on peut faire sans quitter le canevas
Le principe est simple : un onglet Motion apparaît en bas de l'écran, une timeline classique s'ouvre, et chaque propriété animable affiche une petite icône de diamant.
Une timeline unique, volontairement simple
Nous posons une image clé sur la position, une autre sur l'opacité, et Figma calcule l'interpolation entre les deux. Le gizmo Mo permet de dessiner des trajectoires directement sur le canevas, sans toucher à un tableau de valeurs.
Chaque plan de travail ne possède qu'une seule timeline. Parfait pour une micro-interaction ou une transition d'écran, plus limitant dès que plusieurs animations doivent tourner en parallèle.
Auto-key, easing et le premier passage de l'IA
Le mode auto-key enregistre automatiquement chaque modification du canevas en image clé — proche du stop-motion, où l'on manipule l'objet pour raconter son histoire.
Les préréglages d'easing (ease-in-out-back, overshoot élastique) sortent l'animation de sa rigidité linéaire. L'agent Figma peut déjà générer un premier jet de keyframes à partir d'une phrase comme « fais voler ces éléments depuis les côtés ».
Pour un bouton qui apparaît, l'écart se voit immédiatement : une translation simple reste plate, un ease-in-out-back lui donne un léger rebond élastique qui capte l'œil. On peut aussi faire varier l'échelle en cours de route — un objet part à 100 %, descend à 50 % au milieu de sa course, puis revient à 100 % à l'arrivée — pour une impression de profondeur qu'une simple translation ne donne jamais.
Face à Rive : où s'arrête le design, où commence l'interactif
Pour trancher, un testeur a rejoué un même projet — l'application météo Weather Buddy — dans Figma Motion puis dans Rive. Le verdict technique est net.
Une timeline contre une state machine
Rive sépare nativement les axes X et Y, et gère plusieurs animations indépendantes en parallèle. Le tout est piloté par une State Machine qui réagit aux données en direct.
Figma Motion, lui, combine X et Y par défaut — il faut activer separate dimensions pour les dissocier. Il empile aussi tout sur une seule piste de temps : résultat, plus proche d'un format Lottie amélioré que d'un moteur d'interactivité.
Le détail technique est révélateur : pour un simple effet de reflet sur une paire de lunettes, il faut dupliquer le groupe pour fabriquer un masque, alors que Rive gère cette logique nativement. Un signe que Figma Motion reste pensé pour l'artboard, pas encore pour la scène interactive.
L'IA génère des keyframes, l'IA de Rive génère du code
Demandez à l'IA de Figma Motion un clignement d'yeux : elle pose des images clés, sans réorganiser la timeline autour. Fonctionnel, mais un peu brouillon.
L'IA de Rive, elle, écrit un vrai script. Pour un effet de neige animé, elle génère du code qui gère des centaines de particules. Résultat : température à 105° → interface mise à jour instantanément via le data binding.
La conclusion du testeur : Figma Motion est la porte d'entrée vers le mouvement, Rive reste l'outil de ceux qui veulent transformer un design en produit interactif — voir notre comparatif Rive contre Lottie pour aller plus loin.
Face à Jitter : la rapidité du navigateur contre l'intégration native
Jitter joue une autre carte : tout se passe dans le navigateur, sans ouvrir Figma. On importe un design, on pose des animations depuis une bibliothèque de préréglages, et on exporte en MP4 ou GIF en quelques minutes.
C'est l'outil le plus rapide pour un motion marketing léger — mockup produit, post social, démonstration client — quand l'animation ne doit jamais revenir dans le fichier de design source.
Figma Motion garde l'avantage inverse : rester dans le même fichier que les composants et variables, sans exporter puis réimporter à chaque itération.
Le workflow classique : on dessine l'interface dans Figma, on l'ouvre dans Jitter, puis on glisse chaque calque sur la timeline pour lui assigner une entrée, une sortie ou une boucle. Pas de courbe d'apprentissage façon After Effects — c'est justement ce qui a fait le succès de l'outil auprès des équipes marketing.
Face à Lottie : l'export léger pour le web et le mobile
Lottie n'est pas un éditeur, mais un format (JSON/dotLottie) que les développeurs déposent directement dans une app iOS, Android ou un site, sans vidéo lourde à charger.
Figma Motion n'exporte pas encore nativement vers Lottie. Il faut passer par des plugins communautaires comme le plugin officiel LottieFiles pour convertir les keyframes natifs en fichier compatible.
L'origine du format remonte au plugin Bodymovin pour After Effects : il encode un vecteur animé en JSON, sans pixel ni frame vidéo à décoder. Résultat, un poids minuscule comparé à un MP4, un rendu net à toute résolution, et un playback pilotable en code (vitesse, pause, couleur) une fois livré dans l'application.
Le mot d'ordre de l'écosystème résume bien la répartition des rôles : Figma Motion conçoit, Lottie livre en production.
Le vrai critère de choix : qu'allez-vous faire de cette animation ?
Avant de choisir un outil, une seule question compte : où cette animation va-t-elle vivre ? Doit-elle réagir à autre chose qu'un simple lecteur vidéo ?
- Micro-interaction ou transition d'écran, sans quitter le fichier de design → Figma Motion
- Interface qui réagit à des données en direct ou à l'utilisateur (jeu, app, dashboard) → Rive
- Vidéo ou GIF marketing à produire vite, sans dépendance au fichier design → Jitter
- Animation à livrer en production web/mobile, légère et sans lecteur vidéo → Lottie
Beaucoup d'équipes finissent d'ailleurs par cumuler deux outils : Figma Motion pour spécifier l'intention, Rive ou Lottie pour l'exécution en production.
Conclusion : quatre outils, une seule frontière qui bouge
Figma Motion ne tue aucun des trois autres. Il déplace la frontière : ce qui exigeait un aller-retour vers un outil tiers se règle désormais dans le fichier Figma, pour les cas simples.
Pour tout le reste — interactivité pilotée par données, production vidéo rapide, export multiplateforme léger — Rive, Jitter et Lottie gardent une avance que la Config 2026 n'a pas comblée.
Liens pratiques
Cet article de synthèse est basé sur les vidéos :
- Figma Motion et IA : comment le mouvement transforme le futur du design d'interface
- Maîtriser Figma Motion : du keyframing à l'IA pour révolutionner vos animations d'interface d'utilisateur
- Figma Motion face à Rive : quel outil choisir pour vos animations d'interface interactives
Articles générés via Vidiome, puis fusionnés et enrichis.
