An actually good explanation for carousel prototyping in Figma. Thanks, this is the fourth one I've watched and it's finally something that works in almost every case.
Thanks for the tutorial! Did exactly you showed here but couldn't get the drag to pass behond the first two variants. After comparing with your original I finally figured it out 🙂!
Awesome job, was just reviewing a video that was doing all the frames separately, and I thought to myself...that is not going to scale well. This was very helpful.
For anyone who's struggling to animate the carousel in both directions: you need to apply the drag interaction on the frame/carousel itself, not the variant. I missed that detail :)
Hi I am really confused at 6:13 and at 8:47 when you add the carousel to the frame. Can you explain that process. I've tried adding the carousel to the frame but I end up adding the whole component to the frame. Thanks for the tutorial :).
Dear sir I am following your course from start.thanks for your course. I am facing problem on this step. When I am applying components it replaced pictures too. Screen short attached kindely guide me
Hi, great tutorial, slightly fast but I just have to replay it. I have been having an issue with this carousel : when I create the active true/false states with the 1rst img, when I apply the property on the 4 carousels it applies the style true/false but also puts in the image instead of leaving the new image I put. So in terms of work flow I just have to replace them each time, I was wondering if I missed something in the tutorial? Thanks in advance
Hi, I face the same issue as well. After I duplicated the main carousel image, I relpaced the image. But when I switches the state, it gets replaced by the parent component image. Please let me know if you found the fix.
@@vsAnandDev I met the same issue, and thanks for your tips! It worked! I guess layer only change the opacity, but fill will not only apply the opacity but change the image to the original setting by default.
It would be great if you just mention how you are doing things to complete the procedures like we can only see you are using shortcuts to complete each task, beginners are struggling to understand where is it coming from and how you can replace things of components with the blink of an eye.
on thing just boggles my mind how did figma figure drag direction !? i tried exact same setup in XD couple of days ago and scroll/swipe was unidirectional and it didn't allow me to have 2 drag interaction.
This is an amazing tutorial, Really helpful. Can you please help me with how to make a carousel component for the web with the slider buttons and with some text added along with images?
appreciate your work, doing everything according it but when I change the images to big, it gives me the very first photo from the variants, done it million times and still doesnt work, please help me do it :)
Hello Sir. How are you doing? Google has recently launched Material Design 3 with a figma plugin. Can you make a video on that how to use it or a proper guideline for Material Design system.
Hey! I'm trying to do this with product cards but am finding it difficult to duplicate and populate the content. As well as my prototype doesn't work pass the first drag. Do you have any advice how to fix this? Love the channel and appreciate the help!
have been trying this but its not changing from active to inactive. and if it does its switching the images instead of making a paricular image active and in active..any advise
Here's my official Figma paid course which you can check out on: www.asaadmahmood.com/courses/figma-noob-to-pro Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
Original file can be found here: www.figma.com/file/k5DpvyZ6LbXEJHn4aRd1mR/Image-Carousels-Using-Interactive-Components?type=design&node-id=0-1&t=ZZDVESE75kxZ8BPo-11
Please I am confused from 2:25- 2:54. I am confused as to how you made one state false and true. After creating the first variant and making it active , I still can’t see how you made one part false and the other true. Please help
I just duplicated the variant, selected one, gave it a value of false and then selected the other one and made it true. And then selected the whole component and changed the property name to active.
@@AMDesignAndDev Hi. First of all, thank you for the tutorial and your time! I´m struggling with the same issue, so when I switch the variant to the true state, it changes the image to the one I made component with. I´ve checked the names of the variants, they´re exactly like in your example. Please, help, cause it´s a second day I can´t think of anything else but this carousel 😅 Thank you in advance 🙂
I don't understand how you made the variants, done it a million times, your figma feels different , and as a newbie I kindof felt very lost and overwhelmed 😢😢😢😢😢 Especially adding auto layouts to the variants don't work the way yours do
@@steph6558 Have a look at the original file: www.figma.com/file/k5DpvyZ6LbXEJHn4aRd1mR/Image-Carousels-Using-Interactive-Components?type=design&node-id=0-1&t=ZZDVESE75kxZ8BPo-11
For this exercise it is really important to make the carousel a component. If the component is done then you can just copy and paste it into any frame and the instance of the component would be pasted.
@@AMDesignAndDev Awesome. Its working. I did create the component but was confused about how to place it into the frame. Thanks a lot. I literally spent 2 days to figure this out but now I have an idea how interactive components work. Thank you again. What i would recommend is if you can just slow down the speed while explaining in your videos it would really help understand better and also if you could have shown in the video about how you placed it in the frame, it would have helped too. I am not criticizing but just some suggestions. Great work.
its incredibly hard to follow up since a lot of the technical stuff isn't explained. Sat here almost an hour and still can't understand how it works. Bad tutorial.
Apologies, will try to do better. This is a slightly advanced tutorial not a basic one. So if you need to understand the basics of interactive components then I have a video for that as well.
An actually good explanation for carousel prototyping in Figma. Thanks, this is the fourth one I've watched and it's finally something that works in almost every case.
Glad it was helpful!
This is mind boggling! So much I didn't know I could do
Thank you so much! Really appreciate you providing the file to follow along with.
this is the best carousel explained video so far thank you
I am glad it was helpful.
I'm your fan. You explain very good and useful stuff. Thanks a lot!
Thanks for the tutorial! Did exactly you showed here but couldn't get the drag to pass behond the first two variants. After comparing with your original I finally figured it out 🙂!
I have the file shared in the description, duplicate that and have a look.
@@AMDesignAndDev 🙏🙏🙏
One of the best figma educators out there!
Awesome job, was just reviewing a video that was doing all the frames separately, and I thought to myself...that is not going to scale well. This was very helpful.
Awesome Explanation of carousel and Best Mentor. Thank you............
Thank you Vijay :)
For anyone who's struggling to animate the carousel in both directions: you need to apply the drag interaction on the frame/carousel itself, not the variant. I missed that detail :)
Thankyou so much mam!! i was struggling with that for 3 days, and now i got it. im glad i found the right video and comment.
Awesome. Thank you so much teaching us such a brilliant thing 😍
this video helped a lot! thank you very much.
Its a good video to illustrate how components and frames can work alongside each other
Awsome this is what i was looking for TYSM. Demostrate & explained it very well :D Thanks :)
Glad you liked it!
Hi mate, great video - do you have any tricks for making this carousel component infinite (endless scrolling that loops round to first image etc) ?
This is something I would like to know too :)
It takes me 3 times to review to understand the specific. It works. Thnx.
Thanks, and apologies that it took so long
@@AMDesignAndDev it takes so long because of me, not u :) u made it perfect. Twice I was losing the thing - put items inside frame.
@@peretcz Awesome!
Thaaank you so much! I'm so happy I found this tutorial!
I’m glad you liked it. Do you subscribe to the channel for more interesting content!
Hey really like to say thanks for the video and also the file I'm new to figma so this really helps me.. Thanks once again 👍😊
Thank you very much! This tutorial saved my work!
Hi I am really confused at 6:13 and at 8:47 when you add the carousel to the frame. Can you explain that process. I've tried adding the carousel to the frame but I end up adding the whole component to the frame. Thanks for the tutorial :).
I would like to know this too
I was able to do it, thank you! my only problems is that the animation doesn't look natural at all, even with the same 500ms :(
You're too fast and you really don't tell what action you just performed.
Because he uploaded a full playlist the action which he is not telling are already told in previous videos so he is saving time.
this was very helpful man! thanks a lotttt for sharing this
Dear sir I am following your course from start.thanks for your course.
I am facing problem on this step. When I am applying components it replaced pictures too. Screen short attached kindely guide me
Hi, great tutorial, slightly fast but I just have to replay it. I have been having an issue with this carousel : when I create the active true/false states with the 1rst img, when I apply the property on the 4 carousels it applies the style true/false but also puts in the image instead of leaving the new image I put. So in terms of work flow I just have to replace them each time, I was wondering if I missed something in the tutorial? Thanks in advance
Hi, I face the same issue as well. After I duplicated the main carousel image, I relpaced the image. But when I switches the state, it gets replaced by the parent component image. Please let me know if you found the fix.
Hi, It worked after I set blend mode opacity in Inactive instance instead of Image opacity. Hope this helps.
@@vsAnandDev I met the same issue, and thanks for your tips! It worked! I guess layer only change the opacity, but fill will not only apply the opacity but change the image to the original setting by default.
Dope! Thank you so much, this is really helpful!
Incredibly helpful - thank you!
Amazing. Absolute time saver!
Thanks, man! amazing tutorial!
Thanks a bunch sir,this is so helpful.
It would be great if you just mention how you are doing things to complete the procedures like we can only see you are using shortcuts to complete each task, beginners are struggling to understand where is it coming from and how you can replace things of components with the blink of an eye.
The shortcuts should be available at the bottom of the screen.
when I change my component from inactive to active, it replaces the second image with the first one, any ideas?
You're doing the lord's work, lol. Thank you!
Why i cant change the image for the carousel
Thanks alot for the tutorial!
thanks for the content. just dont rush anytime, sometimes you did some shortcuts and one can get lost. any away, thanks.
on thing just boggles my mind how did figma figure drag direction !? i tried exact same setup in XD couple of days ago and scroll/swipe was unidirectional and it didn't allow me to have 2 drag interaction.
That's true, Figma > XD imo :)
@@AMDesignAndDev Sorry, what is Figma > XD?
@@schilco2884 Figma is better than XD.
Or greater than XD.
This is an amazing tutorial, Really helpful. Can you please help me with how to make a carousel component for the web with the slider buttons and with some text added along with images?
Thank you Mr.
One question: on 2:47 you are seen pressing Shift+Cmd+S and a Scale plugin opens. How do you customize shortcuts to open plugins?
Be sure to subscribe and hit the notification icon!
It really helps the channel grow and motivates me to keep on investing on the channel.
appreciate your work, doing everything according it but when I change the images to big, it gives me the very first photo from the variants, done it million times and still doesnt work, please help me do it :)
Not able to get the carousel to work, the items aren't showing and it's not allowing me to create an interaction.
Can you share your file?
Hello Sir. How are you doing? Google has recently launched Material Design 3 with a figma plugin. Can you make a video on that how to use it or a proper guideline for Material Design system.
Sure, I can have a look at that.
Please why did you convert your frame to a component? Will be different if we just use the frame as it is?
Because I want to reuse it multiple times right. And have the variants linked.
You can change to "variants" without making something a component.
Thanks for this tutorial but my drag doesn't seem to work. Did you copy the "Default" or the whole carousel and paste it into the phone frame?
same issue
Awesome!
i dont get it, seems like the most important part is cut out at 6:38.. how do you add the compontent to the phone frame?
I added it at 6:13. But adding any component to the a frame is just simple copy paste, no magic
Hey! I'm trying to do this with product cards but am finding it difficult to duplicate and populate the content. As well as my prototype doesn't work pass the first drag. Do you have any advice how to fix this?
Love the channel and appreciate the help!
have been trying this but its not changing from active to inactive. and if it does its switching the images instead of making a paricular image active and in active..any advise
Share the file.
Here's my official Figma paid course which you can check out on:
www.asaadmahmood.com/courses/figma-noob-to-pro
Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
You rock again
Original file can be found here:
www.figma.com/file/k5DpvyZ6LbXEJHn4aRd1mR/Image-Carousels-Using-Interactive-Components?type=design&node-id=0-1&t=ZZDVESE75kxZ8BPo-11
Amazing thanks!!! :)
Thanks a lot.
Gracias bro me sirvió muchísimo. Estuve duplicando frames y fue horrible.
Hello, what is the program that shows your keybind pressing?
Screenflow.
Thanks for this, very helpful
Can you do the desktop version please
That would be repetitive in my opinion, we can just resize the images and put them in a larger frame to have them in desktop.
@@AMDesignAndDev okay, good idea... I'll definitely try it out
Thank you very much for your response🙂
Please I am confused from 2:25- 2:54.
I am confused as to how you made one state false and true. After creating the first variant and making it active , I still can’t see how you made one part false and the other true. Please help
I just duplicated the variant, selected one, gave it a value of false and then selected the other one and made it true.
And then selected the whole component and changed the property name to active.
@@AMDesignAndDev okay. I will try that and get back to you. Thank you
When I switch on the active button it changes the image to the one i made component with. how to solve that?
Make sure the names of the layers in your variants is the same
@@AMDesignAndDev Hi. First of all, thank you for the tutorial and your time! I´m struggling with the same issue, so when I switch the variant to the true state, it changes the image to the one I made component with. I´ve checked the names of the variants, they´re exactly like in your example. Please, help, cause it´s a second day I can´t think of anything else but this carousel 😅 Thank you in advance 🙂
@@oxana6196 Can you share your figma file or post it on the community? I can have a look.
@@AMDesignAndDev Sure, here it is www.figma.com/file/VkUX0auVEmx2tlQ72HfTfC/Untitled?node-id=0%3A1
Thank you, Asaad 🙂
@@oxana6196 Hi, Did you get a solution for this?
after 2 days of trying i have finnally succeded in creating the corousel
Awesome!
my drag doesnt seem to work
Can you share your Figma file?
I don't understand how you made the variants, done it a million times, your figma feels different , and as a newbie I kindof felt very lost and overwhelmed 😢😢😢😢😢
Especially adding auto layouts to the variants don't work the way yours do
Can you share this file please??
Here's the Figma file:
www.figma.com/community/file/1078720389604295609/Image-Carousels-Using-Interactive-Components
I don't understand why it doesn't work to me.. maybe I do something wrong but I set up everything like yours..😭
Share your figma file
@@AMDesignAndDev I thought I shared but maybe I forgot to send the message xD. Anyway, I made it. Thank you 🙏🏼
@@JDave89 Glad to know!
Mine isn’t working either? It won’t drag and I’m not sure why?
@@steph6558 Have a look at the original file:
www.figma.com/file/k5DpvyZ6LbXEJHn4aRd1mR/Image-Carousels-Using-Interactive-Components?type=design&node-id=0-1&t=ZZDVESE75kxZ8BPo-11
I could not make the carousel. I was unable to link the item carousel with the other main carousel .
Can you share your Figma file, I can have a look.
@@AMDesignAndDev Really appreciate your quick response time.
If my carousel is fine, can you please tell me how would I place it in the frame?
For this exercise it is really important to make the carousel a component. If the component is done then you can just copy and paste it into any frame and the instance of the component would be pasted.
@@AMDesignAndDev Awesome. Its working. I did create the component but was confused about how to place it into the frame.
Thanks a lot.
I literally spent 2 days to figure this out but now I have an idea how interactive components work. Thank you again.
What i would recommend is if you can just slow down the speed while explaining in your videos it would really help understand better and also if you could have shown in the video about how you placed it in the frame, it would have helped too.
I am not criticizing but just some suggestions.
Great work.
Awesome!
Awesome, you are probably works in Silicon Valley
I'm working on a project that involves this functionality. Can you post a copy of your file in the comments so I can see how it's achieved?
okay, I see it. Thank you.
Let me know if you understand it now, otherwise I can hop on a call with you as well to explain it.
I’m finding it difficult please who can help me out
I can.
its incredibly hard to follow up since a lot of the technical stuff isn't explained. Sat here almost an hour and still can't understand how it works. Bad tutorial.
Apologies, will try to do better.
This is a slightly advanced tutorial not a basic one.
So if you need to understand the basics of interactive components then I have a video for that as well.
@@AMDesignAndDev can you link to it here?
or share the Figma file so I can see how it works
I just don't understand how you moved the carousel into the phone frame. Explain this step and I'm all set.
@@tomer_helzer You just copy and paste the main component.
Copy it, and then select the phone frame, and paste it.
That is a great video but I think you should try stop saying "basiclly". You use this ward too often and its distracting.
Thank you for the feedback, and I agree, I'll try to be more cognizant of it.