Une animation d'interface se perd presque toujours entre la maquette et le code. Le designer règle une courbe d'accélération au centième de seconde, le développeur la recopie « à l'œil », et ce qui part en production ne ressemble qu'à moitié à ce qui avait été validé. Figma Motion, la timeline d'animation de Figma en bêta ouverte depuis le 24 juin 2026, attaque ce problème par un bout. Le serveur MCP de Figma, qui transmet ces animations à un agent de code comme Claude Code, l'attaque par l'autre.
Cet article décrit le circuit complet au 8 octobre 2026 : ce que l'agent reçoit vraiment, comment l'installer, le pas-à-pas d'une première animation, ce qui ne passe pas encore, et ce que cela coûte. Sources : l'annonce et les notes de version de Figma, la documentation développeur du serveur MCP, sa page de tarifs et les skills officielles que Figma publie sur GitHub. Quatrième article de notre série, après le guide Claude Code et motion design, le tutoriel Remotion et le comparatif HyperFrames vs Remotion.
La réponse en 30 secondes
Côté Figma : le designer anime
- une timeline dans le même fichier que les maquettes ;
- images clés de position, échelle, rotation et opacité, styles d'animation prêts à l'emploi ;
- export vidéo (MP4, WebM), GIF, SVG et, depuis le 30 septembre, Lottie ;
- code copiable en CSS, JSON ou React avec motion.dev depuis Dev Mode.
Côté Claude Code : l'agent implémente
- on lui colle le lien d'un cadre animé, il lit la structure puis le mouvement ;
- l'outil
get_motion_contextlui donne les images clés, les courbes et du code déjà calculé ; - il fusionne les deux dans les composants de votre projet ;
- le serveur MCP est gratuit pendant sa bêta, mais plafonné selon votre licence Figma.
Figma Motion en octobre 2026 : ce qui existe vraiment
Motion est un mode de Figma Design, au même titre que Draw ou Dev Mode. On bascule un cadre en mode Motion et une timeline apparaît sous la maquette. On y fait glisser les calques pour régler leur timing, on fait défiler la tête de lecture pour prévisualiser n'importe quel instant, et on pose des images clés de position, échelle, rotation et opacité, indépendamment les unes des autres. Les commentaires peuvent viser un instant précis de l'animation, ce qui change la façon de faire relire un mouvement.
Trois briques en font autre chose qu'un gadget de présentation. Les composants animés : l'animation voyage avec le composant dans tous les fichiers, comme sa couleur ou sa typographie. Les variables de motion : une courbe d'accélération définie une fois, avec des modes, qui met à jour toutes les animations qui la référencent. Et l'agent Figma, qui pose de vraies images clés sur la timeline à partir d'une consigne écrite.
La mise à jour du 30 septembre 2026 a ajouté les styles d'animation personnalisés (enregistrés, combinés, publiés en bibliothèque), l'audio sur la timeline avec export en MP4 et WebM, l'animation du texte par caractère, mot ou ligne, et l'export Lottie et dotLottie. La note de version précise que ces styles peuvent être appliqués par les agents de code via MCP. Les transformations 3D, annoncées en juin avec une liste d'attente, n'apparaissent pas dans les notes de version à la date de cet article. Et l'ensemble reste en bêta ouverte.
Le circuit : de la timeline au composant
Le point clé est dans l'étape 2. Le serveur MCP ne fournit pas l'animation en un bloc : get_design_context décrit la structure (hiérarchie, tailles, styles, ressources, composants reliés), par défaut en React avec Tailwind, et get_motion_context décrit le mouvement. Selon la documentation, ce second outil renvoie l'inventaire des calques animés, les pistes d'images clés avec leurs courbes, des extraits de code CSS @keyframes et motion.dev déjà calculés, et des indications de coordination entre calques qui bougent ensemble. Avec l'option recursive: true, il couvre tous les descendants d'un cadre en un seul appel, dans la limite de 500 calques selon la skill de Figma.
La skill officielle figma-implement-motion, livrée avec le plugin Figma pour Claude Code, le dit sans détour : les deux réponses sont liées par l'identifiant de calque, « et c'est tout le flux de travail ». L'agent part de la liste des calques animés, retrouve chacun dans la structure, et y greffe le mouvement. Elle impose aussi de reprendre les valeurs de timing et de courbe telles quelles, sans les recalculer, parce qu'une courbe personnalisée ou un effet ressort perd sa fidélité à chaque réinterprétation. C'est exactement le problème que le circuit est censé résoudre.
Installer le serveur MCP de Figma dans Claude Code
Figma recommande son serveur distant, hébergé à l'adresse https://mcp.figma.com/mcp, qui ne demande pas l'application de bureau et offre le plus de fonctions. Un serveur local existe aussi, via l'application de bureau, mais il est réservé aux licences Dev ou Full des offres payantes et vise surtout des besoins d'entreprise.
| Étape | Commande ou action | À savoir |
|---|---|---|
| Voie recommandée | claude plugin install figma@claude-plugins-official |
Installe le serveur MCP et les skills Figma, dont celles dédiées au motion |
| Voie manuelle | claude mcp add --transport http figma https://mcp.figma.com/mcp |
Serveur seul, sans les skills ; limité au projet courant par défaut |
| Pour tous vos projets | Ajouter --scope user à la commande manuelle |
Évite de réinstaller le serveur dans chaque dépôt |
| Connexion | Relancer Claude Code, taper /mcp, choisir figma, puis Authenticate |
Connexion OAuth avec votre compte Figma ; l'agent ne voit que les fichiers auxquels vous avez accès |
Préférez le plugin : la différence tient aux skills. Ce sont des consignes que l'agent charge pour savoir quels outils appeler, dans quel ordre, et quels pièges éviter. Sans elles, Claude Code dispose des mêmes outils mais doit deviner la méthode. Si vous découvrez l'outil, notre prise en main de Claude Code couvre l'installation de base.
Pas à pas : une première animation d'interface
Prenons un cas courant : la carte « nouveauté » d'un tableau de bord, qui glisse et apparaît en fondu à l'ouverture, avec son badge qui grossit légèrement juste après.
1. Préparer le cadre dans Figma. Nommez les calques de façon explicite, utilisez les composants et variables de votre bibliothèque, et animez dans un cadre de taille raisonnable. La documentation de Figma déconseille de sélectionner des cadres trop lourds : la réponse du serveur grossit d'autant et l'agent s'y perd.
2. Animer. Basculez le cadre en mode Motion, appliquez un style « fondu » et « déplacement » à la carte, puis une image clé d'échelle sur le badge, décalée de quelques dixièmes de seconde. Si votre équipe a défini une variable de courbe d'accélération, utilisez-la plutôt qu'une courbe saisie à la main.
3. Copier le lien. Clic droit sur le cadre, puis « Copy link to selection ». Le serveur distant fonctionne par lien : l'agent n'ouvre pas la page, il en extrait l'identifiant du fichier et celui du calque.
4. Donner la consigne à Claude Code. Dans le dépôt de votre application, collez le lien avec une consigne précise :
Exemple de consigne
« Implémente l'animation de ce cadre Figma dans src/components/NewsCard.tsx : [lien]. Récupère d'abord la structure, puis le contexte de motion. Réutilise nos composants existants et la bibliothèque d'animation déjà présente dans le projet. Respecte prefers-reduced-motion. Ne modifie aucune autre animation. »
5. Laisser l'agent fusionner. Il appelle get_design_context, puis get_motion_context sur le même calque. Sur un projet React sans bibliothèque d'animation, il reprend l'extrait motion.dev ; sur un site sans React, l'extrait CSS. Si le projet utilise déjà une autre bibliothèque, la skill lui demande de s'y adapter plutôt que d'en ajouter une.
6. Vérifier dans le navigateur. C'est la règle la plus utile de la skill : « s'affiche sans erreur » ne veut pas dire « s'affiche correctement ». Rechargez la page, regardez une boucle complète, vérifiez que chaque élément bouge au moment prévu, puis activez la réduction des animations dans votre système pour contrôler l'état de repos. Validez une animation avant d'en enchaîner vingt.
7. Relire et livrer. Faites relire le résultat par le designer, idéalement en regard de l'export vidéo du cadre, puis versionnez. Si plusieurs éléments partagent la même animation à un décalage près, vérifiez que l'agent l'a factorisée au lieu de la recopier : la skill l'exige, mais c'est le genre de détail qui se contrôle.
Ce qui passe, ce qui ne passe pas encore
La skill de Figma tient une liste des fonctions sans traduction propre en code, avec une mise en garde : elle date d'un instant donné, et si l'outil renvoie un extrait pour une fonction réputée non prise en charge, c'est l'outil qui fait foi. Au 8 octobre 2026 :
| Élément animé | Passage au code via MCP | Solution de repli |
|---|---|---|
| Position, échelle, rotation, opacité | Oui, avec extraits CSS et motion.dev | Aucune nécessaire |
| Tracé progressif d'un trait (cas courants) | Oui, cas simples ; les réglages mixtes passent mal | Garder le SVG et simplifier l'effet |
| Transitions entre variantes (Smart Animate) | Non : autre circuit de données, pas encore intégré | États gérés dans le code avec une transition courte |
| Masque lui-même animé | Non | Animer le contenu, garder le masque fixe, ou passer par la vidéo |
| Arcs, effets de shader | Mouvement exporté, rendu visuel du shader non | Export vidéo depuis Figma |
| GIF ou SVG animé | Non par le MCP | Export manuel depuis Figma, ou Lottie |
La ligne qui compte le plus pour une équipe produit est la troisième. Beaucoup d'interfaces « animées » dans Figma reposent sur des transitions entre variantes de composants. Celles-là ne passent pas par get_motion_context à ce jour : la skill demande à l'agent de les recoder comme des états et de le signaler. Si votre prototype en dépend, prévoyez-le dans l'estimation.
Dans l'autre sens : Claude Code qui anime dans Figma
Le serveur MCP sait aussi écrire. L'outil généraliste use_figma crée et modifie des cadres, des composants et des variables, et une seconde skill, figma-use-motion, l'étend aux images clés, aux styles d'animation, aux courbes et à la durée de la timeline. Concrètement, Claude Code peut animer une maquette existante à partir d'une consigne, ce que fait aussi l'agent intégré à Figma.
Trois réserves, toutes écrites dans la skill elle-même. L'accès n'est pas ouvert à tous les comptes : si les fonctions motion sont refusées, l'agent doit s'arrêter au lieu de réessayer. Une capture d'écran ne montre que l'état de repos, jamais le mouvement : pour vérifier, l'agent doit demander un rendu vidéo côté Figma, lent et coûteux, de quelques secondes à plusieurs minutes. Enfin, l'écriture dans le canevas est, comme le reste du serveur, gratuite pendant la bêta mais appelée à devenir payante à l'usage.
Pour une PME, ce sens inverse sert surtout à préparer des variantes à faire trancher par un designer, pas à remplacer son regard. C'est la même logique que pour Claude Design : l'IA propose vite, l'humain choisit.
Ce que cela coûte : deux compteurs à surveiller
Figma Motion est, selon la page de tarifs française, disponible avec les licences Full. L'annonce de juin était plus nuancée : accès avec exports limités sur l'offre gratuite, primitives et exports complets pour les licences Full de toutes les offres, composants animés, variables de motion et agent réservés aux offres payantes. Côté code, le serveur MCP a ses propres quotas d'appels, qui dépendent de l'offre et de la licence.
| Offre Figma | Licence Full (designer) | Licence Dev (développeur) | Appels MCP, licences Dev ou Full |
|---|---|---|---|
| Gratuite | — | — | 20 par mois |
| Professionnel | 16 €/mois (annuel), 20 € (mensuel) | 12 €/mois (annuel), 15 € (mensuel) | 200 par jour, 10 par minute |
| Organisation | 55 €/mois (annuel) | 25 €/mois (annuel) | 200 par jour, 15 par minute |
| Entreprise | 90 €/mois (annuel) | 35 €/mois (annuel) | 600 par jour, 20 par minute |
Prix par licence affichés sur figma.com/fr-fr/pricing et quotas de la documentation développeur, relevés le 8 octobre 2026. Les licences View et Collab sont limitées à 20 appels MCP par mois sur toutes les offres.
Premier compteur : les appels MCP. Le déroulé recommandé consomme au moins deux appels de lecture par animation (structure, puis motion), souvent un troisième pour une capture. Avec 20 appels par mois, l'offre gratuite suffit à tester sur quelques cadres, pas à travailler. Un développeur en licence Dev sur l'offre Professionnel dispose de 200 appels par jour, ce qui couvre largement l'usage d'une petite équipe. La documentation prévient que ce service gratuit en bêta deviendra payant à l'usage, sans date ni tarif publiés.
Second compteur : les crédits d'IA. Chaque licence inclut un volume mensuel de crédits (3 000 pour une licence Full en Professionnel, 500 pour une licence Dev). Depuis le 6 octobre 2026, date de sortie de bêta de l'agent Figma, celui-ci consomme ces crédits. Faire animer une maquette par l'agent de Figma et la faire implémenter par Claude Code, ce sont donc deux consommations distinctes, en plus de votre abonnement à Claude. Avant de généraliser, posez les données d'entrée et de sortie de ces outils dans votre politique d'usage : c'est l'objet de notre article sur Claude en entreprise et la sécurité des données.
Figma Motion, Remotion ou HyperFrames ?
Figma Motion + MCP
Pour animer une interface : micro-interactions, apparitions, états de chargement. Le livrable est du code dans votre application, conçu par un designer.
Remotion
Pour produire des vidéos en React, paramétrées et en volume. Licence payante dès 4 personnes.
HyperFrames
Pour produire des vidéos en HTML, avec des recettes prêtes à l'emploi. Open source Apache 2.0.
Les trois ne se concurrencent qu'en apparence. Figma Motion sait exporter un MP4, mais sa vraie valeur est le passage au code d'une interface. Remotion et HyperFrames, détaillés dans notre comparatif, servent à fabriquer des vidéos. Une équipe produit peut très bien utiliser Figma Motion pour son application et HyperFrames pour la vidéo de lancement qui la présente.
Questions fréquentes
Comment relier Figma Motion à Claude Code ?
Installez le plugin Figma avec la commande claude plugin install figma@claude-plugins-official, authentifiez-vous avec /mcp, puis collez dans Claude Code le lien d'un cadre animé. L'agent lit la structure avec get_design_context, puis l'animation avec get_motion_context, et l'implémente dans vos composants.
Que renvoie l'outil get_motion_context ?
La liste des calques animés, leurs pistes d'images clés avec les courbes d'accélération, des extraits de code CSS @keyframes et motion.dev déjà calculés, et les groupes de calques qui partagent une même timeline, avec leur durée et leur mode de boucle.
Le serveur MCP de Figma est-il gratuit ?
Il est gratuit pendant sa bêta, mais plafonné : 20 appels par mois sur l'offre gratuite ou avec une licence View ou Collab, 200 par jour avec une licence Dev ou Full en Professionnel ou Organisation, 600 par jour en Entreprise. Figma annonce qu'il deviendra payant à l'usage, sans date ni tarif publiés au 8 octobre 2026.
Les transitions Smart Animate passent-elles dans le code ?
Pas encore par le serveur MCP. Les transitions entre variantes de composants suivent un autre circuit de données, que la skill officielle de Figma déclare non intégré. L'agent doit les recoder comme des états avec une transition courte et le signaler.
Claude Code peut-il créer une animation directement dans Figma ?
Oui, avec l'outil use_figma et la skill figma-use-motion, qui posent images clés, styles d'animation et courbes. Mais ces fonctions ne sont pas ouvertes à tous les comptes, et une capture ne montre que l'état de repos : vérifier le mouvement demande un rendu vidéo côté Figma, plus lent.
En résumé
Figma Motion donne aux designers une timeline dans le fichier même de la maquette ; le serveur MCP de Figma donne à Claude Code la structure et le mouvement, liés par l'identifiant de calque, avec du code déjà calculé. Le circuit tient ses promesses sur les animations simples, qui sont l'essentiel d'une interface, et bute encore sur les transitions entre variantes, les masques animés et les effets de shader. Il est en bêta des deux côtés, gratuit côté MCP mais plafonné, et l'agent de Figma consomme désormais des crédits. Testez-le sur un composant, avec un designer et un développeur dans la boucle, avant d'en faire une méthode d'équipe. Dernier épisode de la série : le motion design par IA dans une PME, ses coûts et quand garder un motion designer. Pour cadrer ces usages, découvrez nos missions de stratégie IA ou contactez-nous.
