Menu Animation in Figma
HTML-код
- Опубликовано: 31 май 2024
- Learn how to make this animated menu in under 5 minutes with Figma! Build frames and prototype your animation.
👇Get the Studio Pass
bit.ly/49COJNQ
👇 Try Figma for FREE
bit.ly/figfree
👇Download Figma For Pros
bit.ly/fig-pro
🚀 Subscribe for more Tutorials
bit.ly/3T22qMZ
📥 Buy Design Files & Merch
bit.ly/3WuUl6D
🌎 Find Me on Social Media
Tiktok: bit.ly/3U7TdnQ
Instagam: bit.ly/3fF9hyf
Facebook: bit.ly/3ML5axg 
Хобби
The frontend programmer seeing this:🤡🤡🤡
Haha 😂😂😂
Why?
Hahahahah😂😂😂😂
😂😂
Designer vs engineering mindset.
As a student I love the short and right on point format. Keep up the good work!
Thanks so much! I really want to be as direct as possible in my videos 👍🏼
For me that short tips are the best! :-)
Great video, this is a big help to someone who is still learning. I also love the 5 minutes format, very quick and easy to learn from.
I appreciate your comment!! 🤙🏼
@@shmeltstudios how do you export to vs code?
I really loved this animation. Thanks a lot for that.
Thank you.
I love the step-by-step actionable guide. This is relatable.
You're welcome!
Thank you a lot. You did it exactly how I was looking for ...10 out of 10👍🏻
Loving this quick, straightforward, and on point tutorial! Thankssss!
Took me 4 attempts but once I got it I was so excited and proud. Gotta pay attention to the frame work , grouping, and components. Thank you for the lesson!!
So excited to hear that!! 👏🏼
I am still struck at how the desktop went up cause as soon as I move it up other items disappears
hey there
@@mrunalbhoyar2518 create variants
Thank you so much! I've watched so many videos before I get to yours, and I finally learned how to do this thing...
So glad I could help 🥰
That was really helpful. Added a new piece of knowledge.
wohooo, i was so proud doiing this, thanksss
Please make more tutorials like these, people love it and it's also your most popular video. Thanks!
check out the updated version: ruclips.net/video/iBTiwSH6BI4/видео.html
Great. Figma is perfect for web design, but I also like to use Cavalry for web design. I can create vector animations more smoothly there, but it's certainly a matter of getting used to it.
I am self teaching and your vids are very helpful, concise and relevant information. Way too many 30 min vids on here showing how to change a frame color lol. I appreciate you taking the time to share your knowledge
Awesome!! I teach the same way I’d like to learn, fast and to the point 👍🏼❤️
Awesome Tutorial! Just made this design and learned how to use components more effectively!
Thanks so much! 👍🏼 and yes components are super helpful!!
Incredible effect! First time trying the animations in Figma and your video was really helpful
check out the updated version: ruclips.net/video/iBTiwSH6BI4/видео.html
@@shmeltstudios Thank you
It's an amazing animation for menu bar
I appreciate you 😌
such simple and amazing video!
Great content guys!
Thank you so much! This is exactly what I've been looking for!
how will it navigates to different pages?
Thankyou so much . I did this ,as a beginner it is an interesting thing to do in figma
This is insane!!!
cleared it 1st attempt . happy to do it
Thank you so much for sharing amazing tutorial :)
That's great video, It helps me get used to Figma :D
I figured it out! Keep up with the videos! They’re incredibly helpful! ❤
Hey Bran 👋🏼 no problem! Watch from 2:32 make sure you select your whole menu bar and put it in a frame (select all and right click “frame selection”) , before you duplicate them. Once you have your 3 frames you can continue to prototype 👍🏼 hope this helps
Oh so glad!! And thank you!
Great tutorial!
Awesome , fast and simple to understand 🔥🔥🔥🔥👍🏽
I request you to make more
On it 🤟🏼
YOOOOO
This is pure wizardry! I love it!
Thank youuu
I loved this tutorial. Thanks for it. Just one request! Please have more detailed videos too.
Noted! I will try l!
you have a magical hands bro. special thanks o7
Thanks a lot!
So helpful!
Easy to understand 🔥
That's cool detailed explanation video 🤓
How incredible🎉❤
Thank you for your tutorial. Helpful!
Glad it was helpful!
It looks good 👍
Thanks for the video, was very helpful!
Glad I could help 🤟🏼
brabo men, aprendi 3 coisas diferentes num video q era pra ensinar so uma
Bro u're my god!
Thank you
Thanks you! I really need it.
Glad it helped!
Simply great!
Thanks 😊
Amazing video, I really like it. Thank you
I'm glad you like it
very nice and simple explanation.. thank you
Glad you liked it 🤙🏼
very helpful , and easy to follow thanks
Glad it was helpful!
bro you literally saved me thanks alot
Glad I could help 👍🏼
realy good for new persons. thanks for oyu
ty
hi, in the prototype part, when i try to drag the arrow from the fire in the 1rst chart to the second, it just select the entire second chart, not the fire icon
what i am doing wrong?
THANK YOU
Thank You.
I'm having doubt in the prototyping part so can you explain it in any of your upcoming videos or in any short video?
Cool design!
Thanks you
In front end developer I take to make this menu more than 1 hours ,but man make within 5min and now I am feeling 🤡🤡
to change the white circle into transparent/png?
I made this but how should i change the screen also if I am simply prototyping the fire icon with next page this animation is not showing
if anyone can help me..
Amazing
When you click on the button does it transfer you to the assigned page? Like if I click on home it will redirect me to the home page of the app prototype?
thank youuu😍😍
Thankyou
Easy to learn
Thank you so much!
You're welcome!
thanksss
This is pretty incredible. How hard is this to export to editor x?
hello When i tried same way, my figma doesn't show up "change to" on my prototype. I selected the icon to next flame.Does anyone know how to deal it?
Amazing tutorial
Thank you 😊
You are the best, thank u ❤️
No, thank you!
nice one
This was great, thanks for sharing
how will it navigates to different pages?
@@theincredibleaniket It's a component you just need to take an instance from it and put it in the needed pages. When prototyping you can see the navigation result after following this video.
Wish this answered your question!
@@nourhanali1331 I make exactly same as in this video but there is no navigation... Have you tried it on different screens?.... Is there any video related to this issue then please let me know
When I select everything and go to assets, the only thing that shows up is the weird circle and when I click it that’s all that comes up
best video ever , i swear
Thank you!!
Great manh...🎉🎉 I'm gonna try
Thank you, let me know how it comes out!
As a beginner, I have a very interesting experience, but I have a problem when I press the fire panel to turn over, and everything else works fine
Thank you. But for me, bottom frame comes up when clicking the settings icon. Not sure what I did wrong here
Am new to Figma, anyone know how such animations can be exported? especially as a UI design to be used in android studio.
WOW!
For change to option do we have to pay? For me the change to option is unable to click?
Amazing!!!
Thanks!!
Hey great video and very easy to follow... I was able to replicate that animation you created without any problems. However, when I prototype the "local component" to actual screens (Home screen to shop screen) it changes but the animation stops working. How do keep the menu animation, trigger screen changes and keep things looking smooth? I'd greatly appreciate help!
I have the same problem at this moment, It would be perfect if you could help me fix it😅
did you get an answer?@@marrykulik242
thank you so much
Thanks for watching ❤️
Trying to find the Iconduck plugin in figma's plugins. How do I get access?
Can this be used in power appps
I did everything accordingly but, somehow in prototyping the change to option is not clickable , if anybody can help me out with this .
I put the component but it is three things and cannot animate it. Also Please give your project pls.
Can you create video for how this create on website
I love this video; it is such a fun way to give a menu a sense of fun. I was able to do the tutorial. How can I prototype the selected icon to the page I want to connect it?
I’ll probably have to make another video on how to connect it into different pages and on app screens as a component, some things in Figma have been updated, so it might be easier than when I made this video 👍🏼
Tnx
Really Osm
super tutorial!
Thank you! Cheers!
What if you need to make the half-circle ‘cutout’ transparent? So you can see through content in the background when scrolling?
Instead of making it a component set you could put it onto each screen and change the color to match on each background, when I try to make it a cutout the animation doesn’t work 😵💫
Amazing video. I'm just wondering how to do it on Elementor.
amazing
Thank you! Cheers!
How to copy this exact design with animation on a web app?
in prototype change to is not available sirr please replyyy
this best short sweet video about prototype
Thank you!!
New Sub!
Once i have made it how can i add a next page like on clicking on fire it toggles to fire as well as at the same time it goes to the next page containing its components
How can i do so plzz help ?
By the way Its awesome loved your work ❤❤
Instead of putting navigation bar in frame one by one we can make the navigation bar as a component and then add variants to it and then prototyping part and done 👍
But how will you navigate to other page? Like see if I placed this navigation menu inside an iphone frame, now I duplicate this frame as a fire page. Now I connected the fire inside the navigation menu to the fire page. I am navigated to the fire page but the menu navigation didn't work.
I am facing this problem please help me if u know