Animated Navigation Bar in Figma - Prototyping Tutorial
HTML-код
- Опубликовано: 28 май 2023
- Hello and welcome to our channel. In this step-by-step tutorial, we are going to show you how to design and prototype a modern animated navigation bar in Figma. As a bonus, we've prepared for you a free source file link that you use to copy our design.
Enjoyed this tutorial? If you want to learn more about UX/UI Design feel free to check out our UX/UI Design Mastery Course. It's a one-course you'll need to kickstart your UX/UI design career, packed with in-depth lessons, practical hands-on exercises, and invaluable tips straight from industry professionals. Transform your passion into expertise and become the designer you've always wanted to be.
Here's the link to kickstart your UX/UI design journey: www.uxpeak.com/
Check out our top UI/UX design ebook (Over 6000 designers downloaded it already): app.gumroad.com/products/nvyz...
Source file: uxpeak.gumroad.com/l/emudsr
Feel free to join our community
Instagram - / uxpeak_
Twitter - / uxpeak_
Linkedin - / uxpeak
#Figma #UXDesign #FigmaTutorial #uidesign #ui
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!
Wow. Just wow. This is gold....
Waw, i appreciate all of your works
Wonderful, thank you so much!
I was wondering how to carry this out in web coding, and this is the trick! (6:38) You Genius!
Thanks bro for making this video. I can now finish my task. Thanks a lot
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 :)
Fantastic! Thank u very much
Thank you!
Got it, thanks🎉
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 :)
We want more videos like design and prototypes.. Industry level
Great tutorial!
Thank you. We are so happy to hear that! :)
thanks man. Finally found a video which actually helped and worked🤜🤛
Very happy to hear that :)
Excellent video
So good. Subbed!
Thrilled to have you as a subscriber! Thanks for your support, and looking forward to sharing more content with you!
bravo tnx dude for that
Great tutorial 👍
Really happy to hear that you like it. Thank you for watching.
This is GREAT! Thx. Yet, how can we make screens change with nav bar?
This is amazing. Love the video ❤ Thank you very much.
Thank you very much for your feedback :) Made our day
THANKS!
You're welcome. Thank you for watching :) More exciting things coming soon.
Very nice sir
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
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!
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 :)
nice one mate,,
Thank you. We are happy to hear that you like it :)
How do you make it so when you click on the icons that move in the video that it goes to another wireframe ?
RIP my headphone with that intro song
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 ?
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
Hy why didn't you use auto layout?
By the way it's a osm tutorial 😍
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.
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?
animation is fine but how to navigate to tab?
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
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 😢
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.
how do I make the screen behind change aswell
Change the varieties as per the screen and prototype it.
but the page doesnt change??
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.
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
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! 😊👍
how will the screen change? @uxpeak