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.
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 :)
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 🙂!
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 :).
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.
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.
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
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.
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?
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.
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
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 :)
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
@@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 🙂
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.
@@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.
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
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.
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!
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 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.
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.
I'm your fan. You explain very good and useful stuff. Thanks a lot!
this is the best carousel explained video so far thank you
I am glad it was helpful.
Awesome Explanation of carousel and Best Mentor. Thank you............
Thank you Vijay :)
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 🙏🙏🙏
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
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. Thank you so much teaching us such a brilliant thing 😍
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!
Thank you Mr.
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!
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 👍😊
Awsome this is what i was looking for TYSM. Demostrate & explained it very well :D Thanks :)
Glad you liked it!
this video helped a lot! thank you very much.
Its a good video to illustrate how components and frames can work alongside each other
Amazing. Absolute time saver!
Thank you very much! This tutorial saved my work!
Thanks a bunch sir,this is so helpful.
Thanks, man! amazing tutorial!
Thanks alot for the tutorial!
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 :(
this was very helpful man! thanks a lotttt for sharing this
Dope! Thank you so much, this is really helpful!
Incredibly helpful - thank you!
Awesome!
You're doing the lord's work, lol. Thank you!
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.
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.
thanks for the content. just dont rush anytime, sometimes you did some shortcuts and one can get lost. any away, thanks.
You rock again
Thanks a lot.
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
Awesome, you are probably works in Silicon Valley
Amazing thanks!!! :)
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.
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?
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.
when I change my component from inactive to active, it replaces the second image with the first one, any ideas?
Why i cant change the image for the carousel
Can you share this file please??
Here's the Figma file:
www.figma.com/community/file/1078720389604295609/Image-Carousels-Using-Interactive-Components
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?
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?
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.
after 2 days of trying i have finnally succeded in creating the corousel
Awesome!
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
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
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 :)
Gracias bro me sirvió muchísimo. Estuve duplicando frames y fue horrible.
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!
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🙂
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.
my drag doesnt seem to work
Can you share your Figma file?
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?
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
Hello, what is the program that shows your keybind pressing?
Screenflow.
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!
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.
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
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.
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.