Menu Animation in Figma

Подписаться 29 тыс.

Просмотров 542 тыс.

50% 1

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

Хобби

Опубликовано:

31 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 303

@dsalex8737 10 месяцев назад

The frontend programmer seeing this:🤡🤡🤡

@genuinecopypaste546 7 месяцев назад

Haha 😂😂😂

@darkMystic__ 6 месяцев назад

Why?

@creativemind966 6 месяцев назад

Hahahahah😂😂😂😂

@Dhileep0382 5 месяцев назад

😂😂

@maquindesign9158 4 месяца назад

Designer vs engineering mindset.

@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 6 месяцев назад

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?

@luciaavilla6828 Год назад

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

@longmancole Год назад

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

@shmeltstudios Год назад

You're welcome!

@hazemalhabbal254 Год назад

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

@djashawe88923 Год назад

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

@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 5 месяцев назад

hey there

@JLF_17 День назад

@@mrunalbhoyar2518 create variants

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

@ishitaakaur1472 9 месяцев назад

wohooo, i was so proud doiing this, thanksss

@asadrais007 11 месяцев назад

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

@shmeltstudios 10 месяцев назад

check out the updated version: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-iBTiwSH6BI4.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.

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

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

@bettercallyass152 11 месяцев назад

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

@shmeltstudios 10 месяцев назад

check out the updated version: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-iBTiwSH6BI4.html

@bettercallyass152 10 месяцев назад

@@shmeltstudios Thank you

@ronitviradiya8162 5 месяцев назад

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

@lucasguilbe Год назад

such simple and amazing video!

@MasterBrain182 9 месяцев назад

Great content guys!

@theado3183 9 месяцев назад

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

@theincredibleaniket 18 дней назад

how will it navigates to different pages?

@TheInspiredGirl Год назад

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

@fishbarbeque8540 Год назад

This is insane!!!

@kyojurorengoku7451 4 месяца назад

cleared it 1st attempt . happy to do it

@uifry 3 месяца назад

Thank you so much for sharing amazing tutorial :)

@giangnguyentruong227 Год назад

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

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

@timilehinsolu4254 9 месяцев назад

Great tutorial!

@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

@pallavisalian5871 Год назад

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

@shmeltstudios Год назад

Noted! I will try l!

@imetu Год назад

you have a magical hands bro. special thanks o7

@XeroBitx 3 месяца назад

Thanks a lot!

@jacobpulley2126 7 месяцев назад

So helpful!

@dewagedeadityaputra4316 8 месяцев назад

Easy to understand 🔥

@Bharathux Год назад

That's cool detailed explanation video 🤓

@Salman_UiDesigner 3 месяца назад

How incredible🎉❤

@youyoubai6123 Год назад

Thank you for your tutorial. Helpful!

@shmeltstudios Год назад

Glad it was helpful!

@thedesignhub186 Год назад

It looks good 👍

@rithikakumar7781 Год назад

Thanks for the video, was very helpful!

@shmeltstudios Год назад

Glad I could help 🤟🏼

@davihiluany949 9 месяцев назад

brabo men, aprendi 3 coisas diferentes num video q era pra ensinar so uma

@lovindigital Месяц назад

Bro u're my god!

@marziehafkhami504 6 месяцев назад

Thank you

@thieutinhte Год назад

Thanks you! I really need it.

@shmeltstudios Год назад

Glad it helped!

@FarukAhmed-pc5hn 11 месяцев назад

Simply great!

@shmeltstudios 11 месяцев назад

Thanks 😊

@Muuhammad1905 Год назад

Amazing video, I really like it. Thank you

@shmeltstudios Год назад

I'm glad you like it

@rsrrajesh Год назад

very nice and simple explanation.. thank you

@shmeltstudios Год назад

Glad you liked it 🤙🏼

@vaishnavib.v4273 2 месяца назад

very helpful , and easy to follow thanks

@shmeltstudios 2 месяца назад

Glad it was helpful!

@PakistanTalk2244 11 месяцев назад

bro you literally saved me thanks alot

