Lancement de Figma Motion : votre plan de travail a désormais une chronologie
Le mouvement est désormais disponible sur le plan de travail, dans le même fichier que vos composants, vos variables et votre équipe, pour que vos designs prennent vie dès le premier jour.
Partager Lancement de Figma Motion : votre plan de travail a désormais une chronologie
Instantané client : Atlassian
Pour Atlassian, le mouvement sur le plan de travail a éliminé les obstacles qui peuvent empêcher sa finalisation. « Les illustrations animées ne sont plus la production d'un spécialiste mais une capacité du système », souligne Alexandra Pereira, Senior Product Designer. Le Dev Mode et la possibilité de commenter sur la chronologie permettront des échanges fluides. »
Les designers moins à l'aise avec les fonctionnalités de mouvement ont à leur disposition un agent qui les guide à travers les bases. « J'animais une bannière, et j'ai demandé à l'agent de me faire des suggestions sur ce qui fonctionnait et ce qui ne fonctionnait pas », indique le Lead Product Designer Davy Fung. Cela aide à démystifier le mouvement pour tout le monde, précise Maxwell Hathaway, Lead Motion Designer : « On voit les choses bouger très rapidement, et cet accès va aider à s'y mettre plus rapidement. »
Lorsqu'il est bien fait When you’re designing motion, you’re designing with time. Understanding the mechanics turns movement into meaning.Principles in motion
À partir d'aujourd'hui, le mouvement est natif sur le même plan de travail que le reste de vos designs. Le mouvement n'est plus un goulot d'étranglement ou le travail d'une seule personne. Tout designer peut désormais inviter l'agent Figma à créer du mouvement directement sur la nouvelle chronologie d'animation, permettant à chacun de créer et repoussant les limites du possible. Et avec l'accès au Dev Mode et les fonctionnalités, toute l'expérience est conçue pour un transfert de design beaucoup plus fluide.
Concevez et animez dans le même fichier
Les styles d’animation personnalisés seront bientôt disponibles, vous pourrez donc bientôt créer et sauvegarder les vôtres.
En plus des modes Design, Draw et Dev, Motion est le nouveau calque d'une expérience connectée sur le plan de travail. Basculez n'importe quel frame en mode Motion, et la chronologie apparaît à côté de votre design.
- Contrôle de la chronologie : faites glisser les calques pour ajuster le timing ; balayez pour afficher un aperçu à tout moment ; positionnez, redimensionnez, faites pivoter et définissez l'opacité des keyframes de manière indépendante. Activez l'enregistrement automatique pour capturer chaque modification que vous effectuez pendant le déplacement de la tête de lecture. Les commentaires liés au timing sur le plan de travail permettent à tous de pointer un moment spécifique de l'animation, impliquant ainsi toute l'équipe dans le passage en revue du mouvement.
- Styles d'animation : ajoutez des styles d'animation prédéfinis (fondu, déplacement, mise à l'échelle) pour une application rapide, puis continuez à peaufiner votre création sur le plan de travail. Vous pouvez empiler les styles d'animation sur la chronologie pour une application simultanée ou les faire glisser pour les séquencer.
Le design atomique est désormais le design atomique en mouvement car j'ai des keyframes sur le plan de travail. C'est le dernier élément majeur dans le monde interactif.
Instantané client : Adanna Onuekwusi
Pour la designer de produits et illustratrice Adanna Onuekwusi, le mouvement a toujours été un moyen d'apporter de la joie et de l'émotion dans son travail. Mais jongler entre des outils externes, des plugins basés sur le navigateur et Figma pour animer une seule illustration était synonyme de changements de contexte constants. Le mouvement directement accessible sur le plan de travail change tout. « Avoir tout dans un seul espace est vraiment utile, souligne-t-elle. Je peux systématiser le processus de mouvement et le publier en tant que bibliothèque ; d'autres peuvent ainsi bénéficier directement de ce que j'ai créé. »
Construisez un système de mouvement pour tous vos fichiers
Un bon mouvement n'est pas une collection d'animations ponctuelles. C'est un ensemble de valeurs définies une fois et appliquées partout. Mais la plupart des équipes n'ont jamais eu un endroit pour construire ce système, donc le mouvement est recréé à partir de zéro à chaque sprint, et ce qui est livré reflète le travail de celui qui avait du temps, pas ce qui a été conçu.
- Composants animés : les composants sont l'unité fondamentale d'un design system. Désormais, ils intègrent également le mouvement. Une fois que vous avez créé une animation pour un composant, celle-ci se déplace avec ce composant sur chaque écran et dans chaque fichier collaborateur, de la même manière que le remplissage et la typographie.
- Variables de mouvement : les variables de mouvement vous permettent de personnaliser cette animation. Créez une variable d'easing, définissez plusieurs modes pour cette variable et appliquez-la à vos animations. Changez le mode au niveau de la page, et chaque animation faisant référence à cette variable se met à jour en même temps.
Si c'est une chose avec laquelle vous interagissez tous les jours, le logiciel doit vous faire ressentir quelque chose. Le mouvement est un autre chemin pour donner vie à cela.
Effets de nuancier et mouvement
Chaque propriété qu'un nuancier expose peut maintenant être animée sur la chronologie d'animation. Traditionnellement, les propriétés animables de Figma étaient limitées. Les nuanciers changent cela : tout ce que vous pouvez contrôler avec un curseur ou un champ de saisie, vous pouvez désormais l'animer avec des keyframes au fil du temps.
Transformations 3D bientôt disponibles
Le mouvement et les transformations 3D font partie de la même décision de design. Quand vous pensez à comment quelque chose se déplace, vous pensez à où il se trouve dans l'espace.
Avec les transformations 3D, vous pourrez faire pivoter des frames, des vecteurs et du texte sur l'axe z avec des commandes natives et un aperçu en direct pendant que vous faites glisser les éléments. Chaque transformation reste entièrement éditable. Le résultat s'exporte en CSS et se connecte via MCP, le design spatial que vous construisez est ainsi le design spatial qui se retrouve dans le code. Combinez la transformation 3D avec le mouvement dans le même fichier pour prototyper des interactions spatiales qui n'étaient pas possibles dans Figma auparavant.
Allez plus loin avec l'agent Figma
Le mouvement est techniquement exigeant. Pour un designer qui n'a jamais animé auparavant, l'agent Figma À partir d'aujourd'hui, vous pouvez travailler avec un agent conçu pour Figma, directement sur le plan de travail.L'agent Figma Design est disponible
Un designer déjà à l'aise avec l'animation voit ainsi les tâches répétitives automatiquement gérées et peut se concentrer sur le peaufinage et les détails. Ajustez la courbe d'easing ou le timing, ajoutez une propriété, ou supprimez le mouvement et repensez-le. Vous pouvez exécuter plusieurs prompts en même temps, ce qui vous permet de rester dans votre flux pendant que l'agent s'attaque à différents frames.
La capacité de génération en tenant compte des garde-fous est essentielle pour les systèmes d'entreprise. Cela assure une cohérence, une accessibilité et une qualité d'implémentation, en plus de la rapidité.
Livrez le mouvement que vous avez conçu
Le mouvement en production ne correspond que rarement exactement à ce qui a été conçu. Les détails qui ont pris des heures à calibrer, comme l'easing et le timing, se perdent dans la traduction entre le fichier et le code. Figma comble cet écart avant même d'atteindre ce transfert. Sélectionnez n'importe quel frame animé et exportez-le en MP4, GIF, SVG ou WEBM directement depuis le fichier, pour obtenir un alignement et des entrées précoces.
Lorsque le fichier est en ready for dev, passez en Dev Mode et ouvrez l'onglet Motion. La chronologie complète est visible et peut être inspectée. Chaque valeur de timing, courbe d'easing et keyframe est lisible sans nécessiter d'interprétation par le développeur. Le code d'animation peut être copié directement depuis le panneau en CSS, JSON ou React prêt pour le framework et motion.dev.
Motion est également compatible MCP Figma’s MCP server brings your design decisions into the tools where code gets written—so what gets built actually matches what was designed. Here’s what that unlocks for everyone who builds products.
The TL;DR on MCP: Why context matters and how to put it to work
Si un membre de l'équipe peut facilement inspecter et traduire le mouvement dans des formats dont nous avons besoin, cela réduit l'écart entre l'intention et la livraison.
L'animation n'est plus une étape de finalisation ou un risque de périmètre. Le mouvement traverse désormais le processus de design de la même manière que tout le reste : du premier frame au build final, en un seul endroit.
Motion est en version bêta ouverte. Les utilisateurs du forfait de base peuvent accéder à Motion avec des exportations limitées. Les utilisateurs Licence Full sur tous les forfaits peuvent accéder aux fonctionnalités de base du mouvement et aux exportations. Une intégration complète du design system et l'agent Figma pour le mouvement sont disponibles sur les forfaits payants.
Découvrez les principes d'un design de mouvement efficace et tentez l'expérience de la création d'animations dans Figma Motion. Essayez Motion dans notre fichier bac à sable ou commencez dans le centre d'aide. Inscrivez-vous ici pour rejoindre la liste d'attente pour les transformations 3D.
Lisez le récapitulatif de Config par Dylan Field, CEO et cofondateur de Figma, ici.
