Menu Animation in Figma
Рет қаралды 581,567
Күн бұрын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
@AP6987 Жыл бұрын
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!!
@shmeltstudios Жыл бұрын
So excited to hear that!! 👏🏼
@mrunalbhoyar2518 Жыл бұрын
I am still struck at how the desktop went up cause as soon as I move it up other items disappears
@ameenrrihan4251 7 ай бұрын
hey there
@JLF_17 Ай бұрын
@@mrunalbhoyar2518 create variants
@tmddragon Жыл бұрын
As a student I love the short and right on point format. Keep up the good work!
@shmeltstudios Жыл бұрын
Thanks so much! I really want to be as direct as possible in my videos 👍🏼
@j.p.3513 8 ай бұрын
For me that short tips are the best! :-)
@JakeDuty Жыл бұрын
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.
@shmeltstudios Жыл бұрын
I appreciate your comment!! 🤙🏼
@gourmetpro6784 Жыл бұрын
@@shmeltstudios how do you export to vs code?
@djashawe88923 Жыл бұрын
Loving this quick, straightforward, and on point tutorial! Thankssss!
@luciaavilla6828 Жыл бұрын
I really loved this animation. Thanks a lot for that.
@hazemalhabbal Жыл бұрын
Thank you a lot. You did it exactly how I was looking for ...10 out of 10👍🏻
@longmancole Жыл бұрын
Thank you. I love the step-by-step actionable guide. This is relatable.
@shmeltstudios Жыл бұрын
You're welcome!
@mairar.oliveira4198 Жыл бұрын
Thank you so much! I've watched so many videos before I get to yours, and I finally learned how to do this thing...
@shmeltstudios Жыл бұрын
So glad I could help 🥰
@BeatN Жыл бұрын
That was really helpful. Added a new piece of knowledge.
@khaleemaalkainaat8178 Жыл бұрын
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
@shmeltstudios Жыл бұрын
Awesome!! I teach the same way I’d like to learn, fast and to the point 👍🏼❤️
@ishitaakaur1472 10 ай бұрын
wohooo, i was so proud doiing this, thanksss
@ABitAppled Ай бұрын
The color scheme is great!
@theado3183 11 ай бұрын
Thank you so much! This is exactly what I've been looking for!
@theincredibleaniket 2 ай бұрын
how will it navigates to different pages?
@lucasguilbe Жыл бұрын
such simple and amazing video!
@rachaelashiry9310 Жыл бұрын
Awesome Tutorial! Just made this design and learned how to use components more effectively!
@shmeltstudios Жыл бұрын
Thanks so much! 👍🏼 and yes components are super helpful!!
@fishbarbeque8540 Жыл бұрын
This is insane!!!
@asadrais007 Жыл бұрын
Please make more tutorials like these, people love it and it's also your most popular video. Thanks!
@shmeltstudios 11 ай бұрын
check out the updated version: kzfaq.info/get/bejne/n6iEnNqErZymeWg.html
@johnengert5768 Жыл бұрын
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.
@ronitviradiya8162 6 ай бұрын
It's an amazing animation for menu bar I appreciate you 😌
@TheInspiredGirl Жыл бұрын
Thankyou so much . I did this ,as a beginner it is an interesting thing to do in figma
@Frank_havre_creation Жыл бұрын
YOOOOO This is pure wizardry! I love it!
@shmeltstudios Жыл бұрын
Thank youuu
@kyojurorengoku7451 5 ай бұрын
cleared it 1st attempt . happy to do it
@MasterBrain182 10 ай бұрын
Great content guys!
@dsalex8737 11 ай бұрын
The frontend programmer seeing this:🤡🤡🤡
@CricBossHighlights 8 ай бұрын
Haha 😂😂😂
@darkMystic__ 7 ай бұрын
Why?
@creativemind966 7 ай бұрын
Hahahahah😂😂😂😂
@Dhileep0382 7 ай бұрын
😂😂
@maquindesign9158 5 ай бұрын
Designer vs engineering mindset.
@bettercallyass152 Жыл бұрын
Incredible effect! First time trying the animations in Figma and your video was really helpful
@shmeltstudios 11 ай бұрын
check out the updated version: kzfaq.info/get/bejne/n6iEnNqErZymeWg.html
@bettercallyass152 11 ай бұрын
@@shmeltstudios Thank you
@branmuffin3422 Жыл бұрын
I figured it out! Keep up with the videos! They’re incredibly helpful! ❤
@shmeltstudios Жыл бұрын
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
@shmeltstudios Жыл бұрын
Oh so glad!! And thank you!
@youyoubai6123 Жыл бұрын
Thank you for your tutorial. Helpful!
@shmeltstudios Жыл бұрын
Glad it was helpful!
@giangnguyentruong227 Жыл бұрын
That's great video, It helps me get used to Figma :D
@imetu Жыл бұрын
you have a magical hands bro. special thanks o7
@timilehinsolu4254 10 ай бұрын
Great tutorial!
@uifry 4 ай бұрын
Thank you so much for sharing amazing tutorial :)
@anukrititripathi152 Жыл бұрын
Awesome , fast and simple to understand 🔥🔥🔥🔥👍🏽 I request you to make more
@shmeltstudios Жыл бұрын
On it 🤟🏼
@thieutinhte Жыл бұрын
Thanks you! I really need it.
@shmeltstudios Жыл бұрын
Glad it helped!
@jacobpulley2126 8 ай бұрын
So helpful!
@rithikakumar7781 Жыл бұрын
Thanks for the video, was very helpful!
@shmeltstudios Жыл бұрын
Glad I could help 🤟🏼
@dewagedeadityaputra4316 10 ай бұрын
Easy to understand 🔥
@pallavisalian5871 Жыл бұрын
I loved this tutorial. Thanks for it. Just one request! Please have more detailed videos too.
@shmeltstudios Жыл бұрын
Noted! I will try l!
@Bharathux Жыл бұрын
That's cool detailed explanation video 🤓
@thedesignhub186 Жыл бұрын
It looks good 👍
@keerthana4386 Ай бұрын
Wow.. thank you i did it
@FarukAhmed-pc5hn Жыл бұрын
Simply great!
@shmeltstudios Жыл бұрын
Thanks 😊
@XeroBitx 4 ай бұрын
Thanks a lot!
@Muuhammad1905 Жыл бұрын
Amazing video, I really like it. Thank you
@shmeltstudios Жыл бұрын
I'm glad you like it
@PakistanTalk2244 Жыл бұрын
bro you literally saved me thanks alot
@shmeltstudios Жыл бұрын
Glad I could help 👍🏼
@rsrrajesh Жыл бұрын
very nice and simple explanation.. thank you
@shmeltstudios Жыл бұрын
Glad you liked it 🤙🏼
@sck0305 Жыл бұрын
Cool design!
@shmeltstudios Жыл бұрын
Thanks you
@Trisuku Жыл бұрын
Thank you so much!
@shmeltstudios Жыл бұрын
You're welcome!
@vaishnavib.v4273 4 ай бұрын
very helpful , and easy to follow thanks
@shmeltstudios 4 ай бұрын
Glad it was helpful!
@Dart-ct5qs Жыл бұрын
realy good for new persons. thanks for oyu
@Salman_UiDesigner 5 ай бұрын
How incredible🎉❤
@designwizard3109 Жыл бұрын
Amazing tutorial
@shmeltstudios Жыл бұрын
Thank you 😊
@davihiluany949 10 ай бұрын
brabo men, aprendi 3 coisas diferentes num video q era pra ensinar so uma
@popcorntimes7537 Жыл бұрын
Easy to learn
@mariialeshchyshyna6039 Жыл бұрын
thank youuu😍😍
@saranofal9365 Жыл бұрын
THANK YOU
@S3ncler Жыл бұрын
You are the best, thank u ❤️
@shmeltstudios Жыл бұрын
No, thank you!
@yasminearezki6425 Жыл бұрын
best video ever , i swear
@shmeltstudios Жыл бұрын
Thank you!!
@ColonialDesign 8 ай бұрын
Thank You.
@lovindigital 2 ай бұрын
Bro u're my god!
@aswin31apex2 Жыл бұрын
Great manh...🎉🎉 I'm gonna try
@shmeltstudios Жыл бұрын
Thank you, let me know how it comes out!
@vonaxeses3882 Жыл бұрын
Amazing!!!
@shmeltstudios Жыл бұрын
Thanks!!
@praveenremix6421 Жыл бұрын
this best short sweet video about prototype
@shmeltstudios Жыл бұрын
Thank you!!
@marziehafkhami504 7 ай бұрын
Thank you
@marcuskanayo1394 9 ай бұрын
Amazing
@Mohit07yadav04 Жыл бұрын
thank you so much
@shmeltstudios Жыл бұрын
Thanks for watching ❤️
@nourhanali1331 9 ай бұрын
This was great, thanks for sharing
@theincredibleaniket 2 ай бұрын
how will it navigates to different pages?
@nourhanali1331 2 ай бұрын
@@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!
@theincredibleaniket 2 ай бұрын
@@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
@imroatussholihah6268 Жыл бұрын
thanksss
@22cupzz Жыл бұрын
ty
@gyulboxing Жыл бұрын
super tutorial!
@shmeltstudios Жыл бұрын
Thank you! Cheers!
@MuskanSolanki-qy9tz Жыл бұрын
amazing
@shmeltstudios Жыл бұрын
Thank you! Cheers!
@user-tt3bi7bk3s 4 ай бұрын
nice one
@fourseasonswithnoreason26 Жыл бұрын
Thank you subscribed
@shmeltstudios Жыл бұрын
Thanks so much 🥰
@yassreyt Жыл бұрын
Thankyou
@jaysr4353 Жыл бұрын
badiya tha guru
@22-marsbars-ru 4 ай бұрын
WOW!
@alexkiran4212 Жыл бұрын
Awesome
@shmeltstudios Жыл бұрын
Thank you
@creativitywithkookie 6 ай бұрын
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 👍
@akshaybillore 5 ай бұрын
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
@TB-ng2dd Жыл бұрын
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?
@shmeltstudios Жыл бұрын
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 👍🏼
@Future_ology 9 ай бұрын
New Sub!
@ninjagamers6725 Ай бұрын
this video is good,, thank you so much but i want a separate video for the components connection, pllzz make a video over this
@Amu_design 10 ай бұрын
Tnx
@Ttop4 Жыл бұрын
It was fun doing it😊
@shmeltstudios Жыл бұрын
I’m glad you tried it out 🤘🏼
@cesarisaac5 3 ай бұрын
love you
@shmeltstudios 3 ай бұрын
Love you back
@AndyHTu Жыл бұрын
This is pretty incredible. How hard is this to export to editor x?
@farid_bpn 8 ай бұрын
mantep bang
@4988raja Жыл бұрын
It looks good but if your background color on screen is not white, than I assume the white circle ⚪️ will be visible when it moves across together with the button icons. Nevertheless, it’s a great idea to add some extra inspiration!
@gbemisolaomokanye8677 Жыл бұрын
You are supposed to make the circle's color match the color of whatever bg
@4988raja Жыл бұрын
@@gbemisolaomokanye8677 that’s true, but this tab navigation bar will be overlayed atop screen content, hence when the tabs are being toggled back and forth, the circle element will be deemed visible, which makes the movement unsightly :)
@pallavisalian5871 Жыл бұрын
@@4988raja I don't know how it is done. But I guess the mask feature can help solve this glitch. If you know how it can be done. Please do share it here with us.
@graceawoyinka8478 Жыл бұрын
The circle color should be the same as the bg then navigation menu should be a complimentary color to make the animation work
@ANTHREX Жыл бұрын
@@graceawoyinka8478 You will not have the same color throughtout the app, right?
@nuthankamera5651 11 ай бұрын
good video
@saidulhossain2539 Жыл бұрын
Really Osm
@user-di9mf7ip7v Жыл бұрын
nice😍
@satishgupta786 4 ай бұрын
In front end developer I take to make this menu more than 1 hours ,but man make within 5min and now I am feeling 🤡🤡
@Pavan_koppula 16 күн бұрын
As a programmer.. It is nightmare bro😂😂
@Tanmayislivee 7 ай бұрын
I'm having doubt in the prototyping part so can you explain it in any of your upcoming videos or in any short video?
@Magdalena-sb5jm Жыл бұрын
ily
@shmeltstudios Жыл бұрын
ily 🤟🏼
@ander5040 Жыл бұрын
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
@brunnomartins Жыл бұрын
Amazing video. I'm just wondering how to do it on Elementor.
@user-ml7ff3lz2g 18 күн бұрын
Hey, great work. Just a question. How can you animate this if an image or other items are behind this bar?
@wilkensn444 Жыл бұрын
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!
@marrykulik242 Жыл бұрын
I have the same problem at this moment, It would be perfect if you could help me fix it😅
@jacoblimparlantz9892 9 ай бұрын
did you get an answer?@@marrykulik242
@way2mee Жыл бұрын
U r a great LULLI bro. 😮
@shmeltstudios Жыл бұрын
No, you’re great ❤️
@way2mee Жыл бұрын
I want to learn Figma, can you help out how can I start, basically I am also a Graphic Designer, I create web templates, logo, packaging designs.
@user-dd2dx3uz3n Жыл бұрын
Nice tutorial! I was able to create the navigation bar successfully. However I'm getting an error when I prototype saying "Interaction will not be triggered as interactions on instances are triggered before inherited internal interactions." Wondering how I can incorporate this nav bar when navigating between pages and keeping the animation.
@shmeltstudios 11 ай бұрын
check out the updated version: kzfaq.info/get/bejne/n6iEnNqErZymeWg.html
@fisopecaleb7564 8 ай бұрын
Got it on my first try…
@SIKAISTORE 10 ай бұрын
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 ❤❤
Design Wolf
Рет қаралды 2,6 М.
DesignWithKajal
Рет қаралды 49 М.