Figma Scrollable bar animation

hi everyone and welcome to today's video today i'm going to be showing you how to create this scroll bar animation in figma one thing that you can scroll you can scroll to the bottom like this and you can scroll back up in a few simple and easy steps so today just sit down relax and then let's watch and learn alright see you in today's video [Music] all right so first things first we're going to create a new project let's click on that and we're going to give that a second to load then we're going to call our project scroll yeah all right so that's it so next we're going to insert a frame we're going to be making use of a frame this is gonna be the frame we're gonna be making use of right so inside our frame we're gonna draw a rectangle actually square actually rectangle rectangle is the best name for it all right so you just want to make sure that our rectangle is actually just the same width as the entire frame just make sure it actually fits in perfectly like that all right so we're going to give our rectangle a heading all right so before we do that we're just going to go back to our frame we're going to give it a border radius of let's give it a border radius of 30. okay so it actually looks uh quite nicer all right so this is going to be our heading so i'm going to give this a dark blue shade of color yeah something like that all right then i'm gonna design this a little bit so this is gonna be our design we're gonna give this a put a radius of 20 all right so we're gonna center this design all right so i'm going to give a user different options to select food so i'm going to have a title say licked food okay so we're gonna have to increase the size of that to 40. let me increase that to 40. j40 looks so big let's change that to 20. okay so let's change the font to pop pins i love front poppings and i'm going to center that text i'm going to give it a bold right that looks much better all right so next we're going to draw another rectangle okay so we're going to add another rectangle just make sure it's the same the same width as the as the entire frame so this rectangle we're gonna place right around there all right so there's something we're gonna do we're gonna just select your main frame then just make sure you unclick this statement clip content this will allow you to see uh different items that actually beyond the frame so when you select your main frame and you click clip content you realize that actually it covers only what is inside the frame but we want to add some texture to actually probably not even appear in the frame it will actually be outside the frame just like that all right so i'm going to give this a white color all right so inside here we're going to add some text i'm going to add some we're going to type in some text uh so we're gonna add some food items i'm gonna start with chicken [Music] all right so this statement does not need to be bolded we can change that to regular it's gonna position it right around there so chicken is gonna be our first item so we're going to duplicate this a couple of times let's just duplicate it i do that by holding alt alright so i'm gonna i'm gonna make use of all these statements then i want to just click alt and then duplicate at once all right but you can do it as you like so i'm going to change these statements a little bit to different food items i'm going to change this to pizza and i'll change this to hot dogs i'll call i'll change this to beef burger watching this to french fries okay so next we're gonna have ice cream all right so different items and snacks so this can be um let's make it something simple banana okay so what happens next is just make sure that all these items actually within the frame so every every item should actually be within the frame all right so next we're going to select this white rectangle vector just design then just make sure to select all the so i do this holding shift and then we're gonna group the items with that white triangle so you're gonna select this and then we're gonna say group selection so this group we're gonna call food items okay so next we can go back select our mainframe again then we can go back to clipping content and that's what we have so what we know is generally the list actually continues all right so next we're going to create our scroll bar just zoom in and create a scroll bar right there it doesn't need to be thick just needs to be thin like that the size doesn't matter too much all right let's give this uh some curvature let's give it a coverage of 10 yeah that's actually enough then we're gonna duplicate this we're going to thicken that a little then this is going to be our scroll bar okay so we're going to give this a dark blue color also just make sure it's also dark blue that would do all right and that's uh that's basically it so next we're gonna duplicate our mainframe set your my frame and click ctrl d all right so next what we want to do is we're gonna uh drag this scroll bar to the bottom so when i create an animation and the scroll bar goes to the bottom so in our second frame just make sure to drag this all the way to the bottom of the scroll bar of the of the bar all right so almost there okay that's that looks good then we're going to drag our food item so on make sure that when the scroll bar is actually at the bottom sorry about that so i want to make sure that so it's something i missed so we just want to make sure this group of food items is actually um right below it's gonna have to be right at the bottom just make sure our food items is actually right at the bottom okay so that actually doesn't mix up with everything else so i'm gonna position our food items just keep on doing this until we arrive at the at the bottom all right until we have our last food item all right so our last food item is banana we just want to make sure banana is visible when you've reached the bottom and then this is actually the top okay that's basically it's all gonna do some prototyping so go to your prototyping and then we're going to prototype this this scroll bar here so we're going to create an interaction we're going to say on drag navigate to frame two then i'm going to make sure it's smart animate and 300 milliseconds all right so i'm going to also go to frame two then i also want to create an animation and an interaction for the scroll back to so i'm going to say on drag navigate to frame one all right and that's biscuit let's test this by clicking on play all right so right here we have our uh our entire scrub animation so let's try to play around with it so i'm gonna try to drag this as you can see the items actually shifting just the way we wanted to happen and that's basically how you create is a scroll bar animation in figma in those few simple and easy steps i hope you learned something if this video helped you just feel free to tell me below in the comments and if you are new to the community i encourage you to subscribe and to join in the community and please make sure to hit that notification bell so that you get updates every time i upload a new video otherwise thank you so much for watching i'll see you all in my next video bye [Music] you

Channel: Create Beautiful Things

Views: 1,288

Keywords: Figma Scrollable bar animation, figma scroll animation, figma scrolling, figma scrolling frame, figma scroll menu, figma scroll bar component, figma scrollbar, figma scrollbar animation, figma list items, figma list view, figma list component, how to create a custom scroll bar in figma, how to create a scroll menu animation using figma, figma scrollbar animation tutorial, figma scroll indicator, figma vertical scrolling, figma vertical scrolling error

Id: UFbPPtvAfNM

Length: 9min 53sec (593 seconds)

Published: Wed Nov 24 2021