Menu Animation in Figma

Maddy demonstrates how to create an animated tab bar / mobile menu in Figma using components.
⬇️ DOWNLOAD THE STARTER PROJECT HERE: bit.ly/3u24BK0
👉Check our full Figma for Web Designers course: bit.ly/3O7VWwq
📱 Find us on SOCIAL MEDIA
Maddy's KZbin channel 👉 ‪@maddybeardUX‬
Flux Academy's Instagram 👉 / flux.academy
Flux Academy's Twitter 👉 / fluxacademyhq
#figma

[@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.

[@yomercury]

thanks a lot!

[@samuelloticke8557]

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.

[@ro5625]

did you find the solution? please help

[@fromgreetings]

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

[@FluxAcademy]

Great to hear!

[@shaneareglado8073]

How do you link it to the other pages

[@Gobothechairman]

I have a similar problem. I think it has to be made by variables, but I'm not too sure how yet.

[@OG_by_Dip]

Woah.....Today 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.

[@FluxAcademy]

Nice work!

[@surajUiDesign]

good animation

[@KrinaThesia]

For anyone wondering how to incorporate this into an actual app when you don't want to use smart animate for the entire frame and just the dashboard, Prototype the circle to the page it's supposed to open, like the eclipse around home to home page with Trigger: After Delay Delay: 1ms Action: Navigate to Destination: The page the button will be opening Animation: Instant For smoother transition you can change the smart animate of the icon to Ease out at 200-300ms

[@artedigitaluniverso]

Very cool - 👏

[@praveen-ip7uv]

Thanks👍

[@jichaelmorgan3796]

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

[@farzadjahanfard]

Thank you

[@pankajwadalkar]

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

[@zigyias347]

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

[@johanvanwambeke723]

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

[@cecilee]

What happen if i want to use others text labels? For example instead "Profile", i would like to use "My Space", I've got to resize manually the frame that you create to highlight?

[@abhijith2995]

Hi how to conncet other pages with this animation... You only showed the animation part... But how to connect the next page

[@cre8vedesign]

Can this be done inside of web flow?

[@FluxAcademy]

Yep

[@annapindurova3780]

Dear you are awesome! Thank U a lot!🎉

[@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?

[@GraphicDesigner177]

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

[@edsonsalazar1075]

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

[@FluxAcademy]

You did!

[@Strange19665]

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 ;/

[@facundogimenez1679]

If you haven’t noticed yet, these channels are also business so yeah they need to sell you stuff. That’s internet buddy

[@alexander_stark]

where al?

[@AliHaidar-y5j]

you are very beauty full

[@fuqqibhai6148]

She skipped many steps in this video.

[@knightlightshow]

Hey, check out my comment above if you weren't able to get the animation working. The remaining icons need to be linked with the remaining rows/states

[@geekelite9685]

i hate your tutorials