Menu Animation in Figma
HTML-код
- Опубликовано: 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 RUclips channel 👉 @MaddyBeard
Flux Academy's Instagram 👉 / flux.academy
Flux Academy's Twitter 👉 / fluxacademyhq
#figma
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.
Thank you
Brilliant. Very clear and easy to follow. Thank you!!
Great to hear!
Awesome! Would it be possible to give it a subtle bounce after it moved into the final position?
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.
thanks a lot!
why to add buttton title if im alredy on that page 🤔
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.
Nice work!
How do you move object seeing padding arround , when I hold option it duplicates , thank you for video
How do you link it to the other pages
I have a similar problem. I think it has to be made by variables, but I'm not too sure how yet.
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?
Why You skip last step to connect the buttons each other with using prototype?
Dear you are awesome! Thank U a lot!🎉
Can this be done inside of web flow?
Yep
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
She skipped many steps in this video.
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
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 ;/
If you haven’t noticed yet, these channels are also business so yeah they need to sell you stuff. That’s internet buddy