Create an Animated Slide Menu in Figma
Summary
TLDRDans 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.
Outlines
🎨 Création d'un menu glissant interactif
Dans le premier paragraphe, l'animateur présente un didacticiel sur la création rapide d'un menu glissant animé dans Figma. Il commence par analyser le menu interactif qui inclut un bouton de réduction et un icône de menu hamburger qui contrôle l'extension du menu. L'animateur a déjà préparé la version étendue du menu et explique comment animé le menu et l'icône. Il crée un double de l'icône de menu pour la transformer en un icône de réduction, en ajustant les lignes et les angles. Il insiste sur la nécessité de nommer correctement les calques pour permettre à Figma d'animer correctement la transformation avec l'option 'smart animate'. Ensuite, il crée un ensemble de composants et établit des connexions pour les états ouvert et fermé du menu.
🔗 Configuration des interactions et animations du menu
Le deuxième paragraphe se concentre sur la configuration des interactions et des animations du menu glissant. L'animateur ajuste les propriétés de l'état du composant du menu, en supprimant les textes superflus et en ajustant la largeur et l'alignement des éléments pour la variante fermée. Il crée des connexions pour que le clic sur l'icône de réduction active l'animation du menu vers l'état ouvert et inversement. Finalement, il teste l'interaction en utilisant une instance du composant de menu et vérifie que l'animation fonctionne correctement. Il remercie les téléspectateurs et les invite à liker et à s'abonner pour apprendre davantage sur la création d'animations en Figma.
Mindmap
Keywords
💡Figma
💡Menu glissant
💡Animation
💡Icône du menu
💡Smart Animate
💡Composant
💡Variante
💡Contraintes
💡Prototype
💡Instance
Highlights
Introduction to creating an interactive slide menu in Figma.
Analysis of the slide menu's functionality, including collapse and expand actions.
Explanation of animating the hamburger menu icon transformation.
Demonstration of creating a dismiss icon from the hamburger menu icon.
Use of smart animate in Figma for seamless transitions.
Creating a component set for interactive elements.
Setting up property names for component variants.
Establishing connections for interactive prototype behavior.
Adjusting animation preferences for a quick and bounce effect.
Using instances of components for responsive design.
Fixing layout disorganization with absolute positioning.
Aligning the dismiss icon to the top right corner with constraints.
Animating the slide menu with component sets and variants.
Removing unnecessary text layers for the closed menu variant.
Adjusting the width of the slide menu using layouts and constraints.
Creating interactions with the Prototype Tab for click actions.
Testing the final interactive slide menu animation.
Encouragement to like, subscribe, and check out related videos for more Figma tutorials.
Transcripts
in today's video I'm going to show you
how to animate a slide menu in figma
super fast so let's begin this is the
interactive slide menu we are going to
create together so let's analyze it
quickly to really understand what we
need to achieve okay so here as you can
see we have this dismiss button if I
click on it it collapses and if I click
on this hamburger menu icon there we go
it expands so not only should this slide
menu be animated but also this icon
should be transformed to this hamburger
menu icon okay so let's start creating
it here as you can see I already
designed this menu this is the expanded
version I didn't create the collapse
version we are going to create that
together quickly but first we need to
animate our icon okay we need to animate
it place it right here and then we will
animate our slide menu how can we
animate that icon here as you can see I
don't have two separate icons I only
have this hamburger menu icon because we
are going to create that dismiss I icon
together first I'm gonna select this
icon here this Frame I'm going to
duplicate it hit Ctrl D or command D and
what I'm going to do here is get rid of
these two lines all right as you can see
inside we have three lines we have one
two three I'm gonna get rid of this last
one and this one as well and here I'm
gonna keep this second line I'm going to
hold down the shift key and rotate it
just like this point 45 degrees all
right let me zoom in now I'm going to
duplicate it hit Ctrl D or command d
right click on it and I'm gonna click on
flip horizontal to flip it horizontally
and as you can see we've got this
dismiss icon but here is what we need to
do as you can see here in this icon we
have these three layers as well one two
three we need to change the name of
these layers because when we use the
smart animate option figma needs to get
rid of this third line and transform
this first line into this one so what
I'm going to do is Select this one
change its number to one and this one is
going to be two and that's all next we
need to create a component set because
we are going to create interactive
components right so I'm going to select
these two icons I'm going to head over
to the toolbar and open up this drop
down menu and here I'm going to click on
create component set there we go here is
our component set and the last thing we
need to do is to create connections so
I'm going to select this one the default
one and I'm going to change its value
here to closed next I'm going to select
this variant and change its value to
opened you can go ahead and modify this
property name here for this component
set to State just like this and now I'm
going to select this closed one head
over to the Prototype Tab and just
connect it to this open variant okay
here the three years should be on click
the animation type should be smart
animate and I'm going to change the
velocity to quick because I'm going to
have that bounce effect alright and I'm
going to do the same thing for this
dismiss icon I'm going to connect it
back to this close variant and the
preference says look good to me so we
don't need to change anything here all
right our icon is ready and now it's
time to use an instance of this
component so here I'm going to go to the
assets Tab and let me drag and drop an
instance of this icon right here and
since I made this menu this slide menu
responsive using other layouts and
constraints as you can see this icon is
taking up space and everything is
disorganized so let's fix that quickly
we just need to select this icon head
over to the design inspector and click
on this little icon absolute position
and I'm going to move it right here it's
so tiny for this button so I'm gonna
scale it up I'm gonna hit K on my
keyboard and I'm going to set it to
width and height to 40. all right just
like this let me set the top and right
padding to 32.
there we go okay but here we shouldn't
be able to see this hamburger menu icon
right instead we need to see this
dismiss icon so I'm gonna change its
state from close to opened just like
that and also since we want to keep this
dismiss icon to the top right corner we
can adjust the constraints to top and
right so if I select this menu now as
you can see it stays right here on the
top right corner alright so far so good
now it's time to animate our slide menu
for that we also need to create a
component set so I'm going to select
this menu frame here I'm going to turn
it into a component and then I'm going
to add a variant to it just like this so
here we have a component set let me just
expand it and I'm going to bring this
second variant right here I'm going to
put it right next to this one Perfect
all right so what do we need to do now
first I'm gonna select this components
that this menu component set head over
to the properties section and I am going
to change this property name to state
I'm going to select this first variant
as you can see the value is set to open
that's fine I'm going to select this one
and I'm going to set it to closed all
right now we need to make some
adjustments to this closed variant okay
first we need to get rid of these texts
because we don't need them so I'm going
to double click on this menu right here
I'm going to hold down the shift and
Ctrl key on my keyboard and select all
these text layers just like this and I'm
gonna remove them next I'm going to
select this closed variant and I'm going
to try to modify its width and as you
can see since I used other layouts and
constraints already for this slide menu
it's so easy to adjust the width of this
slide menu because all my elements are
responsive alright for this variant I
don't need this circle text here I just
want to have this logo all right I'm
going to select it once again and make
it smaller I'm going to set the width to
120 just like that and then I'm going to
select this dismiss icon and make sure
that it's aligned to the center the same
thing applies to this logo it should be
aligned to the center alright so now I'm
going to select this dismiss icon and
I'm going to change it to closed all
right now it's time to create our
connections to create our interactions
basically to do that I'm gonna select
this dismiss icon here I'm going to head
over to the Prototype Tab and I'm going
to create a connection just like this
here the trigger should be on click
smart animate quick that's fine now I'm
gonna select this hamburger menu icon on
the other variant and I'm gonna connect
it back to our open variant just like
this the preferences look good all right
now it's time to give it a try let's see
if it works properly I'm going to create
a frame here and I'm going to go to
assets and from here let's get an
instance of this menu just like this
maybe I can change the background's
color to Black just like that select
this Frame hit play and let's see how it
works alright I'm going to click on this
dismiss icon there we go it works just
fine how cool is that thank you so much
for watching this video and don't forget
to hit the like And subscribe buttons If
you want to learn how to create smooth
animations in figma like what you see on
Apple's website make sure to check out
this video on the screen have a lovely
day and see you soon
Weitere verwandte Videos ansehen
![](https://i.ytimg.com/vi/JyhLta1a3EU/hq720.jpg)
Comment FILMER une INTERVIEW professionnelle
![](https://i.ytimg.com/vi/FKes0hfKKuY/hq720.jpg)
Mesurer à l'aide de fractions CM1 - CM2 - 6e - Cycle 3 - Maths - Mathématiques
![](https://i.ytimg.com/vi/lDPnTNe43wc/hq720.jpg)
5 Crucial Steps to Set Up Novelcrafter | A Complete AI Novel Guide
![](https://i.ytimg.com/vi/uV_EmbYu9_E/hqdefault.jpg?sqp=-oaymwEXCJADEOABSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCgAfDy0KlkHdDbzLknAA2zuqBuTA)
Résoudre une équation (1) - Quatrième
![](https://i.ytimg.com/vi/ekvU6b4_7CY/hq720.jpg)
Excel #31: Tableau de bord pour visualiser les indicateurs de performance du service commercial.
![](https://i.ytimg.com/vi/plc00wx6X2o/hq720.jpg)
Amazon KDP low content book publishing || Coloring Book Secrets
5.0 / 5 (0 votes)