Figma Slider Animation

hi everyone and welcome to today's video today i'm gonna demonstrate to you how to make a slider in figma it's not gonna just be a slider but it will be a slider that has a counter also below it where numbers change so when i drag the slider towards the right you can actually see there's a change in the numbers and i can also drag it to the very end we're going to learn how to do this in the figma in a few simple steps you can also drag it backwards and to take you back to the very beginning all right so let's get into today's video [Music] alright so i've started a new project i'm going to call my project slider i'll just keep it simple then we're going to make use of a frame so we're going to insert a frame we're going to make use of the iphone 13 pro i max own this someday i'll make sure i will all right then i'm gonna give our frame some color for design i'm gonna use some um reddish pink i don't fall in love with this color one of these days all right so we've given our frame a color and then we can also design the layout just the border radius of the entire frame all right i love i love that curvature but you may not need to do that but it's just for design so next we're gonna draw a rectangle so we're gonna make use of that rectangle shape we're gonna draw a rectangle right around there then i'm going to give it some border radius let's give it a border this of 30. okay that looks good then we're going to make this white all right so that's the original we're going to place our counter okay so next we're gonna design our slide we're gonna design our slider using the rectangle tool so i'm just gonna draw a small rectangle shape right there then just make sure to center it so i'm gonna zoom in okay so this is our rectangle shape right there we're going to give it a border radius of 10 all right that's already looking okay then what i want you to do is we're going to duplicate it so i'm going to duplicate this hold alt then duplicate this then we're gonna duplicate it a third time okay so we're gonna give this third one a white color make sure it's pure white all right then we're gonna put the white on top of the on top of this second one so we're gonna put the white rectangle on top of the second rectangle then we're gonna combine these two and mask them so we're gonna say use as mask okay so you may not know what has gone on but actually the two have actually masked together so what that actually means is we're able to shift the white rectangle within the other the other shape so as you can see the white rectangle is reducing what's happened is it's hidden inside the mask okay so i'll undo that that will be pretty helpful so what we're going to do is we're going to place this white on top of the very first rectangle shape with actual designs just place it right there just make sure it actually fits okay just make sure it actually fits that way okay i think that looks better all right so we are able to shift the white rectangle so as you can see this rectangle right below here is the white one so when it shifts you can actually see the change that's happening so there's a shift all in the background okay so what you want to do is i want you to drag the the white rectangle up to up until the very extreme end okay so gonna drag it to the extreme end all right till somewhere around there i think that's perfect all right then we're gonna draw an ellipse not too big then i'm gonna give our ellipse a white color okay then for design purposes we're going to give our alex some shadow all right has already given it a shadow by default when you just clicked on the effects there was a drop shadow that that looks okay so i'm going to place this uh right there at the very beginning okay all right i think that's looking okay that's looking okay all right so next we're going to design a counter a number counter so i'm going to type in some numbers i want to make sure my font is size 100 okay all right that's already looking okay then we're going to type in numbers we're going to start from 0 enter 10 20 okay sorry 20 30 40 60 70 80 90 100. so we're gonna end on a hundred for now all right so next we're gonna give this a bolt that we're gonna center them so just make sure to text a line to center all right that's looking much better then we're going to give this uh the pink color we have right there okay then i'm going to make use of the rectangle tool we're going to do some masking all right so inside this rectangle here we're gonna uh first first make this invisible so just remove the visibility but before we do that just add a stroke to it then remove the visibility then we wanna make sure we position it rightly we want to position it in a way that the base of the zero is actually just right below there okay so we're going to zoom in just want to make sure the base of the zero is actually just right below the rectangle shape okay and also going to make sure the top is actually just slightly that it touches the zero okay then we're gonna put the visibility back on the visibility back on then wanna go we're gonna go to our layers panel here and then drag this rectangle below the numbers just make sure it's right below and then we're going to highlight both and right click then we're going to use as mask okay so when you do that you realize that the numbers actually hidden behind the mask then we're gonna drag that and place it right in our shape okay right in our frame just make sure this is actually centered around there okay that's looking much better okay so next we're gonna duplicate our our first frame so we're gonna do that by clicking ctrl d okay so in our second frame so go to your second frame in our second frame what we're gonna do is we wanna so we're gonna first place this first place this this ellipse towards the side so in our second frame we're gonna adjust the white let's just position it so we're going to adjust it and just make sure that the white actually moves by holding the arrow button right arrow until it closes until it reaches the maximum okay right there so this is our second one so so after that we're going to place this ellipse right at the end so you can see those red lines that come to show you that you're actually doing perfect aligning okay that looks much better then we want to make sure there's another change so down here we're going to adjust the numbering the text so we're going to adjust the text so just make sure the text is selected then we're going to place our upper arrow until we reach 100 so you're going to drag that until we reach the value of hundred so i don't wanna waste much time doing that i'm gonna make use of this y value here then i'm just gonna go to negative 400 okay so as you can see it takes me down right below so that i can get closer to the 100 value okay just make sure the 100 actually appears visibly okay that looks good right and that's it then we can now click actually before we do that we're gonna do some anime we're gonna do some prototyping now okay so what we're gonna do is we're gonna prototype the ellipse so go to prototype then we're gonna click plus then you're gonna make sure on drag when it navigates to the second frame smart animate 300 milliseconds that's fine then we're also going to go to the second frame we've actually created then what's going to add an an and a and we're going to prototype the second ellipse so also going to do that on drag navigate back to iphone one so it will navigate back to the first frame smart animate 300 milliseconds that looks okay then we're gonna click play and then we're going to test our animation all right so our animation has actually just loaded so let's test it so as you can see when i drag this is actually movement in the numbers it takes me back to the very beginning to the zero value and then we can go back to the 100 value and that's it that's how i'll do it in figma if you learned something for this video feel free to tell me below in the comments i'll be glad to read your comments and to probably reply then if you have anything you want to see me designing just feel free to tell me and finally if you're new to the community i encourage you to subscribe and to join in the community and then don't forget to hit that notification bell so that you get updates every single time i upload a new video thank you so much for watching i'll see you all in my next video bye [Music] you

Channel: Create Beautiful Things

Views: 58

Keywords: Figma Slider Animation, figma slider prototype, figma slider component, figma smart animate, interactive components figma, interactive components, figma drag animation, figma scroll bar, figma counter animation prototype, figma slider with counter, figma number slider, figma realistic slider, figma counter and slider, figma slider smart animate

Id: 3BTtkVLCVE0

Length: 10min 8sec (608 seconds)

Published: Sun Dec 05 2021