Basics of Scroll/ carousel interaction in Figma

[@pkpramodh]

I generally. dont give comments, but your presentation was an absolute "no nonsense" and clean.. Loved it!!!! Cheers

[@AkashYadavUX]

Glad you liked it!

[@sm_artx]

Man this was so helpful. As a novice designer, having this stuff so nicely explained is a blessing!

[@AkashYadavUX]

Glad it was helpful!

[@Digital.Done.Right.]

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.

[@AkashYadavUX]

Glad the vide was helpful Andrew✌️✌️

[@helengalligan9590]

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.

[@AkashYadavUX]

Glad it was helpful Helen 🤗

[@abdulkareemuddinmasirmoham5889]

From the bottom of the heart thanks Akshay for this video. Clearly explained in detail.

[@lakshmysuraj7181]

Thanks brother :) This is the simplest video I have ever seen explaining the carousel in Figma.

[@AkashYadavUX]

Glad it was helpful 😇😇

[@paweleszczynski137]

Great tutorial man! Simple, informative, and without unnecessary fillers - I wouldn't figure it out if it wasn't for this vid. Cheers!

[@AkashYadavUX]

Glad you liked it 😇

[@vijayva9870]

Boss....... Your Explanation Helps Me Lot Thank You. GOD BLESS YOU.

[@Metal_Face_Doom]

Niiiiice! Thanks, Akash! This was exactly what I needed to learn for a research prototype that I'm building!!

[@Bon-Bons]

Exactly what I was looking for! Thanks, Akash!

[@landonhughes5091]

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

[@MyBacon92]

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!

[@AkashYadavUX]

You're very welcome!😇

[@junaidtariq4547]

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

[@LucasAlvesMusic]

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

[@luciamigacova4462]

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.

[@AkashYadavUX]

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 😬

[@RabeeRaad]

Thanks for the tutorial! I wonder if you can advise on adding carousel indicators to the prototype!

[@AkashYadavUX]

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.🤘

[@muttyta]

Thank you Akash! Your tutorial had just what I needed to know and your explanations is flawless!! Thank you!!! :)

[@AkashYadavUX]

You're very welcome! 😊

[@wildtraveler8855]

Just what I needed. Love you Akash!

[@AkashYadavUX]

🤩🤩🤩🤩

[@chamaranuwan3956]

This video save my day ! Keep up the greate work Akash !

[@AkashYadavUX]

😇😇😇🤗🤗

[@anuyawiz]

This dude Snapping!🔥🔥🔥

[@AkashYadavUX]

🤩🤩🤩

[@giadaallocca3041]

Thanks a lot, now I know how to create a DRAMATIC EFFECT. I love it

[@AkashYadavUX]

Happy to help!

[@apoorvadivate7561]

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!

[@AkashYadavUX]

thank you😇

[@GrazziaBF]

Thank you sooooo much Akash!! I was going crazy with this, you made it so easy!!

[@AkashYadavUX]

😇😇 glad it was helpful

[@Jayy997]

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.

[@AkashYadavUX]

Hmmm not sure. They did update interactions in the latest update but not sure if they did update this. Will check✌️

[@sandhyaselmon7258]

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.

[@AkashYadavUX]

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.✌️

[@sandhyaselmon7258]

@@AkashYadavUX thank you! I'll give it a go.

[@anuranjani474]

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 :)

[@saylizambre3487]

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.

[@heyabasu]

Thank you so much for this tutorial. Your explanation is easy and simple to follow

[@AkashYadavUX]

You're very welcome!

[@Tola_io]

I love this video, and also you can make the page scroll with interactive components

[@AkashYadavUX]

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

[@YaserRiaz]

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

[@Leoaurum991]

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.

[@Wiola559]

So carousel wasn't that scary after all :D Thank You for such a helpful video!

[@elizabeththill9109]

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?

[@AkashYadavUX]

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.

[@hectormoralesfranco6850]

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?

[@AkashYadavUX]

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. 😇

[@hectormoralesfranco6850]

@@AkashYadavUX ok i got it...thanks

[@SameerChavan]

Thanks for the video. How to also add pagination dots at the bottom for full page images.

[@AkashYadavUX]

I briefly explained that in this video kzbin.info/www/bejne/bInXnp2jmKanmqM

[@MP-il8ys]

This was seriously helpful, thank you so much!

[@AkashYadavUX]

You're so welcome!

[@mischugo]

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?

[@AkashYadavUX]

You can do pagination really easily just need to link number with tap interaction to other frames. Requires a little effort but easily doable.

[@jaminizam9450]

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?

[@keithsweatshop]

This is just what beginners NEED! Thanks a 1000 for this 👍🔥🙏

[@barnyarkoudos3373]

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.

[@AkashYadavUX]

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

[@barnyarkoudos3373]

