Oh thank you so much, this video helped me a lot, I was trying to learn how to do this transitions, but did not find a good and objective explanation like yours ❤️
Wow, this tutorial is incredibly helpful! I'm new to Figma and was struggling to create an animated navigation bar. Your step-by-step explanation made it so much easier to understand.
For anyone wondering how to incorporate this into an actual app when you don't want to use smart animate for the entire frame and just the dashboard, Prototype the circle to the page it's supposed to open, like the eclipse around home to home page with Trigger: After Delay Delay: 1ms Action: Navigate to Destination: The page the button will be opening Animation: Instant For smoother transition you can change the smart animate of the icon to Ease out at 200-300ms
Is there only 1 possible action per tigger possible? Like.. you "only" changed the design of the Nav bar with the "on click" trigger. In reality this also should lead to another screen. But now the on click trigger is occupied and cant be used again.
Hello! I wanted to ask how this can be adapted between frames? Let's say I did the same effect (many thanks) and I want them to be working (that is, when the account button is pressed, there was a transition to this page, but the animation was saved)
Hi! Thank you so much for the tutorial! I followed it thoroughly but I just have one issue- when I present it to view how it works, Figma throws "A prototype needs to have at least 1 frame". I selected the main frame( in my case, a desktop) and tried, but it still shows the same. I'm new to Figma, any help would be much appreciated. Thanks!
i have a problem… when I put the menu bar with 'changed icon' on another page and I connect the icons to the corresponding pages it doesn't show me the smooth action I created except even if I connect with smart animation, it show me all the page with the smart animation
This is great ... This explanation is great... However, how to connect to another page with this animation that is the part where i am getting stuck... Can you please explain that?
Hello, i've been wondering how it works for long as well, none of these stupid videos tell you how, i figured it out though, when you make the component bring it in through the assets tab, and copy it to all the pages you plan to keep it on, and then in the properties, you'll see component one or whatever you have named the component and its property, change that property to whatever name youve given for the next variation and then connect the icon to the next page via smart animate, this should work
ok I was able to do this successfully, however now I'm stuck at the part where I need the app to change to the corresponding screen while keeping the animation I just achieved. I'm so confused
Hello. Can you help me,? I am desperate! I did it following the step by step of your video. But when running the preview, the movement is not fluid like yours. Objects move quickly. I already ruled out that it was a problem on the PC, my figma is the free version. I recorded the PC screen and put it on the drive so you can see it. Follow the link.
Hello! I'm sorry to hear that you're experiencing some difficulties with the animation. It's important to ensure that the duration for your transitions is set correctly. In our tutorial, we've used a specific time to achieve the smooth effect. Also, did you know that we've provided a free Figma source file for this tutorial? It's in the description below the video. You can download it and directly see how we've set up the animations and transitions. It should give you a good reference point to compare with your project. Unfortunately, due to platform restrictions, I'm unable to access the link you've shared. It's best to double-check the animation settings in your file against our provided source file, and adjust accordingly. If you still experience difficulties, feel free to share more about the specific issue you're encountering in the comments. We're here to help.
Thanks and help! I loved the tutorial and I followed all the steps, but something went wrong with the prototyping... My animation is smooth except when I click on the first icon... The prototype settings are exactly the same but the smart animate doesn't work. Instead there is some kind of blend. Can you maybe help me?
Hello, I'm sorry to hear you're having trouble with the prototyping. The issue might be related to a small oversight in the layer naming or grouping. Smart Animate matches layers based on their names, so make sure the layers you want to animate have the same name across all frames. Also, remember to keep the layer hierarchy consistent as it plays a crucial role in how Figma interprets transitions. If you've checked these and it's still not working, try duplicating the last frame where the animation worked correctly, then adjust it for the next interaction. This way, you'll be sure you're working with the right layer names and hierarchy. I hope this helps! If you're still having issues, feel free to reply with more detail and we'll do our best to help you troubleshoot.
@@tonigrubl2441 That's fantastic! I'm glad the solution worked out for you. Animation issues can be tricky but it seems you managed to navigate through it with ease. 😊
@@uxpeak Okay I got another problem... My frame height is longer so that you can scroll vertically. I fixed the navigation bar so that it sticks to the bottom, but every time I'm clicking on it and my scroll position is further down, the nav bar jumps to the top for a sec so that the animation is gone. What do I do? Is this a bug in figma or do I have to change something in the prototype settings? Thanks for your help!
@@tonigrubl2441 Hello! Make sure that your navigation bar is marked as 'Fixed Position' - you can verify this by checking the 'Fix position when scrolling' box in the right-hand panel when your navigation bar is selected. This should keep your navigation bar anchored at the bottom during scrolling. If you're still having trouble, it could be a temporary glitch. Without seeing your Figma file, it's a bit difficult to diagnose the problem accurately. If the issue persists, it may indeed be a bug within Figma and I would suggest reaching out to their support team with your specific issue.
Hello, i've been wondering how it works for long as well, none of these stupid videos tell you how, i figured it out though, when you make the component bring it in through the assets tab, and copy it to all the pages you plan to keep it on, and then in the properties, you'll see component one or whatever you have named the component and its property, change that property to whatever name youve given for the next variation and then connect the icon to the next page via smart animate, this should work
Absolutely, code gives you incredible flexibility! Figma's a great place to shape those cool ideas before bringing them to life with code. Continue creating amazing things! 😊👍
Great tutorial. Really apricated for the video. But I need a little guidance about how I connect the menu buttons with the actual pages.
same
same
you explained so smoothly
Hey, glad that you liked it :)
Excellent video, this is explained perfectly. I feel like if I were to pay for a tutorial, this is how it should be.
Thank you so much for your kind words! We're thrilled to hear that you like the tutorial!
thank you so much I'm looking for many people making it but yours is easy to understand thank youuuu
Thank you. We are so happy to hear that :)
Wow. Just wow. This is gold....
I was wondering how to carry this out in web coding, and this is the trick! (6:38) You Genius!
Amazing prototype and design sense I really appreciate 🥰
Glad that you liked it :)
Oh thank you so much, this video helped me a lot, I was trying to learn how to do this transitions, but did not find a good and objective explanation like yours ❤️
Oh, thank you very much :)
Wow, this tutorial is incredibly helpful! I'm new to Figma and was struggling to create an animated navigation bar. Your step-by-step explanation made it so much easier to understand.
Thank you Lenka. We are really happy to hear that it was helpful :)
Superb!
Glad that you liked it! :)
Wonderful, thank you so much!
Fantastic! Thank u very much
thanks man. Finally found a video which actually helped and worked🤜🤛
Very happy to hear that :)
Waw, i appreciate all of your works
Wow, amazing. Thank you so much.
Ahh, happy to hear that you liked it :)
Great tutorial!
Thank you. We are so happy to hear that! :)
For anyone wondering how to incorporate this into an actual app when you don't want to use smart animate for the entire frame and just the dashboard,
Prototype the circle to the page it's supposed to open, like the eclipse around home to home page with
Trigger: After Delay
Delay: 1ms
Action: Navigate to
Destination: The page the button will be opening
Animation: Instant
For smoother transition you can change the smart animate of the icon to Ease out at 200-300ms
Thank you!
RIP my headphone with that intro song
Great tutorial 👍
Really happy to hear that you like it. Thank you for watching.
VERY GOOD JOB
Thank you :)
Is there only 1 possible action per tigger possible? Like.. you "only" changed the design of the Nav bar with the "on click" trigger. In reality this also should lead to another screen. But now the on click trigger is occupied and cant be used again.
yea it cant lead you to another screen, it only change navigator bar
Same problem😢
Use sections it preserves back actions
@@dennisalbert6115 ?
thankyouuu so much!!!
You're welcome. Thank you for watching.
We want more videos like design and prototypes.. Industry level
So good. Subbed!
Thrilled to have you as a subscriber! Thanks for your support, and looking forward to sharing more content with you!
This is GREAT! Thx. Yet, how can we make screens change with nav bar?
Got it, thanks🎉
thanks this is wonderful! How to change the screen with the navigation?
Excellent video
thank u mate
You're welcome! :)
nice one mate,,
Thank you. We are happy to hear that you like it :)
Hello! I wanted to ask how this can be adapted between frames? Let's say I did the same effect (many thanks) and I want them to be working (that is, when the account button is pressed, there was a transition to this page, but the animation was saved)
Did you figure this out yet?
Pretty sure its not possible the way figma is working at the moment.
great bottom bar animation tutorial, so how could i do that in the programming? thank you
it's cool but, it stays in the same page. Wanna see when you click on a nav bar and it changes page. thanks
THANKS!
You're welcome. Thank you for watching :) More exciting things coming soon.
Hi! Thank you so much for the tutorial! I followed it thoroughly but I just have one issue- when I present it to view how it works, Figma throws "A prototype needs to have at least 1 frame". I selected the main frame( in my case, a desktop) and tried, but it still shows the same. I'm new to Figma, any help would be much appreciated. Thanks!
bravo tnx dude for that
i have a problem… when I put the menu bar with 'changed icon' on another page and I connect the icons to the corresponding pages it doesn't show me the smooth action I created except even if I connect with smart animation, it show me all the page with the smart animation
But how do I navigate to other page with this animation? since only one interaction can apply at the same time
This is amazing. Love the video ❤ Thank you very much.
Thank you very much for your feedback :) Made our day
Icon animation working, but screens are not changing, please help
You have to prototype it , each icon connecting to different page
This is great ... This explanation is great... However, how to connect to another page with this animation that is the part where i am getting stuck... Can you please explain that?
Hello, i've been wondering how it works for long as well, none of these stupid videos tell you how, i figured it out though, when you make the component bring it in through the assets tab, and copy it to all the pages you plan to keep it on, and then in the properties, you'll see component one or whatever you have named the component and its property, change that property to whatever name youve given for the next variation and then connect the icon to the next page via smart animate, this should work
ok I was able to do this successfully, however now I'm stuck at the part where I need the app to change to the corresponding screen while keeping the animation I just achieved. I'm so confused
Same issue with me
very clean, but the animation doesn't work properly when connecting different frames to each option of the nav bar, how do i do that?
how will the screen change? its on same screen make double action screen + animation
How do you make it so when you click on the icons that move in the video that it goes to another wireframe ?
Very nice sir
hi, i have a question. How can i use your design to switch frames when u pick an icon ?. Hope you could answer this..tysm
i have this exact question, did you find a way to do it yet?
@@magnusweylin5636😢 four months later I am here.
Did you find a way yet?
Appreciate the design but how can one code this?
Hello. Can you help me,? I am desperate!
I did it following the step by step of your video. But when running the preview, the movement is not fluid like yours. Objects move quickly.
I already ruled out that it was a problem on the PC, my figma is the free version.
I recorded the PC screen and put it on the drive so you can see it. Follow the link.
drive.google.com/file/d/1tB5L63ohd-kWX-x1EEe-fS4utS1pVjUr/view?usp=drivesdk
Hello! I'm sorry to hear that you're experiencing some difficulties with the animation. It's important to ensure that the duration for your transitions is set correctly. In our tutorial, we've used a specific time to achieve the smooth effect.
Also, did you know that we've provided a free Figma source file for this tutorial? It's in the description below the video. You can download it and directly see how we've set up the animations and transitions. It should give you a good reference point to compare with your project.
Unfortunately, due to platform restrictions, I'm unable to access the link you've shared. It's best to double-check the animation settings in your file against our provided source file, and adjust accordingly.
If you still experience difficulties, feel free to share more about the specific issue you're encountering in the comments. We're here to help.
but how to stay animate when change page
Hy why didn't you use auto layout?
By the way it's a osm tutorial 😍
Thanks and help! I loved the tutorial and I followed all the steps, but something went wrong with the prototyping... My animation is smooth except when I click on the first icon... The prototype settings are exactly the same but the smart animate doesn't work. Instead there is some kind of blend. Can you maybe help me?
Hello, I'm sorry to hear you're having trouble with the prototyping. The issue might be related to a small oversight in the layer naming or grouping. Smart Animate matches layers based on their names, so make sure the layers you want to animate have the same name across all frames. Also, remember to keep the layer hierarchy consistent as it plays a crucial role in how Figma interprets transitions.
If you've checked these and it's still not working, try duplicating the last frame where the animation worked correctly, then adjust it for the next interaction. This way, you'll be sure you're working with the right layer names and hierarchy.
I hope this helps! If you're still having issues, feel free to reply with more detail and we'll do our best to help you troubleshoot.
@@uxpeak Thank you! I exchanged the first icon and removed all prototype settings and then it worked! So happy :D
@@tonigrubl2441 That's fantastic! I'm glad the solution worked out for you. Animation issues can be tricky but it seems you managed to navigate through it with ease. 😊
@@uxpeak Okay I got another problem... My frame height is longer so that you can scroll vertically. I fixed the navigation bar so that it sticks to the bottom, but every time I'm clicking on it and my scroll position is further down, the nav bar jumps to the top for a sec so that the animation is gone. What do I do? Is this a bug in figma or do I have to change something in the prototype settings? Thanks for your help!
@@tonigrubl2441 Hello!
Make sure that your navigation bar is marked as 'Fixed Position' - you can verify this by checking the 'Fix position when scrolling' box in the right-hand panel when your navigation bar is selected. This should keep your navigation bar anchored at the bottom during scrolling.
If you're still having trouble, it could be a temporary glitch. Without seeing your Figma file, it's a bit difficult to diagnose the problem accurately. If the issue persists, it may indeed be a bug within Figma and I would suggest reaching out to their support team with your specific issue.
Hope all this tutorials are in uxui course........I will not be happy if after buying the course I can't find this stuff........
This tutorial is not included in the course. There are other unique videos that are in the course that are not on UA-cam.
And can i use it in WordPress?
I want to do this - when I click clock button it will go to clock screen but the navigation animation should work together. Is it possible?
Same problem 😢
animation is fine but how to navigate to tab?
Awesome tutorial but linking the tabs together doesn't link to actual pages in the app, instead it should be linked to the pages themselves
how do I make the screen behind change aswell
Change the varieties as per the screen and prototype it.
Hello, i've been wondering how it works for long as well, none of these stupid videos tell you how, i figured it out though, when you make the component bring it in through the assets tab, and copy it to all the pages you plan to keep it on, and then in the properties, you'll see component one or whatever you have named the component and its property, change that property to whatever name youve given for the next variation and then connect the icon to the next page via smart animate, this should work
but the page doesnt change??
The fact that i can make this with code and can't in figma
Absolutely, code gives you incredible flexibility! Figma's a great place to shape those cool ideas before bringing them to life with code. Continue creating amazing things! 😊👍
frame WHAT
Hey, thank you for watching. Sorry, you need to be more specific to help you with instructions.
@@uxpeak Sorry I have no idea what I was on about, Sorry again. This is a really cool tutorial btw
11 minutes for a designer to draw and a week for a developer to implement it 🤣
Yes, of course nothing of this can be exported to android studio or web, right?
how will the screen change? @uxpeak