Figma| How to make Endless scroll/slider

hey everyone welcome back to the channel and in our last video we talked about carousels or scrolls basics of carousels and scrolls and how can you design different types of carousels and scrolls in today's video i'm going to talk about one more variant of carousel or a scroll which is called an endless carousel or a cyclic arousal what that means is that in a typical carousel what usually happens is that when you reach to the last element you can't scroll beyond it and you have to scroll all the way to the left to reach the first element so the scroll ends at the last element usually on the right in a typical horizontal scroll now cyclist scrolls means that a user can keep on scrolling in the same direction let's say in the right direction till it reaches to the last element but you allow the user to scroll beyond it and the user again scrolls to the right and sees the first element and then again second element third element fourth element so it keeps on cycling between the different element without having the user to scroll to the first element again so it's sort of like an uh cyclic scroll and that's exactly what we are going to build today so yeah let's get started [Music] so guys we are in figma right now and if you see we have these four images simple four images that i have added and these are four distinct images what we want is when the user reaches to the last element this fourth image and i keep on scrolling to the right i should again see the first image and then second third and then again fourth so it keeps on cycling between these four images so now to build this let's quickly do that so what i have done is i have added these four images to my artboard and this is the first image second image third image fourth image and what i have done is i have repeated the first image again in the last so if you see in the left hand side panel image one two three four and then again there's the uh first image in the end so this is how the trick is gonna work and i'm explaining and i'll explain how it will work in the end okay so now you have the first artboard with these four images and the copy of the first image now what we want is we can just quickly group them together and it's the same procedure that we have done in the previous video i'll link up that window in the description or in the cards or the i icon on the video above so you can check it out as well great so now we have grouped them together i'm gonna call it scroll now what we want is we have to create five copies of it because we have five elements and in each of these copies there's a different image that will be in the center so let's quickly do that okay great so now what we have done is we have made uh this center image different in all the five artboards now what we want to do is we want to link them with the drag interaction way we did for the last video so what i'll do is i'll select the entire group scroll go to my prototyping tab and then what i'll do is i'll go to drag it to the text artboard and instead of on click we want it on drag navigate to smart animate ease out 300 milliseconds perfect now same thing for the second one uh what we want is from here it should go to the third artboard on drag again same thing everything is same and we also want that we should be able to drag it to the left as well so we will drag one arrow to the left in the first artboard and again on back so you can add multiple elements uh multiple interaction to one single card and everything remains the same let me do it for all the cards now very quickly so guys what we have done is we have now linked everything together with a drag animation if you see first to second second to third and they're cross linked with the drag animation except the last one in the last one we have only linked fourth to the fifth we have not linked anything from back to this one so let's see how it looks like in the prototyping tab now first image second image third image fourth image i can scroll between them and after the fourth there's the first image i can scroll to it but i cannot move anything uh beyond the last image which is the replica of the first image and the reason being we have not linked it to anything and here the change happens from the normal interaction we now wanted to make it cyclic so let's do the magic here what we want to do is um in this last frame which contains the same exact element as the first one what you want to do is select the artboard and we want to create a interaction we want to move it directly to the first one so what i'll do is select the artboard and drag and drag an arrow to the first frame and here we don't want it to do it on tap we want to do it after delay because we're going to do it automatically instant and we don't want we just want to do it probably like one millisecond and instantly we want to move it to the first screen okay and by doing this what will happen is once you reach to the last screen it automatically goes to the first and you can keep on scrolling to the right so now let's see how it works remember the interaction after delay one millisecond and instant we don't want any animation here let's see how it looks like okay so page first again it's a continuous scroll now see perfect so that's how you make a cyclic scroll if you want to have a little bit more fun what you can do is as i told you in my last video you can make them the elements a little bit bigger or smaller try the same thing and it will become cyclic so that's it that's it for today's video i hope you liked it and i'll see you in my next video bye you

Channel: Akash Yadav

Views: 51,952

Keywords: scroll, figma, figma tutorial, figma tutorial for beginners, figma tutorial app design, figma basics, figma for beginners, how to get started with figma, ux design, ux, ux designer, user experience design, user experience, ux ui, ux/ui, ux ui design, user interface design, ui design, product design, digital product design, design, product designer, carousel

Id: K97aa24WlKo

Length: 7min 14sec (434 seconds)

Published: Sat Jan 09 2021