Scroll Bar Animation in Figma Using Smart Animate

hi guys welcome to today's video in this video we are going to be creating this scroll bar effects that you see right here um and this is a typical example of where you might need to use a scroll bar effect in your prototyping in your web design this is a really easy stuff to create um so let's get started please don't forget to like subscribe and turn on the notification bell if you find any of my videos helpful so for this video i'm going to be making use of this free ui kit dashboard that i got from the figma community you can also go and um use the same file i'm going to be using this particular page um in this free ui dashboard kit i'm going to open up a new design file and then paste that particular page um on my design board so that we can just have a boilerplate to create the prototype that we need um so i'm just going to adjust the screen a little bit and i'm going to take out this first section because i just want to focus on this to-do list here that has this navigation bar so the first noun to do is to make this navigation side a little bit more obvious just like the way you see in the video um so i'm going to click on that particular but you can see the components of that particular to do sidebar um and as you can see i'm trying to target this particular scroll bar but we can't edit it because it's a component so i'm going to go ahead to detach all the components in this section um so that i won't um have issues when i try to make edits on them so after i've completely detached all its components in this section here um i can now go back to our scroll bar um targeted and i'm going to increase its width a little bit i'm doing this just to make it more obvious then i'm going to increase the thickness of the gray color so that it's very obvious um the next thing i would want to do from here is to just select the entire section where we'll be needing for this um effects or this animation so if you select here you're going to see you're going to target just this middle part here where we have the scroll the list of cards and the scroll menu so as you can see um i'm just going to close up the whole dashboard so we can just make use of this single section here where we have on the screw bar and the main section so i'm just going to rename this other parts to main section so that we can easily this distinguish between both sections as you can see this section has um just a list of cards and that's what we are going to be working with um so the first thing i'm going to do here is to select this crowbar as you can see it's um an auto layout element and i'm going to make it click on this absolute position right here to make it absolutely positioned then i'm going to move it all the way to the top right so as you can see this main section here has a list of cards if i uncheck this clip content we're going to see on the list of cards i'm just going to do that so you can see that the list of cards overflow i'm just going to close it back what i want to do now is left click and click on frame selection so i'm going to fit that whole section the whole main section in a frame i'm then going to select that main section and then uncheck the clip content on it because i want the main section to be a full section um that shows the entire card i'm also going to rename it to card list so that we don't get confused so this section is the list of cards then the mainframe where we have the section in i'm going to call it main section now i'm going to select this card list and i want the frame to extend to the entire section so now we have a full section of the list of cards it's um some auto layout frame as we can see then it's contained in the main section so now we have our list of cards in the main section um alongside our screw bar on the right so that's the typical anatomy of this section here what i'm going to do next is to create a duplicate and on these duplicates i'm going to move the scroll bar from the top of the screen down to the bottom and i'm going to be using the arrow key to just move it all the way down just like this and i think this is okay and for this other section i would like the list of cards to move all the way up which is going to implied um that we've completely scrolled to the bottom of the cards list so i'm just going to be using the figures from this y-axis here because i don't want to tamper with the x-axis while trying to manually move it all the way up so i'm going to just edit the figures of this y-axis then when there is a little left i'm just going to use the arrow key to move it all the way to the top just like you see here so now we have these two sections um one that shows use completely scroll to the top and one that shows you completely scroll to the bottom then i'm going to clip the contents of the main section frame on both of this now i'm going to select the entire frame the both of them and i'm going to head over to the component section and create component set now we have a component set of two variants um and we are going to start our prototyping i'm going to select this scroll bar of the first section i'm going to target the scroll bar and i'm going to switch to the prototype mode then i'm going to connect the wires i'm going to connect it to the second variance but for this i want it to be an on drag effect and i want it to be a smart animation i'm then going to return the favor by doing the same thing for the second variant i'm going to target the scroll bar of the second variance and i'm going to prototype it all the way to the first one and i'm going to make it an on drag effect and i'm going to leave it at smart animate now we have our prototype all complete i'm now going to create an instance of a component and i'm going to hit ctrl command x to cut it then i'm going to go to the section where we need to use it um and i'm going to right click then click on paste to replace and once you've done this you can now click on your entire um dashboard and click on prototype to view what we've just done and this is it guys you can see if you click on your scroll bar and then scroll all the way to the top you can see that it's gradually animating to the bottom of the catalyst and you can do the same thing to um to the top and so forth so this is good guys thanks for watching i hope this video was helpful and i hope you enjoyed the video please don't forget to like turn on the notification bell subscribe um to get more videos like this and i am going to see you in my next video bye

Channel: Thefemijohn

Views: 19,222

Keywords: figma smart animate, figma animation, figma animation tutorial, figma smart animate tutorial, figma tutorial, figma animation prototype, smart animation in figma, figma prototype animation, figma, animation in figma, slider animation figma, smart animate figma, smart animate figma tutorial, smart animate, figma prototype, figma animation website, figma progress bar animation, figma scroll animation, figma animation scroll, progress bar animation using figma

Id: YRM2TYin2Oo

Length: 8min 36sec (516 seconds)

Published: Fri Jul 08 2022