Hi Lorraine 🙂 Thank you so much for this amazing feedback!! ♥ I highly appreciate it and thats what keeps this channel running - the support and feedbacks 🤞🙂 Thanks again!
Thank you so much! Your video was really helpful. I had been struggling with the animation for a long time, but thanks to your guidance, I was able to finish everything in just a few minutes
Hi Sabina. You have to make sure that you are dragging/moving the auto layout of the images and not trying to move the variant itself. In the tutorial, its the auto layout which is called "images". Try to select it form the layers panel, maybe it will be easier to select it this way. Please let me know this makes it more clear and helping to understand better. If not, write further and i will make sure you solve this :)
@@sabinaioana1108 Hi Sabina. Ok, got it. So the next thing (most practical) is to share the file with me and let me see in your prototype whats the reason its not working. Can you share a link to my email? Thanks.
Please make vedio on auto layout apply screen all eminents. How to apply auto layout individually in whole screens eliment like components, text, picture, slider, carousel, list item, input field, tabs, dropdown, slider.
Basically, applying auto layout to all the screen is no different than applying auto layout to individual component. Its exactly the same logic. In general, i usually do not apply auto layout to entire screen, and of course, each case to itself, depends on the needs. Do you have any specific case that you would like me to explain/show is tutorial? There could be of course - let me know :)
Hi. Your can use either you mouse cursor or you finger on the figma mirror app. Going that i did understand the question... if i didn't, please explain. Thanks.
Great teaching. I like how you break everything down. Very clear in speech and Video. Now I can do this.. Also how can I make an element change to another at a spot using the "after Delay" and "desolve" option?
Thank you for this tutorial! I'm trying to recreate it and struggling with moving the images inside of the variant (minute 9:22). In my figma the x position is locked and I can't change it. So without changing this X position, the whole animation will not work... how do change it? In my Figma the X position in variants is locked and I can't change it
HI Natalie and thank you so much for the great feedback! 🙂 I really appreciate it ⚡ To your question - in general, its not something that is suppose to happen, doesnt sound right. Is this, originally, a component that you created? Or is it an instance of another component? I'm trying to understand better the situation. Its a bit hard to say without seeing it but try to explain more in details :) The way its suppose to be - A frame that holds all the images which can be an auto layout or not - technically it doesnt matter, and a frame that holds the frame with the images. You move the images frame inside the frame that holds it. Hope that helps to understand it better.
@@YarivBE I have the auto layout (which is a component by itself) with multiple instances of the same component inside of it and I want to scroll them automatically with "after delay". Each instance's X and Y positions inside of the auto layout were locked. Eventually I managed to solve it by clicking on the button of "absolute position" in frame properties. Works great! Thank you very much
Privet! Izvinit za moi ne ochen xoroshii ruskii :) No ya ponil chto ti pisal i ochen rad eto znaet! Bolshoe spasibo za eto otlichny obratnaya svyaz! Ya vyes'ma priznatelen 🙂⚡
Hello, greetings from Lima - Peru. Excellent work. I wanted to ask you: is it possible to combine the 2, that has a delay and at the same time can move? There is an example of this on the cinema website in my country called Cineplanet, the banner moves automatically and in turn I can slide😢😢😢😢
Hello Pedro from Lima 🙂 Thank you so much for your great feedback! I highly appreciate it 🔥 TO you question - actually, you can combine after delay and drag, technically its possible, just time it correctly because if not - it can feel a bit weird. But yes, go ahead and try it 🤞
Hi leviathan :) It all depends on how you prototype it, create the interactions between the variants. Its not a programmed product and the goal is to show, demonstrate a behavior that we want to achieve. So if i want to see/show how does my product behaves with an infinite scroll, than i can see how it goes and if this is what i want. Of course, in a programmed product (app/website/any...) it will want as its done in the code, as you, as a UX designer instructed the developers. I hope that makes it more clear, assuming i understood the question :)
Hello Yariv! I really enjoyed your video and it's been really helping me to understand while I'm studying UX design: ) Thank you so much! I have a question. I'm super beginner and trying to understand how everything works. What's the reason that we copy another screen?
Dear Jenna, thank you so much for this amazing feedback! I highly appreciate it 🙂wishing you great success in your UX studies :) To your question - just to make sure i fully understand it, and of course correct me if i didnt, you mean why am i creating a frame for the images (at start) and copying it to another frame which is the screen? Assuming that this is what you asked, and again, i am wrong than please correct me, in figma, a frame is a container that holds content. A screen, a component, a group of elements with responsive behavior - these are all frames. We can create animation between two frames which are screens or create animation between two variants of a component (which are also frames) and than copy it to a screen held by a frame :) I hope it clears it a bit more - as i said - feel free to ask further if it didnt 🙂
Hey, great Video! However, i have one problem: If i swipe really slow it works. But if i swipe really fast it doesnt get triggered sonehow and ill just swipe into the end. Do you know how to fix that?
Hi there and thanks a lot for your great feedback! I really appreciate it ⚡ To your case - not something i am familiar with and as i read your comment, i tried it on my phone (the prototype) and swiped really fast - works perfect and no issues. So to be honest, i am not sure why it doesnt work stable on you end - hard to say. If you want, send me a share to your file and i can take a look - see what going on there 🙂
היי שחר. תודה רבה על הפידבק! מעריך מאוד 🙂 לתנועה חלקה (בהנחה שאני מבין נכון את השאלה) צריך להגדיר/לבחור ב Easing ב Linear - ואז התנועה היא חלקה. עדכן אותי אם זה עזר ופתר את העניין.
It's really neat 👌! You made me learn it very easily, as a request, I have seen your parallax animation vedio that operates on click(when you click a header then it go in action) Can you make it while scrolling down the website and the images comes from right to left thingy. *your was on click, is it possible to do it while scrolling down through website*
Hello Anij and thank you so much for the great feedback! I really appreciate it ⚡🙂 As for your question - i wish it was possible :) but its not possible to create it in figma - at least not yet... We cant create animations that will be triggered as we scroll - that is part of the reason that i created the parallax as i did. In programming, of course, its definitely possible - in figma we cab show section's behavior - meaning - i am showing what happens when you get into a section, whats the animation i want on that part. So thats what we can do with it as for now.
Thanks a lot for the great feedback Jami! I appreciate it 🙂 Do you mean how to create a regular simple scroll in a frame? Just to make sure i understand :)
@@jaminizam9450 Ok, i understand. You need to check what is defined for each screen/frame. Check the frame of the that is defined "No scrolling". The you need the scroll in it, see that is defined with "Horizontal scrolling" in the prototyping tab under "Overflow scrolling". Does that help?
@@YarivBE yes i too done by same process.i have create 2 free horizontal scroll one by one down but when I scroll one the other frame also scrolling together. But i make only one frame to horizontal scroll in prototyping.
@@jaminizam9450 Hi Jami. Well, its difficult to understand exactly whats going wrong in your file without seeing it on the file itself because i dont fully understand it like that :) Just kind of guessing, sounds like the frame structure is not right. It needs to be something like that - ▼ MAIN SCREEN FRAME ► FRAME 1 with a horizontal scroll ► FRAME 2 with a horizontal scroll Make sure that FRAME 1 & FRAME 2 are NOT being hold in another frame (or a group?) that holds them together. Let me know if it clears the picture a bit?
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
Great video! I have been looking all over you tube trying to find someone who could explain this properly and then I found your channel. Well done!!
Thank you so much Jared for this amazing feedback! I highly appreciate it! ⚡ Happy to know it was helpful 🙂
The best tutorial that I have came across so far 😊
Hi Lorraine 🙂 Thank you so much for this amazing feedback!! ♥ I highly appreciate it and thats what keeps this channel running - the support and feedbacks 🤞🙂 Thanks again!
Thank you so much! Your video was really helpful. I had been struggling with the animation for a long time, but thanks to your guidance, I was able to finish everything in just a few minutes
@@yana_mago
Thanks a lot for your great feedback Yana! I highly appreciate it and happy to know it was helpful 🙂🔥
Worked wonders, thanks Yariv! 🙏
Thanks a lot for you great feedback! I highly appreciate it! 🙂⚡
Thankyou @Yariv I was stuck in your project and your tutorial solved my problem
Thanks a lot for this great feedback Zeehan! I highly appreciate it! 🙂
Your explanation is outstanding, Thank you.
Thanks a lot for your amazing feedback! i really appreciate it! 🔥
Well explained but I am having challenge with the second method of prototyping.
Hi there 🙂 Thanks for the great feedback!
"Second method" - not sure i fully understand - please explain further. What doesn't work for you?
Thanks.
I don't know how you drag the photos at 9:20. Seems pretty easy for you. Mine isn't working when I drag.
Hi Sabina. You have to make sure that you are dragging/moving the auto layout of the images and not trying to move the variant itself.
In the tutorial, its the auto layout which is called "images".
Try to select it form the layers panel, maybe it will be easier to select it this way.
Please let me know this makes it more clear and helping to understand better. If not, write further and i will make sure you solve this :)
@@YarivBE I'm doing the same thing. It's not working
@@sabinaioana1108
Hi Sabina. Ok, got it. So the next thing (most practical) is to share the file with me and let me see in your prototype whats the reason its not working.
Can you share a link to my email?
Thanks.
Please make vedio on auto layout apply screen all eminents. How to apply auto layout individually in whole screens eliment like components, text, picture, slider, carousel, list item, input field, tabs, dropdown, slider.
Basically, applying auto layout to all the screen is no different than applying auto layout to individual component. Its exactly the same logic.
In general, i usually do not apply auto layout to entire screen, and of course, each case to itself, depends on the needs.
Do you have any specific case that you would like me to explain/show is tutorial? There could be of course - let me know :)
You have a new subscriber, keep pushing content like this and you will have a sucessfull channel very soon! thanks!
Thank you so much Jesus for this amazing feedback! ❤️ I highly appreciate it! 🙂
Thanks you ❤❤❤ this video is very helpful
@@alinazeeshan4251
Thanks a lot for the great feedback! I highly appreciate it 🙂🔥
how to scroll the image do we need to use some keyboard button to hold and scroll ?
Hi. Your can use either you mouse cursor or you finger on the figma mirror app. Going that i did understand the question... if i didn't, please explain. Thanks.
Great teaching. I like how you break everything down. Very clear in speech and Video. Now I can do this..
Also how can I make an element change to another at a spot using the "after Delay" and "desolve" option?
Thank you so much for the great feedback! It's highly appreciated! Happy to know the tutorial was helpful 🙂🔥
Thank you for this tutorial! I'm trying to recreate it and struggling with moving the images inside of the variant (minute 9:22). In my figma the x position is locked and I can't change it. So without changing this X position, the whole animation will not work... how do change it? In my Figma the X position in variants is locked and I can't change it
HI Natalie and thank you so much for the great feedback! 🙂 I really appreciate it ⚡
To your question - in general, its not something that is suppose to happen, doesnt sound right.
Is this, originally, a component that you created? Or is it an instance of another component?
I'm trying to understand better the situation. Its a bit hard to say without seeing it but try to explain more in details :)
The way its suppose to be -
A frame that holds all the images which can be an auto layout or not - technically it doesnt matter, and a frame that holds the frame with the images.
You move the images frame inside the frame that holds it. Hope that helps to understand it better.
@@YarivBE I have the auto layout (which is a component by itself) with multiple instances of the same component inside of it and I want to scroll them automatically with "after delay". Each instance's X and Y positions inside of the auto layout were locked. Eventually I managed to solve it by clicking on the button of "absolute position" in frame properties. Works great! Thank you very much
@@nataliegerman690
Hi Natalie :) ok, great! Happy to know that you got it working and happy with the results 🙂
Чел, спасибо за видос! Благодаря тебе, смог сделать анимированную пагинацию вместе с баннером!))
Privet! Izvinit za moi ne ochen xoroshii ruskii :) No ya ponil chto ti pisal i ochen rad eto znaet! Bolshoe spasibo za eto otlichny obratnaya svyaz! Ya vyes'ma priznatelen 🙂⚡
Hello, greetings from Lima - Peru. Excellent work. I wanted to ask you: is it possible to combine the 2, that has a delay and at the same time can move? There is an example of this on the cinema website in my country called Cineplanet, the banner moves automatically and in turn I can slide😢😢😢😢
Hello Pedro from Lima 🙂 Thank you so much for your great feedback! I highly appreciate it 🔥
TO you question - actually, you can combine after delay and drag, technically its possible, just time it correctly because if not - it can feel a bit weird. But yes, go ahead and try it 🤞
Very Tricky. Loved it.
Thanks a lot for your feedback Hossain! I really appreciate it! ⚡
is designer able to do this feature but with option to swipe back to previous variant?
Hi leviathan :) It all depends on how you prototype it, create the interactions between the variants.
Its not a programmed product and the goal is to show, demonstrate a behavior that we want to achieve. So if i want to see/show how does my product behaves with an infinite scroll, than i can see how it goes and if this is what i want.
Of course, in a programmed product (app/website/any...) it will want as its done in the code, as you, as a UX designer instructed the developers.
I hope that makes it more clear, assuming i understood the question :)
Hello Yariv! I really enjoyed your video and it's been really helping me to understand while I'm studying UX design: ) Thank you so much! I have a question. I'm super beginner and trying to understand how everything works. What's the reason that we copy another screen?
Dear Jenna, thank you so much for this amazing feedback! I highly appreciate it 🙂wishing you great success in your UX studies :)
To your question - just to make sure i fully understand it, and of course correct me if i didnt, you mean why am i creating a frame for the images (at start) and copying it to another frame which is the screen?
Assuming that this is what you asked, and again, i am wrong than please correct me, in figma, a frame is a container that holds content. A screen, a component, a group of elements with responsive behavior - these are all frames.
We can create animation between two frames which are screens or create animation between two variants of a component (which are also frames) and than copy it to a screen held by a frame :)
I hope it clears it a bit more - as i said - feel free to ask further if it didnt 🙂
you are the best!
Hey, great Video!
However, i have one problem:
If i swipe really slow it works.
But if i swipe really fast it doesnt get triggered sonehow and ill just swipe into the end.
Do you know how to fix that?
Hi there and thanks a lot for your great feedback! I really appreciate it ⚡
To your case - not something i am familiar with and as i read your comment, i tried it on my phone (the prototype) and swiped really fast - works perfect and no issues. So to be honest, i am not sure why it doesnt work stable on you end - hard to say.
If you want, send me a share to your file and i can take a look - see what going on there 🙂
היי יריב, אהבתי את הוידאו! אם אני רוצה שבחלק השני האובייקטים יזוזו חלק בלי עצירות איך אני מגדיר אותם?
היי שחר. תודה רבה על הפידבק! מעריך מאוד 🙂
לתנועה חלקה (בהנחה שאני מבין נכון את השאלה) צריך להגדיר/לבחור ב Easing ב Linear - ואז התנועה היא חלקה. עדכן אותי אם זה עזר ופתר את העניין.
@@shaharasta
אוקיי סבבה. אז אני אראה שם ואכתוב לך
is this really free?? some of the option is not showing on my figma
Hi there 👋
Which options do not show on your Figma? Please explain
It's really neat 👌! You made me learn it very easily, as a request, I have seen your parallax animation vedio that operates on click(when you click a header then it go in action) Can you make it while scrolling down the website and the images comes from right to left thingy. *your was on click, is it possible to do it while scrolling down through website*
Hello Anij and thank you so much for the great feedback! I really appreciate it ⚡🙂
As for your question - i wish it was possible :) but its not possible to create it in figma - at least not yet... We cant create animations that will be triggered as we scroll - that is part of the reason that i created the parallax as i did. In programming, of course, its definitely possible - in figma we cab show section's behavior - meaning - i am showing what happens when you get into a section, whats the animation i want on that part.
So thats what we can do with it as for now.
Great video 👏 and how to create that regular horizontal scroll? Can u tell me the steps?
Thanks a lot for the great feedback Jami! I appreciate it 🙂 Do you mean how to create a regular simple scroll in a frame? Just to make sure i understand :)
@@YarivBE yes i have create it but when i scroll even other frames also get scrolling.
@@jaminizam9450
Ok, i understand. You need to check what is defined for each screen/frame.
Check the frame of the that is defined "No scrolling". The you need the scroll in it, see that is defined with "Horizontal scrolling" in the prototyping tab under "Overflow scrolling".
Does that help?
@@YarivBE yes i too done by same process.i have create 2 free horizontal scroll one by one down but when I scroll one the other frame also scrolling together. But i make only one frame to horizontal scroll in prototyping.
@@jaminizam9450
Hi Jami. Well, its difficult to understand exactly whats going wrong in your file without seeing it on the file itself because i dont fully understand it like that :)
Just kind of guessing, sounds like the frame structure is not right.
It needs to be something like that -
▼ MAIN SCREEN FRAME
► FRAME 1 with a horizontal scroll
► FRAME 2 with a horizontal scroll
Make sure that FRAME 1 & FRAME 2 are NOT being hold in another frame (or a group?) that holds them together.
Let me know if it clears the picture a bit?
thank you 🤝🔥
You are most welcome Ngakan and thanks a lot for your great feedback! I highly appreciate it 🙂⚡
thank you so much......
You are most welcome! Thanks a lot for the great feedback! I appreciate it ⚡🙂
Thank you so much🫡 you saved my life!
Your are most welcome! Thanks a lot for the great feedback 🙂 I highly appreciate it 🔥