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.

Outlines

00:00

🎨 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.

05:02

🔗 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.

Keywords

💡Figma

Figma est un outil de conception de interfaces graphiques en ligne, utilisé par les designers pour créer des prototypes et des animations. Dans la vidéo, il est utilisé comme plateforme pour créer et animer un menu glissant interactif.

💡Menu glissant

Un menu glissant, ou 'slide menu' en anglais, est une interface utilisateur qui permet de révéler des options ou du contenu supplémentaire en glissant vers l'extérieur de l'écran. Dans le script, le menu glissant est l'élément principal à animer et à rendre interactif.

💡Animation

L'animation dans le contexte de la conception graphique fait référence au processus de création de mouvements ou de transformations dans l'interface utilisateur. Dans la vidéo, l'animation est utilisée pour transformer le menu glissant et l'icône du menu.

💡Icône du menu

L'icône du menu est un élément visuel qui permet à l'utilisateur d'accéder au menu glissant. Dans le script, l'icône du menu hamburger est transformée en icône de fermeture lors de l'animation.

💡Smart Animate

Smart Animate est une fonctionnalité de Figma qui permet de créer des animations fluides en identifiant automatiquement les éléments à animer. Dans le script, elle est utilisée pour animer l'icône et le menu sans avoir besoin de deux icônes séparées.

💡Composant

Dans Figma, un composant est un élément réutilisable de conception qui peut avoir plusieurs variantes. Dans la vidéo, les icônes et le menu sont transformés en composants avec des variantes pour l'état ouvert et fermé.

💡Variante

Une variante dans Figma représente une version modifiée d'un composant, permettant ainsi de créer des états différents pour un même élément. Le script utilise des variantes pour le menu et l'icône, représentant leurs états ouvert et fermé.

💡Contraintes

Les contraintes dans Figma sont utilisées pour maintenir la disposition et la taille des éléments en fonction de l'écran ou de l'espace disponible. Dans le script, elles sont utilisées pour positionner l'icône en haut à droite et pour ajuster la largeur du menu glissant.

💡Prototype

Un prototype en conception de UI/UX est un modèle fonctionnel qui simule l'interaction avec l'interface utilisateur. Dans le script, le tab Prototype est utilisé pour créer des interactions entre l'icône et le menu glissant.

💡Instance

Une instance en Figma est une copie d'un composant qui peut être placée à différents endroits du projet tout en conservant les liens avec le composant d'origine. Dans la vidéo, l'instance du composant est utilisée pour tester l'animation et l'interaction du menu glissant.

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