Was trying to figure out this interaction for so long but always somehow mess it up. You made it seem to easy. Thankyou💯 Subscribed✨ would love to see more Ui interactions like these from you👍
Wish you had shown swapping out the main component! Would save lot of people headaches - I was stuck on adding the interactions for ages and it wasn't until my fiancé came and looked that he noticed that you had swapped out the main component but didn't mention it!!
Oh my apologies for that, my editing skills were quite rusty back then and I might have trimmed some info unknowingly. That's why I attach source files :) Shout out to your fiancé 🙌
why have you used the parent card itself in the screen, usually parent components are kept aside and its instances are used na I see that you have used the parent card in the screen. Is there any particular reason or was it a mistake?
Select the frame , then hold Command (CMD) on mac ( Ctrl on windows I guess) while resizing the frame . This will resize the frame without distorting or scaling it's content 🙂
Does anybody else experience problems in Figma while prototyping with components specifically on drag left and right? As I changed components back to frames, all works though.
Hey Victoria! A lot of people are facing this issue. Apparently Figma has changed a few things in the interactive component side hence the drags are not working anymore in variant form as they used to be. Changing to frames is the way to fix it for now. I hope Figma fixes this issue soon.
Chase, There is no way to make this endless in Figma as it is just a prototyping tool. if you want to make it endless then yes you have to move to a tool like Bravo studio to create an app version of this :)
Hey Akash! So I have a very beginner problem. How do I replace the images inside the component card for the next two cards? I can't seem so be able to change them directly from Unsplash like I see you do it.
Hi Luisa That's a very common issue, so don't worry. The trick here is to add image to the frame, rather than adding it to a shape within or some other layer. Select the parent frame and add image via unspalsh to it, figma will automatically place the image behind everything. Once this is done, convert your frame to component. Now select all your components & instances and apply images via unspalsh plugin. it will work. Make sure the image is applied to frame as a fill rather than anything else. Alternatively find the source file here: www.figma.com/community/file/1024260460208282283 😇
Hi Akash, could you make a video where a FAB is reduced in size or disappears when scrolling down a list of items like the gmail app for android does, in Figma, Please?
Hey 👋 Thanks for the suggestion. Disappearing while scrolling is something that is not feasible in figma at the moment but changing size should be doable via tricks. I will try to impelment it :)
Hello, i have a problem (it's the very first time i'm using figma), i tried to duplicate the sample to continue the swipe interaction but it doesn't work after your part. I checked every connections but everything seems ok. Can you help me please?
@@AkashYadavUX Hey, thanks for the answer, no I don't know why it can help? I'm a very beginner haha! But I just duplicate the sample and reconnect it with the first part so maybe I have something else to do for make it works?
Hey! It's tricky for me the figure out the issue from here. You can send me your file here instagram.com/ui.kash?igshid=YmMyMTA2M2Y= Will have a look 😇
I am glad that I found your channel!!
Thank you so much for these tutorials you made them easy to understand!!
waiting for more such tutorials!! :)
Glad you like them!
Danke!
😍 Thank you so much Nadine for the contribution. Love ya!
great video my friend!💛
Was trying to figure out this interaction for so long but always somehow mess it up. You made it seem to easy. Thankyou💯 Subscribed✨
would love to see more Ui interactions like these from you👍
Thanks for the sub Areeba 🤓
Awesome need more interaction tips and trick
More to come!😉
Very informative and kickass tips. Need more of them
thanks a lot😇
amazing!!
Wish you had shown swapping out the main component! Would save lot of people headaches - I was stuck on adding the interactions for ages and it wasn't until my fiancé came and looked that he noticed that you had swapped out the main component but didn't mention it!!
Oh my apologies for that, my editing skills were quite rusty back then and I might have trimmed some info unknowingly.
That's why I attach source files :)
Shout out to your fiancé 🙌
You are right but i just had to do it in along way so as to get the result. Nice job boss🥰
excelent! thank you, buddy!
Very helpful! Thankyou!
Fantastic video very helpful
why have you used the parent card itself in the screen, usually parent components are kept aside and its instances are used na
I see that you have used the parent card in the screen. Is there any particular reason or was it a mistake?
Thank you for this tutorials. please how do i resize the frames/ components without distorting their content?
Select the frame , then hold Command (CMD) on mac ( Ctrl on windows I guess) while resizing the frame . This will resize the frame without distorting or scaling it's content 🙂
@@AkashYadavUX thank you so much. I realized pressing k before selecting the frame works. I appreciate you
Does anybody else experience problems in Figma while prototyping with components specifically on drag left and right? As I changed components back to frames, all works though.
Hey Victoria!
A lot of people are facing this issue. Apparently Figma has changed a few things in the interactive component side hence the drags are not working anymore in variant form as they used to be.
Changing to frames is the way to fix it for now. I hope Figma fixes this issue soon.
@@AkashYadavUX Thank you so much for clarifying this
when i resize card 2 and 3 the entire composition gets messy like the buttons and text all change size and position, how to fix?
Hi similar problem, @akash_yadav?
In the Protoype part, when I swipe, the cards disappear. What am I doing wrong!
8.05 can you explain this? I'm unable to drag from the screen even if i'm doing this in prototype it's not the same drag.
may some issue with the frame grouping.
Check out the source file www.figma.com/community/file/1024260460208282283
Is there a way to make this endless? Perhaps using a tool like Bravo Studio?
Chase,
There is no way to make this endless in Figma as it is just a prototyping tool. if you want to make it endless then yes you have to move to a tool like Bravo studio to create an app version of this :)
Hi, have you succeed using this figma with Bravo Studio?
Hey Akash! So I have a very beginner problem. How do I replace the images inside the component card for the next two cards? I can't seem so be able to change them directly from Unsplash like I see you do it.
Hi Luisa
That's a very common issue, so don't worry. The trick here is to add image to the frame, rather than adding it to a shape within or some other layer. Select the parent frame and add image via unspalsh to it, figma will automatically place the image behind everything. Once this is done, convert your frame to component. Now select all your components & instances and apply images via unspalsh plugin. it will work.
Make sure the image is applied to frame as a fill rather than anything else.
Alternatively find the source file here: www.figma.com/community/file/1024260460208282283
😇
thank u !
Hi Akash, could you make a video where a FAB is reduced in size or disappears when scrolling down a list of items like the gmail app for android does, in Figma, Please?
Hey 👋
Thanks for the suggestion. Disappearing while scrolling is something that is not feasible in figma at the moment but changing size should be doable via tricks.
I will try to impelment it :)
@@AkashYadavUX Thank you very much, I will be attentive to all your videos. Greetings from México.
Hello, i have a problem (it's the very first time i'm using figma), i tried to duplicate the sample to continue the swipe interaction but it doesn't work after your part. I checked every connections but everything seems ok. Can you help me please?
Hey Did you check the source file in the description. Lemme know if that helps :)
@@AkashYadavUX Hey, thanks for the answer, no I don't know why it can help? I'm a very beginner haha! But I just duplicate the sample and reconnect it with the first part so maybe I have something else to do for make it works?
Hey! It's tricky for me the figure out the issue from here. You can send me your file here instagram.com/ui.kash?igshid=YmMyMTA2M2Y=
Will have a look 😇
@@AkashYadavUX Thank you, it's done :)
whats the link to the discord?
Thanks for ur video tutorial, master