Figma Motion est un mode d'animation intégré à Figma: vous basculez un cadre en Motion, une timeline se déploie sous la maquette et vos calques s'animent par images clés, presets ou courbes d'accélération. Dévoilé sur la scène de Config, la conférence annuelle de Figma, il fonctionne en bêta ouverte sur toutes les formules, gratuite comprise. Les designers produit y fabriquent des animations exportables en vidéo, en GIF ou directement en code.
Figma Motion s'active depuis la barre d'outils, aux côtés des modes Design, Draw et Dev: la timeline apparaît en bas de l'écran et chaque calque s'anime en position, taille, rotation et opacité. Les styles fournis (Fade, Move, Scale, Rotate...) s'empilent ou s'enchaînent par glisser-déposer.
Pour aller plus loin, vous posez vos images clés à la main ou activez l'auto-keyframe, qui enregistre vos manipulations pendant que la tête de lecture avance (un mode étonnamment addictif, prévoyez de la marge dans votre planning). Courbes de Bézier, ressorts et perspective 3D affinent ensuite le mouvement.
L'agent de Figma fait le reste: vous tapez « fais rebondir le logo puis estompe-le », il place les keyframes sur la timeline, et vous corrigez le tempo à la main.
Chaque animation créée dans Figma Motion s'appuie sur du vrai code: en Dev Mode, la timeline s'inspecte en lecture seule et se copie en CSS, JSON ou React, valeurs d'easing comprises.
Les équipes qui travaillent avec des assistants de code récupèrent aussi le contexte d'animation via le serveur MCP de Figma. Pour tout le reste, l'export classique répond présent:
| Sortie | Formats | Usage typique |
|---|---|---|
| Code | CSS, JSON, React | intégration par les développeurs |
| Vidéo | MP4, WebM | démos produit, réseaux sociaux |
| Image animée | GIF, SVG animé | sites, e-mails, documentation |
| Dev Mode | timeline en lecture seule | inspection des valeurs et du timing |
Figma Motion ne coûte rien pendant sa bêta ouverte, sur toutes les formules. Trois fonctions demandent toutefois un siège Full payant: la publication de composants animés, la génération par l'agent et l'export vidéo haute résolution. Le plan Professional démarre autour de 16 $ par éditeur et par mois en facturation annuelle. Ces conditions bougeront sans doute à la sortie de bêta; la page tarifs de Figma fait foi.
Côté francophone, l'aide officielle reste en anglais, mais les tutoriels en français ont fleuri sur YouTube dès les premiers jours. Notez enfin que l'outil n'est pas disponible sur les formules Figma for Government.
Oui, pendant la bêta ouverte, Figma Motion est accessible sur toutes les formules, y compris la gratuite, dès que vous pouvez modifier un fichier. Trois fonctions restent liées à un siège Full payant: la publication de composants animés, la génération par l'agent et l'export vidéo haute résolution.
Pour l'animation d'interface, oui dans la plupart des cas: survols, loaders, transitions et composants animés se font désormais dans Figma. Pour les effets spéciaux, les particules ou l'animation de personnages, After Effects et Rive gardent l'avantage, et beaucoup d'équipes combinent les deux.
Pas encore. Figma indique que le format Lottie figure sur sa feuille de route, sans date annoncée. En attendant, les exports couvrent MP4, GIF, WebM et SVG animé côté médias, plus CSS, JSON et React côté code.
Durant la bêta, non: générer des animations avec l'agent Figma n'entame pas votre quota de crédits IA. Figma prévient toutefois que cette génération en consommera à terme, une fois la bêta terminée. Un siège Full payant reste requis pour y accéder.
Verdict : Un loader, un survol de bouton, un logo qui rebondit: tout cela se règle désormais dans le fichier de design lui-même. Les VFX lourds passeront encore par un logiciel dédié, mais pour l'animation d'interface au quotidien, les équipes produit installées dans Figma sont les premières servies.
Hostinger AI Hub 
Canva AI 
Emergent AI 