@@AkashYadavUX It says I don't have permission to duplicate it :(

[@saymumsany]

How do you fixed the Nav.? please tell me

[@sachinsharma-kp7rh]

Make such basic tutorials video for beginner. You'r video helps me as a beginner designer. Thank you❤

[@AkashYadavUX]

You’re welcome 😊

[@akashuxer]

Finally, brother 💚💚💚🎉🎉for the series.... Appreciate ur efforts brother...

[@AkashYadavUX]

My pleasure 😊

[@cinematic-p7l]

what's the shortcut used at 8:00 timestamp. To move content of frame?

[@AkashYadavUX]

i used arrow keys on keyboard to move things around without altering the parent frame.

[@ayoolaidris7262]

This is really cool, i enjoyed it.

[@AkashYadavUX]

Thank you so much😃

[@juancastaneda8745]

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?

[@AkashYadavUX]

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: kzbin.info/www/bejne/bInXnp2jmKanmqM ✌️

[@DamaHuerta]

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!

[@AkashYadavUX]

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

[@TheNirvanianWarrior]

Very helpful video ! Thx a lot for your time !

[@AkashYadavUX]

Glad it helped😇

[@newwinerealty]

Thanks, man! I really appreciate this video. But please how can I make my text not to scroll with the pictures?

[@AkashYadavUX]

Hey Sam Just remove the text from the group containing the images, it should become static.✌️

[@ashikurrahman9327]

How to make automatic slider ..how it will change automatically like hero section in webpage can you make a tutorial?

[@sasafras4743]

I also need that

[@AkashYadavUX]

You can find the automatic slider video here: kzbin.info/www/bejne/bInXnp2jmKanmqM ✌️

[@drm-relationshipcoach9475]

This is amazing Akash

[@harmishsoni3116]

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

[@AkashYadavUX]

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

[@mariajosemaran]

i cant find the link of the discord channel, i love to join but is not in the description

[@AG-jd5vz]

man! thanks a lot! this was super helpful

[@hanaalqassab]

Such a helpful video! Thank you so much :)

[@saranadaf5413]

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 ✨🔥

[@AkashYadavUX]

Thank you Sara😇

[@taniaballesteros2278]

Thanks a lot! Very well explained. I helped me a lot indeed.

[@AnweshKumarSahoo]

This is great content Akash! Very helpful. Subscribed. :)

[@AkashYadavUX]

Glad you liked it Anwesh 🤗🤗

[@saicharanchalla7570]

Thank you so much i am searching for 2 problems to sort of i found in this one video

[@AkashYadavUX]

You are most welcome

[@marianoortiz8243]

what if i want to travel since the first image to the last image? it doesnt working u.u

[@vismayouserve3765]

Exactly what I needed. Thanks!

[@AkashYadavUX]

glad it helped ☺️

[@ErezBuki]

Hello, and thanks for this tutorial. I've been struggling with figuring out how you set my mockup to scroll right and scroll left. I'm specifically trying to do this using the prototype feature (with parallax effect). Figma says you can only assign one of each action to any frame. How are you assigning two drag actions to the same group?

[@AkashYadavUX]

Hey Erez You can assign multiple action to one element as long as they are not conflicting in nature (Actions where Figma is not able to apprehend what are you trying to execute). For example if one action is "click to move to a different artboard" and the other option is " scroll on the same page". Figma will give you the error in this case, as one action is taking you to other page while one is scrolling on the same page and both are linked to same element. Two drags is simple, in the example I have shown one action is dragging right and the other option is dragging left. So Figma automatically figures out what you wanna do based on the interaction in real time. You can also do click to move to another artboard and drag as well on the same element. As long as they are not conflicting. From the "+" icon you can add multiple interactions :) check the source file here for more clarity : www.figma.com/@yakash

[@PuneethAllapu]

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

[@AkashYadavUX]

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 🙂 kzbin.info/www/bejne/gWqakpRoabyfgdE

[@PuneethAllapu]

@@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

[@AkashYadavUX]

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.

[@baconolx3145]

can u do this transition only single frame with clip mask element?

[@AkashYadavUX]

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 😇

[@princebabu6500]

My figma prototype is not as smoith as this one...and i dont know why is it like that?....any thoughts?

[@AkashYadavUX]

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🤟

[@kirk1257]

Great tut man! Thx a lot!

[@santoshayare1575]

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??

[@AkashYadavUX]

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.🤟

[@sonalijaiswal582]

Thank you so much for this content this helped me alot 👍👍👍👍👍

[@AkashYadavUX]

Glad it helped!😇

[@michellezhu1559]

Love it! Thanks for the tutorial!

[@AkashYadavUX]

glad you liked it

[@msj8285]

Thank you so much! This was amazing!

[@salwakhan2083]

you are a life saver dude!!! THANKS

[@AkashYadavUX]

😊😊😊 thank you

