Basics of Scroll/ carousel interaction in Figma

hey everyone welcome back to the channel and with this video i am starting a new series where i'll be explaining some building blocks basic interactions in figma and using those building block interaction you can build complex prototypes so i usually post a high frequency complex prototypes on my channel i'll link up the playlist here you can find them there and i'll keep on posting them but many times this also happens that a lot of people message me and ask me how did it do that how did you do this and i cannot explain everything in the video because it'll make the videos really lengthy so i have decided to break it down create these smaller interaction videos in this particular series so that you can learn directly from here and obviously the complex one i'll keep on posting them on my channel regularly so that's out of the way uh before we start hit like and subscribe to the channel so that youtube can recommend it to everyone and if you haven't just join our discord server i have created a discord community where we designers hang together and discuss more about design career and everything related to design so do join it and without further ado let's get started so first topic is called scroll groups are also known as carousels and they are a very commonly used entity in app designs or in website designs they are typically of two styles and i'll explain both of them with examples so let's first see the first one the first style of carousels are called something like free scroll so i'll explain you how it works so for example right now we have this iphone 11 pro max artboard and i have these four images which i have grabbed from unsplash now what we will do is we will just drag them to our artboard like this and we'll go in our prototyping tab by selecting our artboard and in the overflow behavior we'll choose horizontal scrolling now let's see how it looks like and that's it that's your first form of scrolling which is like a free scroll and it's called a free scroll because if you see you can just freely move around the scroll in the horizontal direction and this is very simple to do just select the frame and you can go to the prototyping tab and you can select the overflow behavior you can also make it a vertical scroll if you just want to stack all these things vertically and you can choose vertical scrolling from there if you want something to move vertical and horizontal both for example a map you can move it in horizontal as well as in vertical direction and then you can choose horizontal and vertical scrolling both so the only uh when using this property you just should be careful for one thing is that the frame that contains these elements these elements should overflow from that frame so for example if i show you all these four elements these four elements are flowing out of the artboard frame so since it's flowing out of the output frame hence we are able to apply a horizontal scrolling in horizontal direction because they are overflowing in the horizontal way and there's a reason it's called overflow behavior because the content is overflowing from the frame that contains it in our case the four images are the content and they are overflowing from the frame that is the artboard itself in the horizontal direction so we were able to apply a horizontal scroll in the horizontal direction for these four images so always remember that your content should overflow in the direction from the artboard that contain it so if you want it to move vertically then your vertical component your vertical content actually should overflow from the frame that contains it so this is a very basic form of scrolling that figma loves now uh if you see here if you come to this scrolling you see that um our last image the last image does not scroll beyond this and it sticks to the edge and now this is something that is not desirable when you design the final design right so what we can do is in that case we can come here and we can select all of these four images and group it and let me call it scroll okay so i have grouped them together and call it scroll now what i can do is i can change this group property to frame as i explain frame only contains these options of scrolling horizontally and vertically now if i go to my prototyping tab and if i select the scroll group and i try to give it a horizontal scrolling you will see it shows an error now if you see the error closely it says for scrolling to work the frame the content needs to be bigger than the frame so what it means like the same thing that i explained just uh just now is that your content should overflow the frame that contains it so if you see the frame bounds is still here and your content is also still there right so nothing is overflowing from your main frame right the scroll frame hence it's not able to horizontally scroll it if i just show you how it looks you see i'm not able to scroll because what is happening as of now is my four images and the frame that contains the scroll frame is of the same dimension so now to fix this to fix this error what we need to do is hit command on your keyboard select the frame that contains the elements and you can resize the bounds of the frame now i want to resize the bonds to this position or maybe something like this right and what will happen is now the bounds is smaller than the content here now the content is overflowing from the scroll frame and now we'll be able to see that we are able to scroll so if i come see i'm able to scroll now and what i've also done is i have made the bounds slightly smaller than the it's not slightly smaller than the uh artboard frame itself so it's not touching the frame and hence we see that the last element does not touch the edge of the screen which was happening earlier now one more thing if you see maybe you don't like this cut out okay so what you can do is you can select the scroll group and you can remove the clip content option so what will happen is now you'll be able to see all the things flowing but you will see that it does not stick to the right edge so if i come here see so perfect so this is how scroll free scroll works actually in figma and now let me show you the second part of the scroll which is called a page in some prototyping tool and it's more like an assisted one where you don't freely move it you always see something in the center so let me explain that from the example to explain the page school again i have four images and i also have my artboard here now what i'll do is i'll select all these four images and group them together like this and i'll again call them scroll and what i'll do is i'll move them in my artboard like this something like this so a screw a page scroll is basically nothing but something where ever at any given particular time one of the element is in the center right so to build this this is not built from the prototyping property it's built through drag so what i'll do is i'll duplicate my artboard four times because i have four elements to explain you how it looks like let me just quickly do that so i have duplicated my artboard four times and now in every position in every uh artboard i want a different element to be in the center so in this one first is in the center i'll select this group and i'll make sure the second one is in the center okay so now i have four artboards and different images are there in the center of all these artboards now to create this page scroll what we need to do is we need to link the first one let me just move it around so you need to go to the prototyping tab and link the first one to the second artboard and instead of on click you need to on track and navigate to smart animate and you can do ease in or without it's up to you ease out is fine and 300 milliseconds perfect now you also want that from second you should first of all be able to go to the first art board again let me just give it a little bit more spacing okay so from the second one what we need to do is we should be able to go to the first one instead of on click again on drag navigate to smart animate 300 seconds perfect and from second also you should also be able to go to the third one so what i'll do is again select the needle and instead of on click again on drag navigate to iphone 11 perfect is out 300 milliseconds now just look at this still this itself let's see how it looks like so i'm here so if you see if i move it around i'm not able to freely move it i am only always getting something in the center right and let me do the same thing let me do the same prototyping for all the other elements let me just quickly do that so yeah i am done with my prototyping where i have selected uh all of the four artboards and i have linked them through drag back and forth and let's see how it overall looks like so if you see i am always seeing something in the center so unless the free scroll uh there's always something in the center i'm not able to move it to any position that i want so always the center to make it more dramatic what you can also do is you have you might have seen in many of the apps you can make other elements smaller or maybe lighter in opacity so that it looks even more dramatic let me also just do that quickly so guys to make things more dramatic what i have done is i have made the other tiles except the center one smaller so in this one the other types are smaller and in this one the center one is bigger and the rest of the types are smaller so i've done that for all the artboards and let's see how it looks like see so you see you see you get this really nice dramatic effect of image becoming bigger with the movement so yeah that's how you make a page scroll and make it even more dramatic you can play around with opacities you can also play around with easing options that you see here uh you can i have done these out but you can also do use our pack easy and ease out just check out what works for you and you can add even more dramatic things to your scrolls so that's it that's how page scroll works i hope you like this video and i'll be posting up more figma tutorials more simple bite size figma tutorials in my upcoming videos so do share and subscribe and i'll see you in my next video [Music] bye

Channel: Akash Yadav

Views: 38,306

Rating: 4.9412341 out of 5

Keywords: UI, UX, DESIGN, INTERACTION, ux design, User experience, figma, sketch, prototyping, basics, scroll, carousel, figma tutorial, user interface design, ui design

Id: i2jM1dL7_kQ

Length: 12min 10sec (730 seconds)

Published: Sun Jan 03 2021