Wow. Just wow. This is gold....

Waw, i appreciate all of your works

Wonderful, thank you so much!

Thanks bro for making this video. I can now finish my task. Thanks a lot

Fantastic! Thank u very much

Excellent video, this is explained perfectly. I feel like if I were to pay for a tutorial, this is how it should be.

@uxpeak

Жыл бұрын

Thank you so much for your kind words! We're thrilled to hear that you like the tutorial!

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

@uxpeak

25 күн бұрын

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.

@uxpeak

Жыл бұрын

Thank you Lenka. We are really happy to hear that it was helpful :)

I was wondering how to carry this out in web coding, and this is the trick! (6:38) You Genius!

Thank you!

thanks man. Finally found a video which actually helped and worked🤜🤛

@uxpeak

25 күн бұрын

Very happy to hear that :)

We want more videos like design and prototypes.. Industry level

Excellent video

Wow, amazing. Thank you so much.

@uxpeak

12 күн бұрын

Ahh, happy to hear that you liked it :)

Great tutorial!

@uxpeak

Жыл бұрын

Thank you. We are so happy to hear that! :)

So good. Subbed!

@uxpeak

Жыл бұрын

Thrilled to have you as a subscriber! Thanks for your support, and looking forward to sharing more content with you!

This is amazing. Love the video ❤ Thank you very much.

@uxpeak

Жыл бұрын

Thank you very much for your feedback :) Made our day

Great tutorial 👍

@uxpeak

Жыл бұрын

Really happy to hear that you like it. Thank you for watching.

bravo tnx dude for that

THANKS!

@uxpeak

Жыл бұрын

You're welcome. Thank you for watching :) More exciting things coming soon.

thanks this is wonderful! How to change the screen with the navigation?

Great tutorial. Really apricated for the video. But I need a little guidance about how I connect the menu buttons with the actual pages.

@edhiedwardmusic820

4 ай бұрын

same

@salmaomar6254

3 ай бұрын

same

This is GREAT! Thx. Yet, how can we make screens change with nav bar?

Very nice sir

nice one mate,,

@uxpeak

Жыл бұрын

Thank you. We are happy to hear that you like it :)

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!

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.

@pascalchn

6 ай бұрын

yea it cant lead you to another screen, it only change navigator bar

@Chlupro

5 ай бұрын

Same problem😢

@dennisalbert6115

5 ай бұрын

Use sections it preserves back actions

@Winterhe4rt

5 ай бұрын

@@dennisalbert6115 ?

RIP my headphone with that intro song

thank you so much I'm looking for many people making it but yours is easy to understand thank youuuu

@uxpeak

3 ай бұрын

Thank you. We are so happy to hear that :)

how will the screen change? its on same screen make double action screen + animation

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 do you make it so when you click on the icons that move in the video that it goes to another wireframe ?

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)

@lucasvanhoutven5349

10 ай бұрын

Did you figure this out yet?

@Winterhe4rt

7 ай бұрын

Pretty sure its not possible the way figma is working at the moment.

Appreciate the design but how can one code this?

animation is fine but how to navigate to tab?

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

@magnusweylin5636

Ай бұрын

i have this exact question, did you find a way to do it yet?

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

@yousafayub9692

5 ай бұрын

Same issue with me

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?

@uxpeak

Жыл бұрын

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

Жыл бұрын

@@uxpeak Thank you! I exchanged the first icon and removed all prototype settings and then it worked! So happy :D

@uxpeak

Жыл бұрын

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

@tonigrubl2441

Жыл бұрын

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

@uxpeak

Жыл бұрын

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

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?

@brunofigueiro.

3 ай бұрын

Same problem 😢

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.

@daniloabadio9673

Жыл бұрын

drive.google.com/file/d/1tB5L63ohd-kWX-x1EEe-fS4utS1pVjUr/view?usp=drivesdk

@uxpeak

Жыл бұрын

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.

how do I make the screen behind change aswell

@harshak1ng237

10 ай бұрын

Change the varieties as per the screen and prototype it.

The fact that i can make this with code and can't in figma

@uxpeak

Жыл бұрын

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

@uxpeak

Жыл бұрын

Hey, thank you for watching. Sorry, you need to be more specific to help you with instructions.

@dwnsdp

Жыл бұрын

@@uxpeak Sorry I have no idea what I was on about, Sorry again. This is a really cool tutorial btw

how will the screen change? @uxpeak