Create an Animated Slide Menu in Figma

Summary

Dans cette vidéo, l'animateur vous guide à travers la création rapide d'un menu déroulant interactif dans Figma. Il commence par analyser le menu, montrant comment le bouton 'dismiss' le réduit et l'icône 'hamburger' l'élargit. Ensuite, il crée l'animation de l'icône, en transformant une icône 'hamburger' en un icône 'dismiss'. Il utilise des composants et des états pour créer des interactions, et ajuste les contraintes pour que le menu soit réactif. Finalement, il connecte les éléments pour créer une animation fluide du menu. Le but est d'engager les utilisateurs avec une vue d'ensemble concise et attrayante de la création d'animations en Figma.

Takeaways

• 🎨 Le tutoriel montre comment créer un menu déroulant interactif en animation dans Figma.
• 🍔 L'icône du menu hamburger doit être animée pour se transformer en icône de fermeture lorsqu'on clique dessus.
• 📐 Le menu déroulant est prévu pour s'agrandir et se réduire, nécessitant une animation pour chaque état.
• 🖼️ Le menu est déjà conçu dans sa version étendue, il reste à créer la version réduite.
• 🔄 Pour animer l'icône, le tutoriel indique comment créer un double de l'icône hamburger et la modifier pour former l'icône de fermeture.
• 🔑 La fonction 'Smart Animate' de Figma est utilisée pour lier les variations d'icône et le menu.
• 🔗 La création d'un ensemble de composants (component set) est nécessaire pour gérer les interactions.
• 🔄 L'animation est appliquée en utilisant la valeur 'quick' pour la vitesse et 'smart animate' pour le type d'animation.
• 📐 Les contraintes et les autres layouts sont utilisés pour assurer la réactivité du menu et de l'icône.
• 🔗 Des connexions sont créées dans l'onglet Prototype pour gérer les interactions entre l'icône et le menu.
• 🎉 Le résultat final est un menu déroulant animé qui fonctionne correctement, comme illustré par la démonstration à la fin de la vidéo.

Q & A

Qu'est-ce qu'une 'slide menu' dans Figma et comment l'animer rapidement?

Une 'slide menu' est un élément d'interface utilisateur qui peut s'étendre et se réduire. Pour l'animer rapidement dans Figma, il faut créer une animation qui permet au menu de s'agrandir et de se réduire, ainsi qu'une animation pour le changement d'icône.

Quel est le rôle du bouton 'dismiss' dans le menu glissant?

Le bouton 'dismiss' permet de réduire le menu glissant lorsqu'il est cliqué.

Quel est l'icône utilisée pour le menu glissant lorsqu'il est réduit?

L'icône utilisée pour le menu glissant réduit est l'icône du hamburger.

Comment créer une icône 'dismiss' à partir de l'icône du hamburger dans Figma?

Pour créer une icône 'dismiss', il faut sélectionner l'icône du hamburger, dupliquer le cadre, puis supprimer deux des trois lignes et faire pivoter la deuxième ligne de 45 degrés pour former la croix du 'dismiss'.

Quelle est la différence entre les icônes 'open' et 'closed' dans le script?

L'icône 'open' représente le menu glissant déployé, tandis que l'icône 'closed' représente le menu réduit.

Pourquoi est-il nécessaire de créer un 'component set' dans Figma?

Un 'component set' est nécessaire pour créer des composants interactifs qui peuvent être réutilisés et qui permettent de gérer facilement les états différents du menu, comme 'open' et 'closed'.

Comment nommer les couches dans Figma pour utiliser l'option 'smart animate'?

Pour utiliser l'option 'smart animate', il faut nommer les couches de manière à refléter leur état final, par exemple, en changeant le numéro de la première ligne pour qu'elle corresponde à l'état 'open' et en nommant les autres couches en conséquence.

Quel est le rôle de l'onglet 'Prototype' dans la création d'interactions dans Figma?

L'onglet 'Prototype' permet de créer des interactions entre les composants, comme le changement d'état du menu et de l'icône lorsqu'ils sont cliqués.

Comment ajuster la largeur du menu glissant dans le script?

Pour ajuster la largeur du menu glissant, il faut sélectionner la variante 'closed' et modifier sa largeur en utilisant les contraintes et les autres dispositions qui ont été préalablement définies pour le menu.

Quels sont les ajustements nécessaires pour le variant 'closed' du menu dans le script?

Pour le variant 'closed', il faut supprimer les textes inutiles, ajuster la taille du logo et s'assurer que le logo et l'icône 'dismiss' sont centrés.

Comment tester la fonctionnalité du menu glissant après avoir créé les animations et les interactions?

Pour tester la fonctionnalité, il faut créer une instance du menu, ajuster les préférences de l'animation et de l'icône, puis jouer la scène dans Figma pour voir si le menu réagit correctement aux actions de l'utilisateur.