Figma Motion

Figma Motion

Figma Motion ajoute une ligne de temps d'animation native à la même toile Figma où vos composants, variables et équipe travaillent déjà. Les designers passent un cadre en mode Motion pour définir des images clés de position, échelle, rotation et opacité sans avoir à exporter vers un outil de mouvement séparé.

Des styles d'animation prédéfinis comme fondu, déplacement et mise à l'échelle offrent un point de départ rapide, tandis que l'agent Figma peut créer des images clés à partir d'invites. Les composants animés et variables de mouvement permettent aux équipes de publier des systèmes de mouvement réutilisables qui se mettent à jour dans tous les fichiers lorsque les modes changent.

Figma Motion est en bêta ouverte pour les équipes de conception et de développement qui souhaitent des livrables prêts pour la production. Dev Mode expose la ligne de temps complète, et les développeurs peuvent copier du code CSS, JSON, React ou motion.dev ou partager du contexte via le serveur Figma MCP.

Fonctionnalités principales:
  1. Position, échelle, rotation et opacité des images clés sur la timeline du canevas

  2. L'agent Figma crée des animations à partir des instructions directement sur la timeline

  3. Les composants animés conservent le mouvement dans tous les fichiers qui les utilisent

  4. Exporter les images animées en MP4, GIF, SVG ou WebM depuis le fichier

  5. Le mode Dev copie le code d'animation CSS, JSON, React ou motion.dev

Pros:
  1. Le mouvement vit dans le même fichier que les composants et variables, permettant aux revues de rester contextuelles.

  2. Le transfert en mode développement inclut un minutage lisible, un easing, et du code de production copiable.

  3. Les variables de mouvement avec modes mettent à jour les animations à travers un fichier lorsqu'elles sont changées.

Cons:
  1. Toujours en bêta ouverte, donc des limites d'exportation s'appliquent sur le plan Starter et certaines fonctionnalités arrivent bientôt.

  2. L'intégration complète du système de design et l'agent de mouvement nécessitent un plan Full payant.

FAQ:

Figma Motion est-il en version bêta ?

Oui. Figma Motion est en bêta ouverte. Les utilisateurs Starter peuvent accéder aux animations avec des exports limités, tandis que les utilisateurs avec siège complet sur tous les plans peuvent accéder aux primitives de motion et à l'exportation. L'intégration complète du système de design et l'agent Figma pour le motion sont disponibles sur les plans payants.

Quels plans Figma incluent Figma Motion ?

La bêta de Figma Motion est disponible pour les sièges complets. La page tarifaire de Figma liste la timeline motion, la création de systèmes motion, l'export d'animations et la passation en Dev Mode sous les fonctionnalités Figma Motion (Beta) associées aux plans avec sièges complets.

Les développeurs peuvent-ils inspecter les animations dans Figma Motion ?

Oui. En Dev Mode, les développeurs peuvent ouvrir l'onglet Motion pour inspecter la timeline complète, lire les valeurs de timing et les courbes d'easing, et copier le code d'animation aux formats CSS, JSON, React ou motion.dev.

Figma Motion prend-il en charge les animations shader ?

Oui. Le post de lancement de Figma indique que chaque propriété exposée par un shader peut être animée (keyframée) sur la timeline motion, élargissant ainsi les propriétés animables au-delà des attributs de design classiques.

Puis-je exporter des vidéos depuis Figma Motion ?

Oui. Figma Motion vous permet de sélectionner un cadre animé et d’exporter directement au format MP4, GIF, SVG ou WebM depuis le fichier pour des revues anticipées et le partage.

L’animation de transform 3D est-elle disponible dans Figma Motion ?

Les transforms 3D pour la rotation des cadres, vecteurs et textes sur l’axe z sont annoncés comme bientôt disponibles sur la page produit Figma Motion, avec une liste d’attente à rejoindre.

Catégorie:

Tarification:

Freemium

Tags:

Motion Design
Design Systems
Animation Timeline

Technologie utilisée:

Next.js
Angular
Chakra UI
Ant Design
Webflow
Cloudflare
Amazon Web Services
Font Awesome
Sanity
Ruby
Vimeo
Webpack
Emotion

Commentaires:

Give your opinion on Figma Motion :-

Overall rating

Join thousands of AI enthusiasts in the World of AI!

Meilleur Gratuit Figma Motion Alternatives (et Payées)

By Rishit