Menu Animation in Figma

Maddy demonstrates how to create an animated tab bar / mobile menu in Figma using components.

📱 Find us on SOCIAL MEDIA
Maddy's YouTube channel 👉 @MaddyBeard

#figma

[jichaelmorgan]

Awesome! Would it be possible to give it a subtle bounce after it moved into the final position?

[fromgreetings]

Brilliant. Very clear and easy to follow. Thank you!!

[samuelloticke]

Hi
I would like to ask you something.
After this animation how to assign each icon of the animation to a given page.
I mean; how to prototype the icon in the animation so that when we click on it it does the animation there and we also go to another page.

[knightlightshow]

Maddie, thank you for this video!

Hey everyone, if your animation isn't working, it's because you need to link every icon in every row/state, not just the first row. If you pause the video at 6:36 you'll see where all the connection points go. Basically, repeat what you did in the first row of icons in every other row/state below it, connecting every icon to the corresponding rows above and below. It looks like to save time, Maddy skipped forward to doing every remaining icon.

@Maddy it took me about 20 minutes to figure out what happened. What would have cleared up a lot of confusion is if you explained the same process needs to be repeated for every icon in the remaining states. If you skip ahead to save time, you should narrate what you did since we can't see it. Thanks again for a great video.

Side note: Instead of "on-click" I changed it to mouse hover, which created a really cool mouseover effect instead of waiting for the user to click the link.

[zigyias]

How do you move object seeing padding arround, when I hold option it duplicates, thank you for video

[OG_by_Dip]

I created my first figma animation, Thank you so much, I was trying for a few days how to animate properly, I want to create a portfolio website for my 3d animation, And I want to apply some figma animations there.

[pankajwadalkar]

why to add buttton title if im alredy on that page 🤔

[goyo_heh]

How do I link it to the page I want the icon to direct me to when clicking on it? Do I have to forcefully get Figma premium to add actions? Or is there another way?

[GraphicDesigner]

Why You skip last step to connect the buttons each other with using prototype?

[edsonsalazar]

The whole tutorial is very good, but why didn't anyone notice those good albums in the background?

[johanvanwambeke]

Good, working in rems will maybe force you to keep some sort of easy distance hiarchy. And use auto-layout for everything (where it makes sence ) if you want to have it professional

[Strange]

if your going to do tutorial, you might aswell do a step by step. you skipped so many part especially the mapping. your shortcuts etc... If your advertising your course, you might aswell do the tutorial properly instead of skipping ahead each time hence a lot of questions at the comment section.. it feels so rushed that even at 0.5 speed, it still fast ;/

[fuqqibhai]

She skipped many steps in this video.