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!!
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
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
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.
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
looks nice but for a developer to create this UI this is a very painful job. also commercial apps don't have this much animation as it loses focus from the content
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 ❤❤
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!
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?)
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 👍🏼
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?
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
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
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
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 😵💫
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 ?
The active state doesn't show the gap between the navigation because of the color filled of the circle. Do you have a tutorial that show the background gap between the active state and nav bar?
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.
Hey, I used this and it worked (looks super smooth) but how do I implement it so that when I want to change to a different section in the app itself, it can both show the animation and navigate to that particular place?
@@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!
@@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
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
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?
The frontend programmer seeing this:🤡🤡🤡
Haha 😂😂😂
Why?
Hahahahah😂😂😂😂
😂😂
Designer vs engineering mindset.
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 👍🏼❤️
My First Figma Prototype attemped and got succeed, I made it and I'm so happy about it. Thank you so much, Really Appreciated ! ❤
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
Incredible effect! First time trying the animations in Figma and your video was really helpful
check out the updated version: th-cam.com/video/iBTiwSH6BI4/w-d-xo.html
@@shmeltstudios Thank you
I loved this tutorial. Thanks for it. Just one request! Please have more detailed videos too.
Noted! I will try l!
Awesome , fast and simple to understand 🔥🔥🔥🔥👍🏽
I request you to make more
On it 🤟🏼
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.
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 🥰
I really loved this animation. Thanks a lot for that.
Loving this quick, straightforward, and on point tutorial! Thankssss!
Thank you a lot. You did it exactly how I was looking for ...10 out of 10👍🏻
YOOOOO
This is pure wizardry! I love it!
Thank youuu
I put the component but it is three things and cannot animate it. Also Please give your project pls.
Awesome Tutorial! Just made this design and learned how to use components more effectively!
Thanks so much! 👍🏼 and yes components are super helpful!!
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
bro you literally saved me thanks alot
Glad I could help 👍🏼
That was really helpful. Added a new piece of knowledge.
Great tutorial 👌, loved background music
this video is good,, thank you so much but i want a separate video for the components connection, pllzz make a video over this
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!
Interesting I Learned a lot. Thanks to you.
Glad it was helpful!
The color scheme is great!
you have a magical hands bro. special thanks o7
That's great video, It helps me get used to Figma :D
After making component i only get rectangle, home , fire , and setting icins disappear 😢
looks nice but for a developer to create this UI this is a very painful job. also commercial apps don't have this much animation as it loses focus from the content
such simple and amazing video!
Is the voice AI? Or is it you cutting your voice so sharply?
Thank you for your tutorial. Helpful!
Glad it was helpful!
In front end developer I take to make this menu more than 1 hours ,but man make within 5min and now I am feeling 🤡🤡
As a programmer.. It is nightmare bro😂😂
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 ❤❤
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
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?)
Thanks for the video, was very helpful!
Glad I could help 🤟🏼
i try use it in frame but it couldnt work.Can you show how we can active it in frames?
Great content guys!
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
Hey, great work. Just a question. How can you animate this if an image or other items are behind this bar?
realy good for new persons. thanks for oyu
wohooo, i was so proud doiing this, thanksss
Pretty nice 💫
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 👍🏼
Amazing video, I really like it. Thank you
I'm glad you like it
Thank you so much for sharing amazing tutorial :)
Can you create video for how this create on website
HOW WE WILL NAVIGATE TO DIFFERENT PAGES WITH THIS? IN A SINGLE TAP
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?
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
That's cool detailed explanation video 🤓
very helpful , and easy to follow thanks
Glad it was helpful!
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
That would be because you need to make them into a component set
this UI design have white background behind it what if it has background coured background
This is alright but what confuses me is how can I change my screens? Like when I click on the other button screen is not changing for me.
brabo men, aprendi 3 coisas diferentes num video q era pra ensinar so uma
This is insane!!!
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
Yes there is an updated video of that menu on my channel!
For change to option do we have to pay? For me the change to option is unable to click?
I have no animation showing as a picture, I did something wrong help
Thank you so much!
You're welcome!
What is drag down please guide its so hard to make this ahh😢
how do you make group please explain properly
how could we connect this to pages?
this best short sweet video about prototype
Thank you!!
thank you so much
Thanks for watching ❤️
best video ever , i swear
Thank you!!
tidy up option is not clickable in my laptop, so i couldn't do further animation steps
what to do??
check out the updated version: th-cam.com/video/iBTiwSH6BI4/w-d-xo.html
Trying to find the Iconduck plugin in figma's plugins. How do I get access?
Great video the only challenge I had is that ON TAP option was not clickable for me. please how do I resolve that
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
Is that free Figma or paid one? Im totally new to this all.
Can that be implemented easily to an application or it is better to hire an animator.
Amazing tutorial
Thank you 😊
why is my change to grey?:(
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 😵💫
How to export figma file in local folders
How can i import those figma animations to my webflow website?
How do i use it on a website?
super tutorial!
Thank you! Cheers!
Which shortcut key use to drag the frame
You can either press option and drag to duplicate or cmd D to duplicate.
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 ?
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!
@@shmeltstudios so what did you do to make those two shapes slide? i'm also getting the dissolve effect..
I did everything accordingly but, somehow in prototyping the change to option is not clickable , if anybody can help me out with this .
Bro u're my god!
Amazing!!!
Thanks!!
You are the best, thank u ❤️
No, thank you!
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 🤔
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!
in my case everything is fading off and fading help me
can we change this animation in word press using coding
The active state doesn't show the gap between the navigation because of the color filled of the circle. Do you have a tutorial that show the background gap between the active state and nav bar?
check out the updated version: th-cam.com/video/iBTiwSH6BI4/w-d-xo.html
Thank You.
Easy to learn
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.
You shouldnt have to pay but check out the updated version: th-cam.com/video/iBTiwSH6BI4/w-d-xo.html
thanksss
This is great, but why I can't see "Change to" on prototype?
I’ll make a video for that
THANK YOU
Hey, I used this and it worked (looks super smooth) but how do I implement it so that when I want to change to a different section in the app itself, it can both show the animation and navigate to that particular place?
check out the updated version: th-cam.com/video/iBTiwSH6BI4/w-d-xo.html
"Change to" option is not showing up nor is "on click " could you guess what might be the issue
check out the updated version: th-cam.com/video/iBTiwSH6BI4/w-d-xo.html
What is option drag down? How to do it
Option drag is just another way to copy and paste, but faster 👍🏼
This was great, thanks for sharing
how will it navigates to different pages?
@@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!
@@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