Basics of Scroll/ carousel interaction in Figma
HTML-код
- Опубликовано: 2 июн 2024
- Source file 👉 www.figma.com/community/file/...
🎉🎉Join our mentorship program here 👉 www.upglance.com/
👉 Follow me on my socials for more:
/ akashy
/ kash__91
dribbble.com/akashy
👉 My RUclips setup gear:
Canon M50: amzn.to/2Xv6LP3
Tripod: amzn.to/30xluel
Boya shotgun mic: amzn.to/2XuZOxc
⏰ Timestamps
0:00 Intro
0:15 - Intro to scrolls/ carousel
1:32 - Simple/ free scrolls
7:00 - Page scroll
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
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✌️✌️
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 😇
Man this was so helpful. As a novice designer, having this stuff so nicely explained is a blessing!
Glad it was helpful!
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 🤗
From the bottom of the heart thanks Akshay for this video. Clearly explained in detail.
Niiiiice! Thanks, Akash! This was exactly what I needed to learn for a research prototype that I'm building!!
This is just what beginners NEED! Thanks a 1000 for this 👍🔥🙏
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 :)
I generally. dont give comments, but your presentation was an absolute "no nonsense" and clean.. Loved it!!!! Cheers
Glad you liked it!
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😇
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!😇
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
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 😬
So carousel wasn't that scary after all :D Thank You for such a helpful video!
Boss....... Your Explanation Helps Me Lot Thank You. GOD BLESS YOU.
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
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?
Thanks a lot! Very well explained. I helped me a lot indeed.
Thank you Akash! Your tutorial had just what I needed to know and your explanations is flawless!! Thank you!!! :)
You're very welcome! 😊
Thank you so much! This was amazing!
Thanks brother :) This is the simplest video I have ever seen explaining the carousel in Figma.
Glad it was helpful 😇😇
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?
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
Such a helpful video! Thank you so much :)
Great tut man! Thx a lot!
Awesome! That was very helpful thanks a lot!
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
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.
Just what I needed. Love you Akash!
🤩🤩🤩🤩
Love it! Thanks for the tutorial!
glad you liked it
thanks a lot. this was really helpful
Really appreciate this! Can't wait to implement it!
Glad it was helpful!
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
man! thanks a lot! this was super helpful
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.
This video save my day ! Keep up the greate work Akash !
😇😇😇🤗🤗
This is amazing Akash
This dude Snapping!🔥🔥🔥
🤩🤩🤩
Finally, brother 💚💚💚🎉🎉for the series.... Appreciate ur efforts brother...
My pleasure 😊
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.🤘
Thanks a lot, now I know how to create a DRAMATIC EFFECT. I love it
Happy to help!
Thank you sooooo much Akash!! I was going crazy with this, you made it so easy!!
😇😇 glad it was helpful
This was seriously helpful, thank you so much!
You're so welcome!
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....
Very helpful video ! Thx a lot for your time !
Glad it helped😇
Exactly what I needed. Thanks!
glad it helped ☺️
Thank you so much for this tutorial. Your explanation is easy and simple to follow
You're very welcome!
This is great content Akash! Very helpful. Subscribed. :)
Glad you liked it Anwesh 🤗🤗
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
This is really cool, i enjoyed it.
Thank you so much😃
life saver trick, thanks
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 :
ruclips.net/video/oE0v0wfX2AQ/видео.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 :)
Thank you. This helped in a project I'm building.
Glad it helped
i cant find the link of the discord channel, i love to join but is not in the description
El único vídeo que me sirvio, graciaaas
Awesome! very useful!
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 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 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!
Hey Sasha
You can join the group here:
discord.gg/KrXd7kCa
@@AkashYadavUX Thank you!
This was awesome, thank you !
You're so welcome!
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
Thank you very much!
Can we export the file as the same function include to presentation pdf format?
Thank you so much for this video!!!
Thanks for being here 😇
How do you fixed the Nav.? please tell me
Thank you so much Akash sir this was really needed
😇😇 Thanks Saurav
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.
🤗🤗
MAN!!! You are awesome! Thanks
thank you 🤠
you are a life saver dude!!! THANKS
😊😊😊 thank you
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?
subscribed sir thnakyou so much
So helpful! Thanks!
You are so welcome!
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
Make such basic tutorials video for beginner. You'r video helps me as a beginner designer. Thank you❤
You’re welcome 😊
thanks for the wonderful video ..
Thank you☺️☺️
can u teach me how to create a scroll for a slider that shows increasing / decreasing numbers? :))))
Thanks a lot!
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: ruclips.net/video/6XtmjmcAtdA/видео.html
✌️
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.✌️
Excellet! Thank you so much for this.
glad it helped
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
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 😇
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 :(
Keep up the good work!
🤩🤩🤩🤩 thank you Mons
what if i want to travel since the first image to the last image? it doesnt working u.u
Thanks for the video. How to also add pagination dots at the bottom for full page images.
I briefly explained that in this video
ruclips.net/video/6XtmjmcAtdA/видео.html
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
Thank you so much for this content this helped me alot 👍👍👍👍👍
Glad it helped!😇
Thank you so much i am searching for 2 problems to sort of i found in this one video
You are most welcome
thanks, clear to the cut.
🤠🤠 thank you Bart
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 🙂
ruclips.net/video/K97aa24WlKo/видео.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 Akash, which link is the discord group invit? I would like to join, thanks :)
Thx for this video !!!
Welcome!
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.🤟
This is super helpful for me !!!!
😇
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😇
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✌️
Amazing, thank you
thanks shubham😇😇😇
When I do this the whole screen moves, anyone know why?
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
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.
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🤟