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 KZread channel 👉 ‪@MaddyBeard‬
Flux Academy's Instagram 👉 / flux.academy
Flux Academy's Twitter 👉 / fluxacademyhq
#figma

Пікірлер: 23

  • @fromgreetings
    @fromgreetings4 ай бұрын

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

  • @FluxAcademy

    @FluxAcademy

    4 ай бұрын

    Great to hear!

  • @samuelloticke8557
    @samuelloticke85574 ай бұрын

    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
    @knightlightshow4 ай бұрын

    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

    @yomercury

    2 ай бұрын

    thanks a lot!

  • @jichaelmorgan3796
    @jichaelmorgan37965 ай бұрын

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

  • @farzadjahanfard
    @farzadjahanfard5 ай бұрын

    Thank you

  • @OG_by_Dip
    @OG_by_Dip5 ай бұрын

    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

    @FluxAcademy

    5 ай бұрын

    Nice work!

  • @pankajwadalkar
    @pankajwadalkar5 ай бұрын

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

  • @zigyias347
    @zigyias3473 ай бұрын

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

  • @johanvanwambeke723
    @johanvanwambeke7235 ай бұрын

    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

  • @goyo_heh
    @goyo_heh2 ай бұрын

    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
    @GraphicDesigner1772 ай бұрын

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

  • @annapindurova3780
    @annapindurova37805 ай бұрын

    Dear you are awesome! Thank U a lot!🎉

  • @shaneareglado8073
    @shaneareglado80733 ай бұрын

    How do you link it to the other pages

  • @Gobothechairman

    @Gobothechairman

    2 ай бұрын

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

  • @cre8vedesign
    @cre8vedesign4 ай бұрын

    Can this be done inside of web flow?

  • @FluxAcademy

    @FluxAcademy

    4 ай бұрын

    Yep

  • @Strange19665
    @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

    @facundogimenez1679

    Ай бұрын

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

  • @fuqqibhai6148
    @fuqqibhai61485 ай бұрын

    She skipped many steps in this video.

  • @knightlightshow

    @knightlightshow

    4 ай бұрын

    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