@shmeltstudios 11 месяцев назад

Glad I could help 👍🏼

@Dart-ct5qs 10 месяцев назад

realy good for new persons. thanks for oyu

@andrewtate70 11 месяцев назад

@Nodelez 8 месяцев назад

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?

@saranofal9365 Год назад

THANK YOU

@ColonialDesign 7 месяцев назад

Thank You.

@Tanmayislivee 6 месяцев назад

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

@sck0305 11 месяцев назад

Cool design!

@shmeltstudios 11 месяцев назад

Thanks you

@satishgupta786 3 месяца назад

In front end developer I take to make this menu more than 1 hours ,but man make within 5min and now I am feeling 🤡🤡

@AlKautsarProperty-nv9eg 20 дней назад

to change the white circle into transparent/png?

@adityaruhela1626 Год назад

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

@marcuskanayo1394 8 месяцев назад

Amazing

@Arnav3229 4 месяца назад

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?

@mariialeshchyshyna6039 Год назад

thank youuu😍😍

@yassreyt Год назад

Thankyou

@popcorntimes7537 Год назад

Easy to learn

@Trisuku Год назад

Thank you so much!

@shmeltstudios Год назад

You're welcome!

@imroatussholihah6268 10 месяцев назад

thanksss

@AndyHTu Год назад

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

@user-zr3pj8yr3q Год назад

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?

@designwizard3109 Год назад

Amazing tutorial

@shmeltstudios Год назад

Thank you 😊

@S3ncler Год назад

You are the best, thank u ❤️

@shmeltstudios Год назад

No, thank you!

@user-tt3bi7bk3s 2 месяца назад

nice one

@nourhanali1331 8 месяцев назад

This was great, thanks for sharing

@theincredibleaniket 18 дней назад

how will it navigates to different pages?

@nourhanali1331 18 дней назад

@@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 18 дней назад

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

@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

@yasminearezki6425 Год назад

best video ever , i swear

@shmeltstudios Год назад

Thank you!!

@aswin31apex2 Год назад

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

@shmeltstudios Год назад

Thank you, let me know how it comes out!

@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

@HunnyNetWork 9 месяцев назад

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

@passion5496 11 месяцев назад

Am new to Figma, anyone know how such animations can be exported? especially as a UI design to be used in android studio.

@22-marsbars-ru 2 месяца назад

WOW!

@kdhanushprabhu1694 8 месяцев назад

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

@vonaxeses3882 Год назад

Amazing!!!

@shmeltstudios Год назад

Thanks!!

@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 7 месяцев назад

did you get an answer?@@marrykulik242

@Mohit07yadav04 Год назад

thank you so much

@shmeltstudios Год назад

Thanks for watching ❤️

@rye1027 7 месяцев назад

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

@sankhlayashraj 6 дней назад

Can this be used in power appps

@kavyashreesankhala8618 Год назад

I did everything accordingly but, somehow in prototyping the change to option is not clickable , if anybody can help me out with this .

@inspirecodeteam Год назад

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

@amazingvideoscity Год назад

Can you create video for how this create on website

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

@Amu_design 8 месяцев назад

Tnx

@saidulhossain2539 Год назад

Really Osm

@gyulenglish Год назад

super tutorial!

@shmeltstudios Год назад

Thank you! Cheers!

@akirahojo2 11 месяцев назад

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

@shmeltstudios 11 месяцев назад

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

@brunnomartins Год назад

Amazing video. I'm just wondering how to do it on Elementor.

@MuskanSolanki-qy9tz Год назад

amazing

@shmeltstudios Год назад

Thank you! Cheers!

@subjectsahsanjaved148 Год назад

How to copy this exact design with animation on a web app?

@banu1690 5 месяцев назад

in prototype change to is not available sirr please replyyy

@praveenremix6421 Год назад

this best short sweet video about prototype

@shmeltstudios Год назад

Thank you!!

@Future_ology 8 месяцев назад

New Sub!

@SIKAISTORE 8 месяцев назад

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

@creativitywithkookie 4 месяца назад

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 4 месяца назад

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