Menu Animation in Figma

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ม.ค. 2024
  • 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 TH-cam channel 👉 @MaddyBeard
    Flux Academy's Instagram 👉 / flux.academy
    Flux Academy's Twitter 👉 / fluxacademyhq
    #figma

ความคิดเห็น • 23

  • @samuelloticke8557
    @samuelloticke8557 3 หลายเดือนก่อน +2

    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.

  • @fromgreetings
    @fromgreetings 3 หลายเดือนก่อน +1

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

    • @FluxAcademy
      @FluxAcademy  3 หลายเดือนก่อน

      Great to hear!

  • @jichaelmorgan3796
    @jichaelmorgan3796 4 หลายเดือนก่อน

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

  • @farzadjahanfard
    @farzadjahanfard 4 หลายเดือนก่อน +1

    Thank you

  • @knightlightshow
    @knightlightshow 3 หลายเดือนก่อน

    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 หลายเดือนก่อน

      thanks a lot!

  • @zigyias347
    @zigyias347 2 หลายเดือนก่อน

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

  • @pankajwadalkar
    @pankajwadalkar 4 หลายเดือนก่อน +3

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

  • @OG_by_Dip
    @OG_by_Dip 4 หลายเดือนก่อน +1

    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  4 หลายเดือนก่อน

      Nice work!

  • @goyo_heh
    @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
    @GraphicDesigner177 หลายเดือนก่อน

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

  • @shaneareglado8073
    @shaneareglado8073 2 หลายเดือนก่อน +2

    How do you link it to the other pages

    • @Gobothechairman
      @Gobothechairman หลายเดือนก่อน

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

  • @annapindurova3780
    @annapindurova3780 4 หลายเดือนก่อน

    Dear you are awesome! Thank U a lot!🎉

  • @johanvanwambeke723
    @johanvanwambeke723 4 หลายเดือนก่อน +1

    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

  • @cre8vedesign
    @cre8vedesign 3 หลายเดือนก่อน

    Can this be done inside of web flow?

  • @fuqqibhai6148
    @fuqqibhai6148 4 หลายเดือนก่อน +2

    She skipped many steps in this video.

    • @knightlightshow
      @knightlightshow 3 หลายเดือนก่อน

      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

  • @besmekon167
    @besmekon167 21 วันที่ผ่านมา

    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 19 วันที่ผ่านมา

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