WOW! I was looking, well not looking, but needing exactly this video. I had figured out the scroll through trial and error but wanted the centered and dynamic grow/shrink of the images. Perfectly explained. Thank you.
Mini series is such a good idea. The Adobe 1 min design techniques were so helpful to me, as I know a lot of what I need and where things are, so I just need refreshers and quick reminders.
Great tutorial, I like how you explained every step unlike some people where I have to scratch my head how does some things work for them and not for me. Great video!
Amazing video! I've seen a few about this feature for prototypes but I must say yours is the best. It's very clear and easy to follow. Thanks! Maybe one little tip, would be good to consider for future videos to have keyboard shortcuts for both, mac and windows.
Hey Lucia! I will surely be adding windows shortcut too on my upcoming videos. Currently I only do Mac shortcuts as I haven't used windows in a while 😬
Hey👋 adding carousel indicators is actually best practice in order to make a carousel more obvious.I haven't shown it here in the interest of time. You can add carousel indicators to assisted/page type of scroll only not to the free scrolls. Adding scroll indicators (dots) is fairly easy, just add dots equal to the number of elements. Group them and reduce the opacity of rest expcept one in every artboard. The artboards are linked through smart animate, the indicators would work.🤘
Hey akash, ur tutorials are amazing ! I have recently graduated and practicing interactive design challenges. I started following your channel yesterday and the tutorials are amazing!
Hi! I'm having a problem with my carousel, it's jiggly, instead of just scrolling sideways, it can jiggle up and down, which I don't want. In the pc prototype it works fine, but it does this on my phone
Everything works nice. The problem is when I have 2 identical drags one leading to next frame and the other to the previous, only one of them will work.
No you can add multiple drags to a single element, Figma automatically knows which one to pick based on drag direction, You can checkout the Figma file for this here: www.figma.com/community/file/982727754440876794/High-fidelity-interactive-prototypes--Part2
Yes you can absolutely make that and that's infact a better approach. at the time of recording this video interactive variant were not available in Figma
Hey Hector Didnt fully understand your problem but here is what you can do if you want something to not scroll. Select the element(s) and on the right panel you will an option " Fixed position while scrolling". Check this option and your elements will becomes fixed. 😇
It's not working for me when I try to drag the screen in scrolling horizontally and when I drag it vertical it is taking me to next frame and anumation is like dissolve
Hey typically the issue happens when the elements go out of the artboard, it looks like the elements are there but they actually have slipped out of the artboard. Check the left layers panel for this. Dissolve animation happens if your layers are not named exactly the same in two frames. make sure the names are exact between the elements of two frames. For more check out this source file: www.figma.com/community/file/982727754440876794
Hey Elizabeth To add a status bar in your prototypes, you can download system UI figma file from community and add the status bar component in your artboard directly. Make this element fixed from right panel by selecting "Fixed position while scrolling". Unfortunately there is no setting or anything in Figma that you switch on to have this available.
Hi, The smoothness of the prototypes depend on the system you are running figma on. Prototype requires decent bit of memory and having a graphic card on the laptop helps. You also need a good wifi connection as figma is cloud based.If your internet is choppy then your prototypes will not be smooth as well🤟
Hlo thank you, It helped me a lot but in 2nd carousel how it moves back for every picture. I did same made frames and then did in same manner connect to left one then connect back, but figma only recognizing it for first two pictures in carousel. After I move to 2nd picture in prototype it does not move forward to 3rd it moves back to 1st. And it continues move to 2nd and then again move back to first. But your carousel is moving smoothly. How you did that.
This works if the carousel is at the top of the page. What if I want a carousel that clicks an arrow, switches images, has a number counter at the bottom, and is in the middle of a long homepage? I cant do that because I can only navigate to parent frames..... how can i just navigate to that specific sections of the page?
Hey Juan so this was a very basic video on how carousel works, hence I didn't explain advance things here. But you can add carousels at any place of a page need not to be just on top, just that you have to use separate frames and interactive variants. Check out my video here where i explained this: ua-cam.com/video/6XtmjmcAtdA/v-deo.html ✌️
Hi Santosh Add the elements you want to scroll inside a separate frame and add horizontal scrolling to this frame only. Make sure the artboard has no scrolling selected this will make rest of the elements on the screen fixed. Also make sure the frame you make has the same bounds as width of artboard.🤟
Has this feature been updated? When I try to set overflow to horizontal with main page frame selected, the whole page scrolls instead of just the overflow element. Instead, I have to create a frame around the overflow element which is smaller than the element, and then set overflow on the frame.
Great video 👏 I was create 2 free scroll one by one down by same process but when i scroll 1frame the other frame also scrolling and the home screen also scrolling together. What is the mistake?
Very helpful! Is there a way to have horizontal scrolling where it doesn't take up the entire artboard but is contained within an area? For instance, if I wanted the scrolling to take place in the center of a screen within a smaller area. Basically, my project is almost like the last example that you gave and some of the images get smaller on either end. However, the scrolling doesn't take up the entire screen.
Hey Sandhya, Yes that's really easy to do in Figma. Just change the frame dimensions only (by clicking command+ dragging) to whatever area you want the scrolling to happen. Make sure the inside elements flow out of the the dimensions of the frame. Enable horizontal/vertical scrolling for the frame and you are done.✌️
How I have 3 frames inside my main frame. SO I have a next-arrow button and when I click that I want it to scroll to the next frame/card and if I click again, the next frame. But, I cannot figure out how to do that. I can only scroll to the last element
You need to build this using click. Create three artboards and place your frames in it. with different central image with back and next buttons. Connect screens to each other with the back and next buttons. First artboard to 2nd using next button, 2nd artboard to 1st using back. 2nd to 3rd using next and so on. In case you want ti build endless scroll you can check out this video 🙂 ua-cam.com/video/K97aa24WlKo/v-deo.html
You can do the "Simple horizontal scroll" ones in one frame. But the page/assisted scroll is done through drag, you will need as many artboards as the number of scroll elements 😇
Hey, So scrolling property only work with frame. So in case you just want a group to slide, make sure to change the group to Frame (check the dropdown on the right panel, change it to frame from group), then apply horizontal scroll to just this frame. Make sure the bounds of the frame is same as you artboard width and the inside carousel elements are flowing out of it. Hope this helps :)
Hi, you showed this on a frame, can we do this on a container? like e.g. in the container we have a sidebar, and then a carousel container, in which we can scroll items
Hey! I am sharing the master file for this and of all the interactions on my channel tomorrow (post 1k subs). I will post the link in the community post section. FYI: There is also a part-1 of Figma source file (if you haven't checked it already). Find it here: ua-cam.com/video/TSXyYt4o0Zg/v-deo.html
Hey, in the page scrolling, if the frame contains elements and buttons other than just the ones that need to be scrolled, won't we have to connect all of them on the duplicated frames as well? as we cannot be sure when the user shifts their journey..? Is there a way to do it without duplicating the frames? Also, the tutorial was awesome! short, on point and easy to understand :)
You are a time server, thank you very much for videos, but could you include the functions for windows too, that will really help. and I feel I'm the only designer using a windows pc.... thank you once again....
Amazing video! Thanks so much. I was wondering how you add the images so that they overflow? Mine stay 'outside' of my frame. What keys are you pressing for that to happen? Thank you!
Hey Dama! To make things overflow, select all the images and then club them together in a frame using the command OPT+CMD+G. Now hold the CMD key on your keyboard and select the frame, resize the bounds of the frame only to make it smaller. The images will still be inside the frame (check the layers panel or toggle clip content), while your frame is now smaller size. And in this way your actual images now overflow the main frame that they are in.😇 Check out the source files for this to understand more. They are here: www.figma.com/community/file/982727754440876794/High-fidelity-interactive-prototypes--Part2
Cool tutorial. One thing: you can actually understand what's mean overflow scrolling by the word itself. You were trying to explain something already understanded lol
hehe Yeah. Actually you will be surprised to know how many people messaged me as they don't understand the meaning of overflow in terms of Figma. Hence the repetition
Nice video! Im wondering how can I do to create an arrow button so every time I click on it, it will move the carousel. It would be nice if you can help me with that! Thanks a lot for this video
Hey that's easy to do as well. So instead of linking the individual cards through drag, add two arrows (left and right). Now link the right arrow of first artboard to 2nd artboard, similarly add right arrow of the second artboard to third and left arrow to first. Continue it for other cards as well ( you get the gist) And instead of adding the arrows through drag use click "trigger" Check out my next video in Figma shorts series to see how can you implement cyclic carousels. Same process as above, just replace drag trigger to click with arrows. 🤗🤗
Hi Akash! Thanks for the video. For the similar carousel on the website, should I copy the whole frame as well? And also do you recommend putting an arrow or some kind of indication that it's a carousel?
Hi Aizhan You can check out my other video here : ua-cam.com/video/oE0v0wfX2AQ/v-deo.html I have explained button carousels here. Also now you can simply add interactive variants instead of adding whole frame.check out the video,that should help :)
Is it possible to do a stack where there are more than one set of cards? So rather than using free scroll, you still need the images in middle, but once you scroll down the page, there'll be more horizontal cards.
hey! make sure your frame bounds are smaller than the elements combined width. Meaning your elements should overflow the boundary of frame containing the elements.Then only figma will show the option for scrolling. Let me know if this works.🖖
hey! Link artboards to others with delay. Delay shows up when you link artboards. tldr: do the exact same elements as I did but instead of linking the groups with drag link the artboards with delay trigger 😇
I generally. dont give comments, but your presentation was an absolute "no nonsense" and clean.. Loved it!!!! Cheers
Glad you liked it!
Man this was so helpful. As a novice designer, having this stuff so nicely explained is a blessing!
Glad it was helpful!
WOW! I was looking, well not looking, but needing exactly this video. I had figured out the scroll through trial and error but wanted the centered and dynamic grow/shrink of the images. Perfectly explained. Thank you.
Glad the vide was helpful Andrew✌️✌️
From the bottom of the heart thanks Akshay for this video. Clearly explained in detail.
Mini series is such a good idea. The Adobe 1 min design techniques were so helpful to me, as I know a lot of what I need and where things are, so I just need refreshers and quick reminders.
Glad it was helpful Helen 🤗
Exactly what I was looking for! Thanks, Akash!
This dude Snapping!🔥🔥🔥
🤩🤩🤩
Boss....... Your Explanation Helps Me Lot Thank You. GOD BLESS YOU.
Great tutorial man! Simple, informative, and without unnecessary fillers - I wouldn't figure it out if it wasn't for this vid. Cheers!
Glad you liked it 😇
Thanks brother :) This is the simplest video I have ever seen explaining the carousel in Figma.
Glad it was helpful 😇😇
Great tutorial, I like how you explained every step unlike some people where I have to scratch my head how does some things work for them and not for me. Great video!
You're very welcome!😇
Niiiiice! Thanks, Akash! This was exactly what I needed to learn for a research prototype that I'm building!!
Just what I needed. Love you Akash!
🤩🤩🤩🤩
Thanks a lot, now I know how to create a DRAMATIC EFFECT. I love it
Happy to help!
Thank you Akash! Your tutorial had just what I needed to know and your explanations is flawless!! Thank you!!! :)
You're very welcome! 😊
Amazing video! I've seen a few about this feature for prototypes but I must say yours is the best. It's very clear and easy to follow. Thanks! Maybe one little tip, would be good to consider for future videos to have keyboard shortcuts for both, mac and windows.
Hey Lucia! I will surely be adding windows shortcut too on my upcoming videos. Currently I only do Mac shortcuts as I haven't used windows in a while 😬
This is just what beginners NEED! Thanks a 1000 for this 👍🔥🙏
Thanks, Akash sir this was really needed. and also waiting for the complete series on how to create a complete app process for android and ios
This video save my day ! Keep up the greate work Akash !
😇😇😇🤗🤗
So carousel wasn't that scary after all :D Thank You for such a helpful video!
Thanks for the tutorial!
I wonder if you can advise on adding carousel indicators to the prototype!
Hey👋
adding carousel indicators is actually best practice in order to make a carousel more obvious.I haven't shown it here in the interest of time.
You can add carousel indicators to assisted/page type of scroll only not to the free scrolls.
Adding scroll indicators (dots) is fairly easy, just add dots equal to the number of elements. Group them and reduce the opacity of rest expcept one in every artboard. The artboards are linked through smart animate, the indicators would work.🤘
Hey akash, ur tutorials are amazing ! I have recently graduated and practicing interactive design challenges. I started following your channel yesterday and the tutorials are amazing!
thank you😇
Love it! Thanks for the tutorial!
glad you liked it
Hi! I'm having a problem with my carousel, it's jiggly, instead of just scrolling sideways, it can jiggle up and down, which I don't want. In the pc prototype it works fine, but it does this on my phone
Great tut man! Thx a lot!
Exactly what I needed. Thanks!
glad it helped ☺️
This was seriously helpful, thank you so much!
You're so welcome!
Very helpful video ! Thx a lot for your time !
Glad it helped😇
Thank you sooooo much Akash!! I was going crazy with this, you made it so easy!!
😇😇 glad it was helpful
Thank you so much! This was amazing!
Really appreciate this! Can't wait to implement it!
Glad it was helpful!
When I do this and look at it when I do the free scroll animation it moves the designs I had and they don’t stay
Such a helpful video! Thank you so much :)
man! thanks a lot! this was super helpful
Make such basic tutorials video for beginner. You'r video helps me as a beginner designer. Thank you❤
You’re welcome 😊
Thank you so much for this tutorial. Your explanation is easy and simple to follow
You're very welcome!
Everything works nice. The problem is when I have 2 identical drags one leading to next frame and the other to the previous, only one of them will work.
No you can add multiple drags to a single element, Figma automatically knows which one to pick based on drag direction,
You can checkout the Figma file for this here: www.figma.com/community/file/982727754440876794/High-fidelity-interactive-prototypes--Part2
@@AkashYadavUX It says I don't have permission to duplicate it :(
This is amazing Akash
This is really cool, i enjoyed it.
Thank you so much😃
Thanks a lot! Very well explained. I helped me a lot indeed.
Thanks for the video. How to also add pagination dots at the bottom for full page images.
I briefly explained that in this video
ua-cam.com/video/6XtmjmcAtdA/v-deo.html
I love this video, and also you can make the page scroll with interactive components
Yes you can absolutely make that and that's infact a better approach. at the time of recording this video interactive variant were not available in Figma
Finally, brother 💚💚💚🎉🎉for the series.... Appreciate ur efforts brother...
My pleasure 😊
Awesome! That was very helpful thanks a lot!
you are a life saver dude!!! THANKS
😊😊😊 thank you
So helpful! Thanks!
You are so welcome!
MAN!!! You are awesome! Thanks
thank you 🤠
How to make automatic slider ..how it will change automatically like hero section in webpage can you make a tutorial?
I also need that
You can find the automatic slider video here: ua-cam.com/video/6XtmjmcAtdA/v-deo.html
✌️
Thank you so much for this content this helped me alot 👍👍👍👍👍
Glad it helped!😇
Please teach parallax effect and scroll responsive design in figma
Will do parallax soon 😇
My second part also moves freely and doesn't come in the centre. Also, the last image touches the frame even after setting the bounds. Kindly help.
Thanks man but I got a problem when I do the scrolling it takes also tex and elements I want ti remain in the same place...any clue?
Hey Hector
Didnt fully understand your problem but here is what you can do if you want something to not scroll. Select the element(s) and on the right panel you will an option " Fixed position while scrolling". Check this option and your elements will becomes fixed. 😇
@@AkashYadavUX ok i got it...thanks
It's not working for me when I try to drag the screen in scrolling horizontally and when I drag it vertical it is taking me to next frame and anumation is like dissolve
Hey
typically the issue happens when the elements go out of the artboard, it looks like the elements are there but they actually have slipped out of the artboard. Check the left layers panel for this.
Dissolve animation happens if your layers are not named exactly the same in two frames. make sure the names are exact between the elements of two frames.
For more check out this source file: www.figma.com/community/file/982727754440876794
This was awesome, thank you !
You're so welcome!
Awesome! very useful!
Your teaching is so clear ...i did understand the whole details ..😍😍 ...would love to begin my journay with such a good mentor ...keep it up ✨🔥
Thank you Sara😇
Thank you so much for this video!!!
Thanks for being here 😇
This may be a silly question but I've looked everywhere and can't figure it out- how do you get the status bar in your mockup and prototype?
Hey Elizabeth
To add a status bar in your prototypes, you can download system UI figma file from community and add the status bar component in your artboard directly. Make this element fixed from right panel by selecting "Fixed position while scrolling".
Unfortunately there is no setting or anything in Figma that you switch on to have this available.
This is super helpful for me !!!!
😇
thanks a lot. this was really helpful
My figma prototype is not as smoith as this one...and i dont know why is it like that?....any thoughts?
Hi,
The smoothness of the prototypes depend on the system you are running figma on. Prototype requires decent bit of memory and having a graphic card on the laptop helps. You also need a good wifi connection as figma is cloud based.If your internet is choppy then your prototypes will not be smooth as well🤟
Hlo thank you, It helped me a lot but in 2nd carousel how it moves back for every picture. I did same made frames and then did in same manner connect to left one then connect back, but figma only recognizing it for first two pictures in carousel. After I move to 2nd picture in prototype it does not move forward to 3rd it moves back to 1st. And it continues move to 2nd and then again move back to first. But your carousel is moving smoothly. How you did that.
Nice. Thanks! But how to do that with a pagination like < 1 /5 > ... So slide in on clickin the arrow and changing the page numbers?
You can do pagination really easily just need to link number with tap interaction to other frames. Requires a little effort but easily doable.
This works if the carousel is at the top of the page. What if I want a carousel that clicks an arrow, switches images, has a number counter at the bottom, and is in the middle of a long homepage? I cant do that because I can only navigate to parent frames..... how can i just navigate to that specific sections of the page?
Hey Juan so this was a very basic video on how carousel works, hence I didn't explain advance things here. But you can add carousels at any place of a page need not to be just on top, just that you have to use separate frames and interactive variants.
Check out my video here where i explained this: ua-cam.com/video/6XtmjmcAtdA/v-deo.html
✌️
Sir great tutorial. But when i m horizontally scrolling the carousel, all the other contents of the body are aslo scrolling what should i do??
Hi Santosh
Add the elements you want to scroll inside a separate frame and add horizontal scrolling to this frame only. Make sure the artboard has no scrolling selected this will make rest of the elements on the screen fixed.
Also make sure the frame you make has the same bounds as width of artboard.🤟
Has this feature been updated? When I try to set overflow to horizontal with main page frame selected, the whole page scrolls instead of just the overflow element. Instead, I have to create a frame around the overflow element which is smaller than the element, and then set overflow on the frame.
Hmmm not sure. They did update interactions in the latest update but not sure if they did update this. Will check✌️
Great video 👏
I was create 2 free scroll one by one down by same process but when i scroll 1frame the other frame also scrolling and the home screen also scrolling together. What is the mistake?
what's the shortcut used at 8:00 timestamp. To move content of frame?
i used arrow keys on keyboard to move things around without altering the parent frame.
thanks, clear to the cut.
🤠🤠 thank you Bart
Keep up the good work!
🤩🤩🤩🤩 thank you Mons
Thank you. This helped in a project I'm building.
Glad it helped
Very helpful! Is there a way to have horizontal scrolling where it doesn't take up the entire artboard but is contained within an area? For instance, if I wanted the scrolling to take place in the center of a screen within a smaller area. Basically, my project is almost like the last example that you gave and some of the images get smaller on either end. However, the scrolling doesn't take up the entire screen.
Hey Sandhya,
Yes that's really easy to do in Figma. Just change the frame dimensions only (by clicking command+ dragging) to whatever area you want the scrolling to happen. Make sure the inside elements flow out of the the dimensions of the frame. Enable horizontal/vertical scrolling for the frame and you are done.✌️
@@AkashYadavUX thank you! I'll give it a go.
Thanks, man! I really appreciate this video. But please how can I make my text not to scroll with the pictures?
Hey Sam
Just remove the text from the group containing the images, it should become static.✌️
Thank you so much i am searching for 2 problems to sort of i found in this one video
You are most welcome
How I have 3 frames inside my main frame. SO I have a next-arrow button and when I click that I want it to scroll to the next frame/card and if I click again, the next frame. But, I cannot figure out how to do that. I can only scroll to the last element
You need to build this using click. Create three artboards and place your frames in it. with different central image with back and next buttons.
Connect screens to each other with the back and next buttons.
First artboard to 2nd using next button, 2nd artboard to 1st using back. 2nd to 3rd using next and so on.
In case you want ti build endless scroll you can check out this video 🙂
ua-cam.com/video/K97aa24WlKo/v-deo.html
@@AkashYadavUX is figma used to directly make a website or is it just a designing tool that later coders use to refer and code up the webstie
Hey Puneeth,
No, Figma is just used by designer to design the screens and handover to devs for specs. Coding has to be done separately by devs.
Hi, Nice explanation. Is this possible using the interactive components method?
Hey Vinay!
Yes this is possible with Interactive components. This feature was not available when i recorded the video, hence would've included it 😇
@@AkashYadavUX Thank you, If possible make a video on how we can use interactive components. It will be helpful. Thanks again!!!
Sure Vinay! Interactive variants video is in the backlog. will work on it soon😇😇
@@AkashYadavUX Awesome!
Excellet! Thank you so much for this.
glad it helped
Thank you so much Akash sir this was really needed
😇😇 Thanks Saurav
can u do this transition only single frame with clip mask element?
You can do the "Simple horizontal scroll" ones in one frame. But the page/assisted scroll is done through drag, you will need as many artboards as the number of scroll elements 😇
How do you fixed the Nav.? please tell me
Unless I select the whole frame, it won't let me slide. I just want a group to slide so the background stays static :(
Hey,
So scrolling property only work with frame. So in case you just want a group to slide, make sure to change the group to Frame (check the dropdown on the right panel, change it to frame from group), then apply horizontal scroll to just this frame. Make sure the bounds of the frame is same as you artboard width and the inside carousel elements are flowing out of it.
Hope this helps :)
@@AkashYadavUX yes! I saw another tutorial and it said the same thing. Thanks a lot for replying!
Hi, you showed this on a frame, can we do this on a container? like e.g. in the container we have a sidebar, and then a carousel container, in which we can scroll items
i cant find the link of the discord channel, i love to join but is not in the description
This is great content Akash! Very helpful. Subscribed. :)
Glad you liked it Anwesh 🤗🤗
what if i want to travel since the first image to the last image? it doesnt working u.u
Hello! Great Video, but I cant get it right. Is there a chance that you share your Figma File? would help a lot.
Hey!
I am sharing the master file for this and of all the interactions on my channel tomorrow (post 1k subs). I will post the link in the community post section.
FYI: There is also a part-1 of Figma source file (if you haven't checked it already). Find it here: ua-cam.com/video/TSXyYt4o0Zg/v-deo.html
@@AkashYadavUX thank you so so much! Very appreciated!
Hey, in the page scrolling, if the frame contains elements and buttons other than just the ones that need to be scrolled, won't we have to connect all of them on the duplicated frames as well? as we cannot be sure when the user shifts their journey..? Is there a way to do it without duplicating the frames? Also, the tutorial was awesome! short, on point and easy to understand :)
can u teach me how to create a scroll for a slider that shows increasing / decreasing numbers? :))))
El único vídeo que me sirvio, graciaaas
Can we export the file as the same function include to presentation pdf format?
You are a time server, thank you very much for videos, but could you include the functions for windows too, that will really help. and I feel I'm the only designer using a windows pc.... thank you once again....
Amazing video! Thanks so much. I was wondering how you add the images so that they overflow? Mine stay 'outside' of my frame. What keys are you pressing for that to happen? Thank you!
Hey Dama!
To make things overflow, select all the images and then club them together in a frame using the command OPT+CMD+G. Now hold the CMD key on your keyboard and select the frame, resize the bounds of the frame only to make it smaller. The images will still be inside the frame (check the layers panel or toggle clip content), while your frame is now smaller size. And in this way your actual images now overflow the main frame that they are in.😇
Check out the source files for this to understand more. They are here: www.figma.com/community/file/982727754440876794/High-fidelity-interactive-prototypes--Part2
What if I want to use a button for scrolling when I click it?? How can I do that???
checkout this tutorial ua-cam.com/video/oE0v0wfX2AQ/v-deo.html
Cool tutorial. One thing: you can actually understand what's mean overflow scrolling by the word itself. You were trying to explain something already understanded lol
hehe Yeah. Actually you will be surprised to know how many people messaged me as they don't understand the meaning of overflow in terms of Figma. Hence the repetition
Man you're good.. where have you been??. Pls I will need your help on a project. Let me know if you can help. Thanks
Nice video! Im wondering how can I do to create an arrow button so every time I click on it, it will move the carousel. It would be nice if you can help me with that!
Thanks a lot for this video
Hey that's easy to do as well. So instead of linking the individual cards through drag, add two arrows (left and right).
Now link the right arrow of first artboard to 2nd artboard, similarly add right arrow of the second artboard to third and left arrow to first. Continue it for other cards as well ( you get the gist)
And instead of adding the arrows through drag use click "trigger"
Check out my next video in Figma shorts series to see how can you implement cyclic carousels. Same process as above, just replace drag trigger to click with arrows.
🤗🤗
Hi Akash! Thanks for the video. For the similar carousel on the website, should I copy the whole frame as well? And also do you recommend putting an arrow or some kind of indication that it's a carousel?
Hi Aizhan
You can check out my other video here :
ua-cam.com/video/oE0v0wfX2AQ/v-deo.html
I have explained button carousels here.
Also now you can simply add interactive variants instead of adding whole frame.check out the video,that should help :)
Is it possible to do a stack where there are more than one set of cards? So rather than using free scroll, you still need the images in middle, but once you scroll down the page, there'll be more horizontal cards.
did get you actually? Can you explain again?
I can’t select horizontal scrolling the option is not even showing in prototype, I’m not getting, overflow options
hey! make sure your frame bounds are smaller than the elements combined width. Meaning your elements should overflow the boundary of frame containing the elements.Then only figma will show the option for scrolling.
Let me know if this works.🖖
Make sure you choose your Frame before clicking on the prototype tab
how do i automate the slides?
Replace the drag trigger with delay and it should work 🙂
@@AkashYadavUX hey I'm unable to select after delay
hey!
Link artboards to others with delay. Delay shows up when you link artboards.
tldr: do the exact same elements as I did but instead of linking the groups with drag link the artboards with delay trigger 😇