Menu Animation in Figma

[@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]

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]

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?

[@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 👍🏼❤️

[@asadrais007]

Please make more tutorials like these, people love it and it's also your most popular video. Thanks!

[@shmeltstudios]

check out the updated version: kzbin.info/www/bejne/n3O3mqqJfZt1f5Y

[@RihabArshad-u1t]

My First Figma Prototype attemped and got succeed, I made it and I'm so happy about it. Thank you so much, Really Appreciated ! ❤

[@anukrititripathi152]

Awesome , fast and simple to understand 🔥🔥🔥🔥👍🏽 I request you to make more

[@shmeltstudios]

On it 🤟🏼

[@Frank_havre_creation]

YOOOOO This is pure wizardry! I love it!

[@shmeltstudios]

Thank youuu

[@theado3183]

Thank you so much! This is exactly what I've been looking for!

[@theaccidentaldesigner]

how will it navigates to different pages?

[@bettercallyass152]

Incredible effect! First time trying the animations in Figma and your video was really helpful

[@shmeltstudios]

check out the updated version: kzbin.info/www/bejne/n3O3mqqJfZt1f5Y

[@bettercallyass152]

@@shmeltstudios Thank you

[@djashawe88923]

Loving this quick, straightforward, and on point tutorial! Thankssss!

[@luciaavilla6828]

I really loved this animation. Thanks a lot for that.

[@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 🥰

[@pallavisalian5871]

I loved this tutorial. Thanks for it. Just one request! Please have more detailed videos too.

[@shmeltstudios]

Noted! I will try l!

[@hazemalhabbal]

Thank you a lot. You did it exactly how I was looking for ...10 out of 10👍🏻

[@chibified09]

at 4:00 you have only one task bar showing in your local component section in the left side , but in my case i can see all three of my designs this is why my animation is not working , how to correct it

[@shmeltstudios]

That would be because you need to make them into a component set

[@dsalex8737]

The frontend programmer seeing this:🤡🤡🤡

[@CricBossHighlights]

Haha 😂😂😂

[@darkMystic__]

Why?

[@creativemind966]

Hahahahah😂😂😂😂

[@Dhileep0382]

😂😂

[@maquindesign9158]

Designer vs engineering mindset.

[@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!!

[@erhanyilmaz2102]

Great tutorial 👌, loved background music

[@longmancole]

Thank you. I love the step-by-step actionable guide. This is relatable.

[@shmeltstudios]

You're welcome!

[@Runawaygeekchannel]

Thank you for this, while I did not make the tutorial, the lesson was really helpful and I made an exploding selection icon. Mouse hover animates words to hover around an icon, of which you can select, and the icon populates with that word. It's for a config tool. Thank you.

[@BeatN]

That was really helpful. Added a new piece of knowledge.

[@rehahazir5403]

I have a question, during the transition from Home to Settings animation, the white circle passes over the fire symbol. Visually I don't like it very much, what should I do to fix this? Is it because of the order in which the animation links are connected or should I increase the animation ms speed?

[@imetu]

you have a magical hands bro. special thanks o7

[@ABitAppled]

The color scheme is great!

[@TalhaUs2244]

bro you literally saved me thanks alot

[@shmeltstudios]

Glad I could help 👍🏼

[@julikumari6078]

Can you help me with the prototyping? I connected all the elements like video, but it doesn't show up correctly. In prototyping, it doesn't appear the same way.

[@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!

[@ronitviradiya]

It's an amazing animation for menu bar I appreciate you 😌

[@MasterBrain182]

Great content guys!

[@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.

[@bwaldsch23]

That's fantastic, thank you for sharing. :)

[@ishitaakaur1472]

wohooo, i was so proud doiing this, thanksss

[@giangnguyentruong227]

That's great video, It helps me get used to Figma :D

[@hugeiconspro]

Really useful tutorial, thanks a lot! 👏

[@surjeetkumar3620]

How will we shift between the screen, when we have applied 'on tap' prototype on all btns to navigated between the navigation?

[@FarhanFHN29]

Interesting I Learned a lot. Thanks to you.

[@shmeltstudios]

Glad it was helpful!

[@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?

[@satishgupta786]

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]

As a programmer.. It is nightmare bro😂😂

[@TariqueBarlas]

Hey, great work. Just a question. How can you animate this if an image or other items are behind this bar?

[@leonardoscalone5617]

Hello! i was wondering if there's a procedure to export the design with the animaton to flutterflow. Thanks!

[@sck0305]

Cool design!

[@shmeltstudios]

Thanks you

[@Arnav3229]

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?

[@uifry]

Thank you so much for sharing amazing tutorial :)

[@rithikakumar7781]

Thanks for the video, was very helpful!

[@shmeltstudios]

Glad I could help 🤟🏼

[@lucasguilbe]

such simple and amazing video!

[@inspirecodeteam]

I put the component but it is three things and cannot animate it. Also Please give your project pls.

[@Vaishnavibv2003]

very helpful , and easy to follow thanks

[@shmeltstudios]

Glad it was helpful!

[@youyoubai6123]

Thank you for your tutorial. Helpful!

[@shmeltstudios]

Glad it was helpful!

[@Tanmayislivee]

I'm having doubt in the prototyping part so can you explain it in any of your upcoming videos or in any short video?

[@Bored_ArtInstructor]

This is super cool.

[@Bharathux]

That's cool detailed explanation video 🤓

[@kyojurorengoku7451]

cleared it 1st attempt . happy to do it

[@julikumari6078]

Could you please help me out with the prototype it doesn't appear like that after connecting all the elements but it still does not work.

[@rsrrajesh]

very nice and simple explanation.. thank you

[@shmeltstudios]

Glad you liked it 🤙🏼

[@סאןאגאבאבא]

Hey friend Great video I did it for application design and I have a question The homepage in my app is scrollable and have images in it and then the white circle that make the shape of the button is visible when it’s over an image There is an option to make it invisible? If I lower the opacity it’s hurt the button shape

[@shmeltstudios]

Yes there is an updated video of that menu on my channel!

[@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]

did you get an answer?@@marrykulik242

[@theasofiemyrbraaten9544]

is it possible that there are components in your frames that have different names between the frames? All components has to have the same names in all frames to animate properly (i see that it has been a year since you commented, but i am curious as to what happened and if you found out what was the issue?)

[@asturianoPromedio]

Pretty nice 💫

[@fishbarbeque8540]

This is insane!!!

[@aswin31apex2]

Great manh...🎉🎉 I'm gonna try

[@shmeltstudios]

Thank you, let me know how it comes out!

[@Muuhammad1905]

Amazing video, I really like it. Thank you

[@shmeltstudios]

I'm glad you like it

[@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 👍🏼

[@PreetiSharma-hv7rl]

I am the only one who facing new features complexity of figma couse you didnt choose desktop and you have it automatically and in my case. I have to choose it and it make me difficult to make frame and in assest field it not same as yours showing i am pretty confused

[@chebrolutejopriya294]

hey! can any one tell me what just happened at 1:55 ......i was'nt able to figure it ....how does the whole rectangle box turned black 🤔

[@shmeltstudios]

I turned the circle off to scale my icons, but you can leave it on. Just a video edit mishap on my part sorry about that!

[@averagehippo6436]

A quick question, how do u make them so when u click the home button it goes to the home screen/page not just an animation?

[@shmeltstudios]

you could prototype the buttons to go to new screens when they are tapped, I may make another video on how to do that

[@thieutinhte]

Thanks you! I really need it.

[@shmeltstudios]

Glad it helped!

[@FarukAhmed-pc5hn]

Simply great!

[@shmeltstudios]

Thanks 😊

[@TheInspiredGirl]

Thankyou so much . I did this ,as a beginner it is an interesting thing to do in figma

[@prabhakarstechniques574]

After making component i only get rectangle, home , fire , and setting icins disappear 😢

[@Dart-ct5qs]

realy good for new persons. thanks for oyu

[@akirahojo2]

What if you need to make the half-circle ‘cutout’ transparent? So you can see through content in the background when scrolling?

[@shmeltstudios]

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 😵‍💫

[@amazingvideoscity]

Can you create video for how this create on website

[@WaGames]

wow, its so cool!

[@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

[@timilehinsolu4254]

Great tutorial!

[@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

[@whytesmith9655]

Mine isn't bringing out the ontap option for the others, only for the home is there a reason behind this and how can I solve it

[@creativitywithkookie]

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]

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

[@junjie83]

@@akshaybillore hi im facing this problem too. Did you solve it? Can you help me?

[@akshaybillore]

@junjie83 Nope, still figuring out 🙂

[@junjie83]

@@akshaybillore hi mate, I just found a solution, maybe you can try it: To connect your Figma navigation bar with different screens and enable screen changes when tapping on it, follow these steps: Place on All Screens: Copy and paste the navigation bar onto all screens where you want it to appear. Use Variants: Utilize the "Variants" feature to create different states for the navigation bar, e.g., Home, Search, Profile. Customize Each Variant: Edit each variant to show the active state for that screen, like highlighting icons or changing colors. Prototype Interactions: Link each navigation item (e.g., Search icon) to its respective screen in the "Prototype" section. Once your done test your prototype and make necessary changes.

[@Dods-l5v]

Easy to understand 🔥

[@BrianHoang-r1v]

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]

check out the updated version: kzbin.info/www/bejne/n3O3mqqJfZt1f5Y

[@kailashsoni676]

Awesome sir, so can we use this bottom navigation in android studio

[@meerzaighamali9713]

why did you move with speed of light while doing prototyping?

[@Nathan-z7i3x]

Helpp I don't understand why it doesn't let me put the "change to" option on prototyping :(

[@gothicgames4767]

Hello! You forgot to mention that you created an opening frame. Also you didn't mention that you grouped the 2 circles you made. Also, when I click on the interaction the "change to" is greyed out. I'm using the free version. Do I have to use the pay version to get this to work? Thanks.

[@shmeltstudios]

You shouldnt have to pay but check out the updated version: kzbin.info/www/bejne/n3O3mqqJfZt1f5Y

[@3mcreative]

how to make that "weird ugly driping shape" transparant and animated like the circle ? i try use substract selection, yes that "weird shape" become transparant, but when i use smart animated, its just got "dissolve" effect, not moving effect like the circle shape, any suggestion ?

[@shmeltstudios]

I did that as well at first and the animation messes up that’s why I did the shape on top. I know I wish I could do it the other way too!

[@hanyrae]

@@shmeltstudios so what did you do to make those two shapes slide? i'm also getting the dissolve effect..

[@zyforkie]

Something is wrong with my prototype. Whenever I drag the prototype, it just go off, like I already do all the steps correctly but I still didn't know why. Do you know how to fix this?

[@calebsuggests749]

bro this is cool.. i really need a link to your icons

[@yasminearezki6425]

best video ever , i swear

[@shmeltstudios]

Thank you!!

[@thedesignhub186]

It looks good 👍

[@SpadeNave]

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

[@rye1027]

Trying to find the Iconduck plugin in figma's plugins. How do I get access?

[@SIKAISTORE]

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 ❤❤

[@nourhanali1331]

This was great, thanks for sharing

[@theaccidentaldesigner]

how will it navigates to different pages?

[@nourhanali1331]

@@theaccidentaldesigner 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!

[@theaccidentaldesigner]

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

[@kdhanushprabhu1694]

For change to option do we have to pay? For me the change to option is unable to click?

[@joshuaokoh656]

Great video the only challenge I had is that ON TAP option was not clickable for me. please how do I resolve that

[@shmeltstudios]

Check to make sure all of your layers are in the component set, also make sure the you didn’t already have an on tap interaction already set up for that element. Let me know if this helps

[@rifat018]

Bro, I am new here, so how can I apply these frontend designs in the backend, please tell me

[@AndyHTu]

This is pretty incredible. How hard is this to export to editor x?

[@Nodelez]

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?

[@zyan...]

beautiful

[@edidiongani]

am super excited to try this, thanks for sharing but on a second thought, My mind is just right now "you want to frustrate that your innocent developer"😅

[@EstyOp]

So this wouldn’t work for developing stage?

[@HunnyNetWork]

Thank you. But for me, bottom frame comes up when clicking the settings icon. Not sure what I did wrong here

[@jacobpulley2126]

So helpful!