How To Animate Like After Effects in Figma

Summary

Dans cette vidéo, l'animateur explique pourquoi il a abandonné Adobe After Effects pour intégrer Figma dans son workflow pour les animations UI. Il met en avant les capacités de Figma, notamment son outil Smart Anime, pour créer des animations fluides et complexes sans quitter l'interface. Il présente des exemples concrets, comme une animation d'introduction et une publicité Twitter, pour démontrer la simplicité et l'efficacité de Figma. L'animateur encourage les spectateurs à explorer davantage les animations avancées avec Figma.

Takeaways

• 🚀 After Effects, un outil de mouvement populaire parmi les designers, a un apprentissage difficile et ne s'intègre pas avec Figma.
• 🌟 Figma remplace After Effects dans le workflow du locuteur pour les animations UI.
• 📺 Le locuteur présente deux sujets : l'importance de Figma pour les animations UI et comment l'utiliser pour créer des animations spécifiques.
• 🎨 'Smart Anime' est une fonctionnalité de Figma qui permet des animations basées sur les différences entre les calques, généralement entre les frames.
• 📝 L'animation 'hero intro' est créée avec seulement sept frames, montrant la simplicité de l'animation dans Figma.
• 🔍 La première frame de l'animation 'hero intro' masque le texte avec un bloc, ce qui est la première révélation de l'animation.
• 📌 Les animations dans Figma sont faciles à créer et à comprendre, comme illustré par l'animation de l'intro de l'héro.
• 💡 Figma permet une créativité illimitée pour les animations, comme démontrée par l'animation publicitaire Twitter.
• 🔄 L'animation Twitter est un exemple de loop où la dernière frame doit se reconnecter à la première pour créer un cycle continu.
• 🎥 Les animations dans Figma sont faciles à mettre en place, même pour des animations complexes comme les publicités sur les réseaux sociaux.
• 📚 Le locuteur propose des tutoriels avancés pour ceux intéressés par les animations plus complexes en Figma.

Q & A

Pourquoi l'orateur a-t-il arrêté d'utiliser Adobe After Effects pour les animations ?

L'orateur a arrêté d'utiliser Adobe After Effects car il y a un apprentissage complexe, il n'intègre pas avec Figma et nécessite de quitter l'application pour travailler sur des animations.

Quel outil a pris la place d'Adobe After Effects dans le workflow de l'orateur ?

Figma a pris la place d'Adobe After Effects dans le workflow de l'orateur, car il est plus adapté aux animations d'interface utilisateur (UI).

Qu'est-ce que le concept de 'smart anime' dans le contexte de Figma ?

Le 'smart anime' est une animation basée sur la différence entre les calques, généralement entre les frames, ce qui permet des transitions fluides et simples à créer.

Comment l'orateur a-t-il créé l'animation d'introduction héroïque dans Figma ?

L'orateur a utilisé sept frames pour créer l'animation d'introduction, en manipulant la position, l'opacité et la taille des éléments pour créer des transitions fluides.

Quels éléments sont utilisés dans la première frame de l'animation d'introduction héroïque ?

Dans la première frame, il y a un bloc cachant le texte, le texte du chargement, et une image initialement à zéro opacité.

Comment l'orateur a-t-il intégré l'image dans l'animation d'introduction ?

L'orateur a intégré l'image en la plaçant en dehors du frame, laissant l'image apparaître depuis le bas et couvrir l'écran pour créer une transition.

Quelle est la différence entre l'animation d'introduction héroïque et l'animation Twitter présentée dans le script ?

L'animation d'introduction héroïque est une animation d'interface utilisateur, tandis que l'animation Twitter est une animation pour une publicité sur les réseaux sociaux avec un rythme élevé et un style différent.

Comment l'orateur a-t-il créé la transition entre les frames de l'animation Twitter ?

L'orateur a utilisé des transitions d'opacité, des changements de taille et de position, ainsi que des animations de déplacement pour créer une transition fluide entre les frames.

Quelle est la fonction de l'ellipse ajoutée à la fin de l'animation Twitter ?

L'ellipse ajoutée à la fin de l'animation sert à augmenter la taille et à rendre tout blanc, ramenant ainsi la scène à son état initial pour créer un loop continu.

Quels sont les avantages de Figma pour les animations par rapport à After Effects, selon l'orateur ?

Figma offre une intégration plus facile avec les outils de conception d'interface utilisateur, une facilité d'utilisation pour les animations, et permet de créer des animations sans quitter l'application.