If you're watching this in 2022 or later, this is an outdated method. ✨Check out the updated version with Interactive Components: ua-cam.com/video/URdy-ctnVkc/v-deo.html
Thanks a lot, it works perfectly! At the beginning I had a hard time, because I had forgotten to lock the fixed elements in order to divide the layers into "scroll" and "fixed" sections.
Thanks for this awesome video! I've been searching for the solution of double swipe!!! Good to know we can make 2 frames and lock them to make double interactions! Good job!!!! Keep up the good work!
Hey! And sorry for late reply. You can use the constraints section on the right side panel to make elements semi responsive. For example, by adding left and right constraints to an element inside a frame, will make the element width grow with the parent frame. Same applies to top and bottom constraints. Use the constraints section dropdown menus to change the values, or click the different anchor points on the constraint rectangle in the side panel. Since Figma doesn't have the concept of breakpoints like you would have in the web with CSS, you need to create different components for different screen widths. And this applies only if you need different layout on the components for the different widths. I Hope this helps!
Hi, we need to add 2 frames on top of each other to allow swiping to left and right. If we add an interaction connection straight from the card, we can only go to left or right. At least that’s how it was at the time of making this video. Haven’t checked if Figma allows you to add multiple “on drag” interactions to a layer nowadays. If that’s the case, then forget what I said above and make 2 connections from the card :P
Very useful and educational. I hope I can hear you better in the next videos because it is really hard to listen as your volume is even lower than the faint music. Thanks!
Hey, thanks for the feedback and thanks for pointing that out. I'll try to improve the audio levels in the future. You can also try to turn on the auto generated closed captions. Not sure how accurate those are, but worth a try :P
Thanks for the Figma file!! I tried and it worked. Only thing is I can't figure out is how you fixed your bottom buttons (stars, hearts etc). Whatever I put there they would be swipe away along with cards above. Any tips will be much appreciated.
As long as the layers have the same names between the different screens and you have smart animate enabled for your interactions, they should stay still when navigating.
If you use Figma in a browser - like I do - when you open the prototype just drag it into its own window. Then just tile the windows side by side and that's it. And on a mac you can also hide the browser UI (tabs, url bar, etc.) by hitting shift + command + F. That's how I get it like full fullscreen. You can also use the Figma mirror app on your phone for live prototype preview. This is what I often use while doing my own designs. Although I would only recommend this if you happen to have same device as on your prototype.
I wonder now with interactive components, if we can simplify this some more. I.e. one core component that controls the right and left drag and instances of it that show the different pictures. Then with interactive components we can control the states. That way we'll really only need one frame, with multiple instances of a component. Food for thought 😊
Yeah, in theory something like that should be possible with interactive components 🤔 but I haven't had time to tinker with more complex interactive components like this one would be. I'll probably end up posting an updated version of this in the future if I find a way to do this with interactive components.
Hey! This is what I usually do: 1. Launch the prototype into a new tab. Then drag the tab out of the browser window and it will turn it into its own window. 2. On mac hover the "expand window" button (top left, green circle). This opens a pop up where you can choose to tile the window to left or to right side. On windows you can just use windows key + arrow keys to dock the window to left or right. 3. After you have docked either of the windows to left or right, then it'll allow you to choose what window to dock to the other side. 4. On mac you can also enter "borderless fullscreen" by pressing (⇧) shift + (⌘) command + F. Don't know if windows has similar functionality.
Oh shit, sorry totally forgot to add the link. Here's the figma project link: www.figma.com/file/8J6172J7I9EdzAKZyddPQg/Tinder-Card-Swipe?node-id=13%3A1008 Also in the video description now. Thanks for reminding me!
Thanks! Also don't forget to check out the updated version with Interactive Components here: ua-cam.com/video/URdy-ctnVkc/v-deo.html Makes achieving this interaction waaay easier :P
I've watched your video 3 times now and still can't tell what you are doing. Really appreciate the information but I'm not getting anything out of it --> the fonts on your screen are way to small to read. It would be much more helpful if the layer could be read and see how things are grouped or not grouped and what is going on there.
Hey! This is what I usually do: 1. Launch the prototype into a new tab. Then drag the tab out of the browser window and it will turn it into its own window. 2. On mac hover the "expand window" button (top left, green circle). This opens a pop up where you can choose to tile the window to left or to right side. On windows you can just use windows key + arrow keys to dock the window to left or right. 3. After you have docked either of the windows to left or right, then it'll allow you to choose what window to dock to the other side. 4. On mac you can also enter "borderless fullscreen" by pressing (⇧) shift + (⌘) command + F. Don't know if windows has similar functionality.
![[UA] NAVI vs MOUZ | BO5 | IEM Rio 2024](http://i.ytimg.com/vi/CMBYk0cbGoA/mqdefault.jpg)
If you're watching this in 2022 or later, this is an outdated method.
✨Check out the updated version with Interactive Components: ua-cam.com/video/URdy-ctnVkc/v-deo.html
I am a Korean student.
Thank you for uploading good Figma material.
I will always support you.!!
Thanks a lot, it works perfectly! At the beginning I had a hard time, because I had forgotten to lock the fixed elements in order to divide the layers into "scroll" and "fixed" sections.
Thanks for this awesome video! I've been searching for the solution of double swipe!!! Good to know we can make 2 frames and lock them to make double interactions! Good job!!!! Keep up the good work!
it was also new for me
Great! Thanks! I'm building a card game app and this will be super helpful for the prototype.
Thanks alot mate. Helped me on my uni project. I'll soon release videos, too. Keep your game going.
Best from Germany
Mario
Hey thanks! Glad you found this helpful.
Amazing video man! congrats on your way of teaching
Hello, can you make a video on how to set up the components/variants for this function (below the clip content check mark)?
subscribed! your videos are so helpful, thank you so much for this
this was so helpful and straightforward! thank you so much 😊
How do you auto scale/responsive the cards, having major issues getting the cards to be responsive?
Really need help with this as I am new to Figma.
Hey! And sorry for late reply. You can use the constraints section on the right side panel to make elements semi responsive.
For example, by adding left and right constraints to an element inside a frame, will make the element width grow with the parent frame. Same applies to top and bottom constraints. Use the constraints section dropdown menus to change the values, or click the different anchor points on the constraint rectangle in the side panel.
Since Figma doesn't have the concept of breakpoints like you would have in the web with CSS, you need to create different components for different screen widths. And this applies only if you need different layout on the components for the different widths.
I Hope this helps!
Awesome tutorial! Thanks for sharing 🙂
HI, quick question. Why is your swipe interaction on the "swipe-right-area" frame? Can I just put the interaction on the Card instead? Thanks
Hi, we need to add 2 frames on top of each other to allow swiping to left and right. If we add an interaction connection straight from the card, we can only go to left or right.
At least that’s how it was at the time of making this video. Haven’t checked if Figma allows you to add multiple “on drag” interactions to a layer nowadays. If that’s the case, then forget what I said above and make 2 connections from the card :P
@@fullstackdesigner thanks for the reply. Yea it's possible now to make 2 connections from the card. thanks anyway :)
could you explain what you did with the instances?
This. Is. Amazing.
Thanks a lot! It works perfectly :D
how to get three instance ?
Very useful and educational. I hope I can hear you better in the next videos because it is really hard to listen as your volume is even lower than the faint music. Thanks!
Hey, thanks for the feedback and thanks for pointing that out. I'll try to improve the audio levels in the future. You can also try to turn on the auto generated closed captions. Not sure how accurate those are, but worth a try :P
well done!
Thanks for the Figma file!! I tried and it worked. Only thing is I can't figure out is how you fixed your bottom buttons (stars, hearts etc). Whatever I put there they would be swipe away along with cards above. Any tips will be much appreciated.
As long as the layers have the same names between the different screens and you have smart animate enabled for your interactions, they should stay still when navigating.
So many steps were skipped at the beginning, I had no idea how to create and use the components
It's very useful! And amazing!
Thanks! Glad you liked it!
i think they got rid of the instances. i cant find them
Very nice ! thanks you very much !
How do you have the preview on the right side while editing?
If you use Figma in a browser - like I do - when you open the prototype just drag it into its own window. Then just tile the windows side by side and that's it. And on a mac you can also hide the browser UI (tabs, url bar, etc.) by hitting shift + command + F. That's how I get it like full fullscreen.
You can also use the Figma mirror app on your phone for live prototype preview. This is what I often use while doing my own designs. Although I would only recommend this if you happen to have same device as on your prototype.
Good Job buddy!!
I wonder now with interactive components, if we can simplify this some more. I.e. one core component that controls the right and left drag and instances of it that show the different pictures. Then with interactive components we can control the states. That way we'll really only need one frame, with multiple instances of a component. Food for thought 😊
Yeah, I've thought about it too)
Yeah, in theory something like that should be possible with interactive components 🤔 but I haven't had time to tinker with more complex interactive components like this one would be.
I'll probably end up posting an updated version of this in the future if I find a way to do this with interactive components.
@@fullstackdesigner I’ve already created it with interactive components👍 It works! If you want, I can give you a link to check it out.
@Valentyna Hey awesome, that would be great! If you can drop a link here with view access, then anyone interested can take a look.
@@fullstackdesigner Okay, but I don't know if UA-cam allows me to put a link in a comment. Lets try)
You gotta new sub here. Cheers
Amazing!!!!!!!
Hey glad you liked it! 🙏🏼
thx
How to prototipe on side
Hey! This is what I usually do:
1. Launch the prototype into a new tab. Then drag the tab out of the browser window and it will turn it into its own window.
2. On mac hover the "expand window" button (top left, green circle). This opens a pop up where you can choose to tile the window to left or to right side. On windows you can just use windows key + arrow keys to dock the window to left or right.
3. After you have docked either of the windows to left or right, then it'll allow you to choose what window to dock to the other side.
4. On mac you can also enter "borderless fullscreen" by pressing (⇧) shift + (⌘) command + F. Don't know if windows has similar functionality.
No resource file bro?
Oh shit, sorry totally forgot to add the link. Here's the figma project link: www.figma.com/file/8J6172J7I9EdzAKZyddPQg/Tinder-Card-Swipe?node-id=13%3A1008
Also in the video description now. Thanks for reminding me!
Thanks, why this vid has jusy 329 idk but it is brilliant
Thanks! Also don't forget to check out the updated version with Interactive Components here: ua-cam.com/video/URdy-ctnVkc/v-deo.html
Makes achieving this interaction waaay easier :P
I've watched your video 3 times now and still can't tell what you are doing. Really appreciate the information but I'm not getting anything out of it --> the fonts on your screen are way to small to read. It would be much more helpful if the layer could be read and see how things are grouped or not grouped and what is going on there.
hi, he uploaded the figma project on the description box. maybe it'll help you!
@@cherishc.5193 I figured it out. Wat hard to wrap my mind around but I got it.
how to setting prottype on side
Hey! This is what I usually do:
1. Launch the prototype into a new tab. Then drag the tab out of the browser window and it will turn it into its own window.
2. On mac hover the "expand window" button (top left, green circle). This opens a pop up where you can choose to tile the window to left or to right side. On windows you can just use windows key + arrow keys to dock the window to left or right.
3. After you have docked either of the windows to left or right, then it'll allow you to choose what window to dock to the other side.
4. On mac you can also enter "borderless fullscreen" by pressing (⇧) shift + (⌘) command + F. Don't know if windows has similar functionality.