[@ricard289]

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

[@AkashYadavUX]

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. 🤗🤗

[@nandakishore423]

Please teach parallax effect and scroll responsive design in figma

[@AkashYadavUX]

Will do parallax soon 😇

[@manozaale8150]

Can we export the file as the same function include to presentation pdf format?

[@erkydi]

can u teach me how to create a scroll for a slider that shows increasing / decreasing numbers? :))))

[@vinaykatuka]

Hi, Nice explanation. Is this possible using the interactive components method?

[@AkashYadavUX]

Hey Vinay! Yes this is possible with Interactive components. This feature was not available when i recorded the video, hence would've included it 😇

[@vinaykatuka]

@@AkashYadavUX Thank you, If possible make a video on how we can use interactive components. It will be helpful. Thanks again!!!

[@AkashYadavUX]

Sure Vinay! Interactive variants video is in the backlog. will work on it soon😇😇

[@vinaykatuka]

@@AkashYadavUX Awesome!

[@sashanarlie2832]

This video was very helpful and clear as well! Thank you for explaining the different types of scrolling and framing as well. Great video! Also, I did not see any link to the discord group below the video. Is there still a group? Thank you!

[@AkashYadavUX]

Hey Sasha You can join the group here: discord.gg/KrXd7kCa

[@sashanarlie2832]

@@AkashYadavUX Thank you!

[@barnyarkoudos3373]

Awesome! That was very helpful thanks a lot!

[@sophieessien]

thanks a lot. this was really helpful

[@Fillup82]

When I do this the whole screen moves, anyone know why?

[@simplyaizhan]

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?

[@AkashYadavUX]

Hi Aizhan You can check out my other video here : kzbin.info/www/bejne/pXaTp2Otm71ld7M 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 :)

[@aj20ad]

Thank you. This helped in a project I'm building.

[@AkashYadavUX]

Glad it helped

[@deependuajish]

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.

[@AkashYadavUX]

did get you actually? Can you explain again?

[@misaag_4312]

Really appreciate this! Can't wait to implement it!

[@AkashYadavUX]

Glad it was helpful!

[@sauravsharma2617]

Thank you so much Akash sir this was really needed

[@AkashYadavUX]

😇😇 Thanks Saurav

[@paulitasalama]

Hello, thanks a lot. I have only one question, I need to put numbers above the carousel, from 1 to 5. How can I do it? Would you help me? Thanks

[@AkashYadavUX]

Hey Paula! Hope I got it right, if you are asking about putting numbers on each carousel elements. Then you can simply create a group of image+ number and that will become your new element. Now you can apply the same procedure that i have shown with the group rather than the images 😇

[@rupanshidas606]

Thank you so much for this video!!!

[@AkashYadavUX]

Thanks for being here 😇

[@manasagrawal2960]

This is super helpful for me !!!!

[@AkashYadavUX]

😇

[@break_itchordz6428]

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

[@311076]

MAN!!! You are awesome! Thanks

[@AkashYadavUX]

thank you 🤠

[@Efezino.]

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....

[@levitabusman]

I can’t select horizontal scrolling the option is not even showing in prototype, I’m not getting, overflow options

[@AkashYadavUX]

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.🖖

[@kaorumap]

Make sure you choose your Frame before clicking on the prototype tab

[@SparklingINsilencE]

This was awesome, thank you !

[@AkashYadavUX]

You're so welcome!

[@gehwaldbereit]

Hello! Great Video, but I cant get it right. Is there a chance that you share your Figma File? would help a lot.

[@AkashYadavUX]

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: kzbin.info/www/bejne/ioS7qoyqadRjkMk

[@gehwaldbereit]

@@AkashYadavUX thank you so so much! Very appreciated!

[@yulia2738]

So helpful! Thanks!

[@AkashYadavUX]

You are so welcome!

[@minalmukarande]

What if I want to use a button for scrolling when I click it?? How can I do that???

[@AkashYadavUX]

checkout this tutorial kzbin.info/www/bejne/pXaTp2Otm71ld7M

[@bart-janvanrossum4358]

thanks, clear to the cut.

[@AkashYadavUX]

🤠🤠 thank you Bart

[@melacid]

Unless I select the whole frame, it won't let me slide. I just want a group to slide so the background stays static :(

[@AkashYadavUX]

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 :)

[@melacid]

@@AkashYadavUX yes! I saw another tutorial and it said the same thing. Thanks a lot for replying!

[@shesoldmychicken7241]

how do i automate the slides?

[@AkashYadavUX]

Replace the drag trigger with delay and it should work 🙂

[@shesoldmychicken7241]

@@AkashYadavUX hey I'm unable to select after delay

[@AkashYadavUX]

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 😇

[@zandervera4396]

Excellet! Thank you so much for this.

[@AkashYadavUX]

glad it helped