its very use full for me , to my final project which is going to get me a job in a company , thank you so much for innovative way of animated website with easy manner to understand.... before i watching ur video i have blank and dumped about animated interaction on website which my office demanded me but after watching this (ur video) i got clear ideas thank u so much ...... keep rock it
The thing I do not understand, we create variants for the sake of the interactive prototype, but we apparently do not show those in the UI kit? In the documentation for developers, we simply describe the behaviour and provide code examples and the prototype as a reference? :)
Okay, After 3:31 I'm unable to connect it with the duplicate frame (the header one). Also, this after pressing Ctrl+D the new frame appears on third side. What thing I'm doing wrong?@@pixxelex
I tried this before many times what you said, but when I connect the prototype, in the change to option I have only one options i.e.., default. Also, I tried to name the variant as variant 2, the then only option 'back to' is active. I'm struggling for this step. @@pixxelex
hello, can i ask? when you move the object at frame 16, the object at the desktop move too, why mine can't do the same? i follow your tutorial exactly the same
Ive managed to make the animation of it but when I try to scroll down its only stuck on that frame and is fullscreened into it , how do I not do that??
I've made videos on it. From UI/UX design to animation. You can check them here 👇 Full Website Design: ua-cam.com/video/b5sYBmFI2RE/v-deo.html Full Page Animation: ua-cam.com/video/c6YL6-dsLCE/v-deo.html
h i have a question instead of shift and dragging it out, can i just delete the object for each frame, what difference would it make by dragging it rather than deleting?
This is absolutely amazing i was really learning untill a problem has raised. I had few components with prototype Animation inside each frames then as shown here i again made the whole frame a component but now in prototype my other component's variants are bigger and messy. Can help me solve this please?
@@pixxelex I Followed exactly as you taught but later found that the main components were bigger which I scaled down to fit in the frame, so if again I make the whole frame a component and apply prototype to it's variants, Figma couldn't handle it and make the component inside as per the size of the main component inside.
hey bro, good evening! why does after creating the final variation, the auto layout doesn't function well, like I cannot get the final variation out of the variation 1. like after selecting the horizontal type layout and selecting also the align middle and setting the horizontal gap on 100, the final variation is still inside the variation 1, like they are still attached to each other. that's where im stuck, i haven't made any progress for about 8 hrs now. pls help me brother.
@@pixxelex okay ill check. anyways, also do you have tutorials also about making a basic full page website like what should be the tools to use in making the index? thanks also!
No worries, you can skip the auto layout part and just place the frames side by side manually. Just make sure to follow all the steps for creating components and adding prototypes. It should work out fine! And for full page website design, you can check this tutorial: ua-cam.com/video/b5sYBmFI2RE/v-deo.html
How to upload this animation in behance to present our case study?? Do we have to copy and paste embed code?? I'm doing that but it's looking confusing
Unfortunately my main component moves all the objects even on final version for some reason and i have no idea how to fix it. I followed step by step and watched like 10 times figma has now new interface and probably some features are not activated cause it doesn't work lile in tut😢😢😢😢
its very use full for me , to my final project which is going to get me a job in a company , thank you so much for innovative way of animated website with easy manner to understand.... before i watching ur video i have blank and dumped about animated interaction on website which my office demanded me but after watching this (ur video) i got clear ideas thank u so much ...... keep rock it
You are most welcome
The best Scroll tutorial I've seen, I was making my web prototype but without knowing how to make it scroll the right way, thanks a lot 🔥🔥🔥🔥
Glad it helped!
I didn't understand it after watching the other videos, but after this one, I got it. Thank you!
Glad it helped!
You saved my day man!
I spent last 2 days doing this but -_-
Take a bow
Glad this video helped you🙌
just finished practicing this and all I can say is THANKS BRO AND GOOD JOB
Glad it helped!
you're a lifesaver! I really needed to simulate this in Figma and your step by step guide made the trick. Leaving my like as a big huge thank you!!
Glad it helped!
Need more this type of tutorial. You're doing great. 🖤
Thank you so much! More amazing tutorials are on the way. Keep Supporting ❤
Thank you so much!!
Glad it helped!
thanks mate this is what i was actually looking for❤❤
Glad it was helpful
You made it very easy and clear to understand. Thank you so much!!
You're very welcome!
That is the most detailed tutorial I’ve seen, Thank you so much!
Glad it was helpful!
very very very very very very very very very very very very very very very help full video expect more more more video👍👍👍👍👍👍👍👍
Many many thanks
Very Useful for Start up designer!! Thank you for your video!! 🧡🧡❤❤
Glad it was helpful!
❤❤❤Really awesome. Thanks!❤❤❤
You're welcome 😊
Thanks bro very clear explanation . keep it rock bro
Welcome!
Thank u so much for this ❤️
good tutorial 🎉🎉🎉🎉 keep going like that
Thank you! 😃
Thanks man.. .🔥🙌🏻
You're welcome!
Thank u so much for this video , This is what I was actually looking for this make my project too good and It really works ..😍😍😍🤩, I am so glad
Glad it helped
Nice 👍👍 thank you so much 👍👍
Welcome 😊
thanks dude! appreciate you for doing this
Glad it was helpful!
The thing I do not understand, we create variants for the sake of the interactive prototype, but we apparently do not show those in the UI kit? In the documentation for developers, we simply describe the behaviour and provide code examples and the prototype as a reference? :)
super helpful , into the point and specific 👍
Glad it was helpful!
Thank for your tutorial. This help me so much br. Keep it up!
Glad it helped!
Very usefull thanks for the video ! it helped me a lot.
Glad it helped!
That was great need more tutorilas these related are really appreciated
Thanks!
Very usefull and great explain.thanks lot🎉
You are welcome 😊
Amazing understanding tutorial 😍
Thanks a lot 😊
Wow perfect
Thank you!
Cool tutorial. Thanks
You're welcome!
Hi, thanks for this. I am wondering why setting the passthrough to 0 when you move those items (like in 2:34)?
So in animation, it'll show a fade-in effect
yeaaayh nice one
Thank you!
amazing video, thank you!
You're welcome!
Thank you, I’ve been looking for how to slide in my wine prototype design for my landing page. 👍🏾
Glad it was helpful!
Great it helps me alot thanks ❤️🙌
Glad to hear that!
Thank you So much ,, I love this vedio
Most welcome
❤ thank you
You're welcome 😊
Nice video, can you also make a video on how to choose typography, color scheme like you. Everything looks so cool in your design.
Sure. I'll make soon
Thanks bro .. ❤
Welcome 😊
Hello after trying to connect through prototype from fgr master components to the duplicate it didn’t even recognize that there’s elements there
thanks for the tutorial. but I want to ask, how do you keep the navbar in the top position?
Sorry, I didn't get your point. Can you explain it?
very helpfull Thank you..
Glad it was helpful!
Which shortcut key you press in 3:31, I didn't understand.
( Ctrl + D ) for duplication
Okay, After 3:31 I'm unable to connect it with the duplicate frame (the header one). Also, this after pressing Ctrl+D the new frame appears on third side. What thing I'm doing wrong?@@pixxelex
No need to worry, you can rearrange it manually. Then add the prototype to the frames.
Still, if you are facing any problems let me know.
I tried this before many times what you said, but when I connect the prototype, in the change to option I have only one options i.e.., default. Also, I tried to name the variant as variant 2, the then only option 'back to' is active. I'm struggling for this step. @@pixxelex
Can you give the link to this design? It would be great if you could show how to make this design to repeat
hello, can i ask? when you move the object at frame 16, the object at the desktop move too, why mine can't do the same? i follow your tutorial exactly the same
Use the master component to move the objects. It'll work for sure and please watch the tutorial thoroughly.
There is no option for flow starting point to add on my screen..please help sir
What did you did at 3:35 ?
Created a duplicate of the frame using (Ctrl + D)
Ive managed to make the animation of it but when I try to scroll down its only stuck on that frame and is fullscreened into it , how do I not do that??
when you roll back to top , why cant revert the animation as rolling up backwards! got it?
very nice
Thanks
Can you please make an tutorial on full animation of this web like buttons and everything till the end please❤
I've made videos on it. From UI/UX design to animation.
You can check them here 👇
Full Website Design: ua-cam.com/video/b5sYBmFI2RE/v-deo.html
Full Page Animation: ua-cam.com/video/c6YL6-dsLCE/v-deo.html
Thank you!
You're welcome!
h i have a question instead of shift and dragging it out, can i just delete the object for each frame, what difference would it make by dragging it rather than deleting?
By dragging the objects out of the frame, you are hiding them. If you delete them, they won't animate.
Pls how do u make the adjustment on the mainframe and the other one at the same time
If you modify the master component, the changes will automatically be reflected in the other components.
I have one doubt.. do we need to subscribe for more interaction features like in this video?
Sorry, didn't get it
@@pixxelex do Figma free has limited transitions and features?
It depends on how you create these transitions using prototypes. So you won't need any premium plan for this.
thank you for this
You're very welcome!
IF I DO THE 2ND ANIMATION I CAN SCROLL IT EVEN MY MOUSE ENTER THE ZONE OF THE 2ND ANIMATION HOW I CAN FIX THIS
This is absolutely amazing i was really learning untill a problem has raised. I had few components with prototype Animation inside each frames then as shown here i again made the whole frame a component but now in prototype my other component's variants are bigger and messy. Can help me solve this please?
Please watch the tutorial thoroughly and follow it. It'll work for sure
@@pixxelex I Followed exactly as you taught but later found that the main components were bigger which I scaled down to fit in the frame, so if again I make the whole frame a component and apply prototype to it's variants, Figma couldn't handle it and make the component inside as per the size of the main component inside.
Where should I take images and design wall paperd
hey bro, good evening! why does after creating the final variation, the auto layout doesn't function well, like I cannot get the final variation out of the variation 1. like after selecting the horizontal type layout and selecting also the align middle and setting the horizontal gap on 100, the final variation is still inside the variation 1, like they are still attached to each other. that's where im stuck, i haven't made any progress for about 8 hrs now. pls help me brother.
Make sure to add the auto layout to the parent frame. ( Check 01:44 , like Frame 16 )
@@pixxelex okay ill check. anyways, also do you have tutorials also about making a basic full page website like what should be the tools to use in making the index? thanks also!
@@pixxelex that's exactly what I did, I don't know what went wrong, I followed your steps multiple times already :(((
No worries, you can skip the auto layout part and just place the frames side by side manually. Just make sure to follow all the steps for creating components and adding prototypes. It should work out fine!
And for full page website design, you can check this tutorial: ua-cam.com/video/b5sYBmFI2RE/v-deo.html
do you have the file with animations for this figma
How to upload this animation in behance to present our case study?? Do we have to copy and paste embed code?? I'm doing that but it's looking confusing
Yeah, you can add the embed code that allows a viewer to interact with the animation, or you can record your prototype and add it as a video.
@Alsiel please let me know, how to did it? Why i not able to scroll?
Unfortunately my main component moves all the objects even on final version for some reason and i have no idea how to fix it. I followed step by step and watched like 10 times figma has now new interface and probably some features are not activated cause it doesn't work lile in tut😢😢😢😢
does that mean you have 2 of the same designs with one showcasing the animations ?
You can do that
do I need the paid version to access "change to" on the drop down... or did I do something wrong?
You don't need paid version. May be you have done something wrong.
Hi, I can’t scroll. I can only make animation to the 1st section remaining scrolling not appearing. Can you tell how to fix this pls
Please follow the tutorial properly. It should work.
Do I upgrade my figma account to professional to do this animation?
No, you can do this with the free version
I tried but why its not animated form right to center ots any missing?
Please watch the video once again and follow all the steps. It'll work for sure.
thank you
Welcome!
Does these require any of figma pro version features?
Nope, You can do this with the free version
If I scroll up, can I get the animation also?
Yeah, but we also need to set that.
@@pixxelex may i know how to set that?
How to download and upload in behance
You can upload the design and embed the Figma prototype in Behance.
hello, how do I achieve this for the mobile version
Same question here! How?
Mouse Enter doesn't work on mobile. How do you achieve a trigger animation when a page scrolls to the center of the screen?
Great video, the song in the background is very annoying, it would be better without it.
Thank you very much
Thanks for your feedback
it does not use the mouse enter effect
Please follow the tutorial properly. It should work.
Why i can't scroll mine
Please follow the tutorial properly.
@@pixxelexi followed everything but still no scrolling animation when i watch the flow. Still remains in the first desktop
@@pixxelexayooo nvm, i figured out how to fix it by just extending the frame of the desktop. Anyways thanks for this!
Glad, it worked for you.
please let me know, how to did it? Why i am not able to scroll?
to move girl what the shortcut : Shift .... What?!
To move any object just use ( Shift + arrow keys )
@@pixxelex I did it ...✌
Thank you for the Tutorial, You're doing great.
Glad it was helpful.
We need figma scrool up and down animation on prototype
📌📌📌📌
Very soon!
PLEASE HELP I CANT SCROLL ITS
❤🎉❤🎉❤🎉❤🎉
he is running very fast i don't recommend to wast your time on watching
Slow the video bro
You seems to skip some steps, hard to follow
No, each step was displayed
thanks bro 🫀
Welcome!
this was so so helpful
thanks @Pixxelex
Glad it was helpful!
Thank you!
You're welcome!