How to make an interactive slider in Figma with Auto Layout

hello and welcome back to my channel this is will from wilbrat design today we're going to be looking at how to create sliders using auto layout in figma so what is a slider a slider is something a ui tool that we can use or a component sorry that we can use for say controlling the volume or other parameters like that and the way we're going to build this is we're going to create this component here which is built made up of a group inside we've got this adjustment layer which is our auto layout layer inside there we've got an ellipse for our handle a spacer that we're going to be looking at later but this is the secret source and this rectangle here which is used as the background so how does this work if we head over to our adjuster layer and we can see that we've got the space between here and if we adjust that pull it down to zero it sets our slider at zero and we can pull it up all the way to 100 in reality we can actually pull it past that which isn't ideal but that's the limitation of the tool um but we know that that is a hundred percent there or we can add 50 and we can animate everything about this which is really cool so we're going to jump into how to build that now so let's go first thing we're going to do is create a new page which i'm going to call sliders and we're just going to do something really quick that i really like um and we're just going to jump into another tool really quickly and i'll just share that with you so we're going to head over to this website called coolers.com and it's just a really cool little tool for generating color schemes and when i'm playing around with just building out components and stuff i like to just grab some colors from here and it usually comes up really really nice pairings so we go we've got a nice selection here i'm just going to press space and recycle through sorry cycle through and we're going to pick a color that quite like or a set of colors we like so here we go we've got some nice colors here let's get this indigo blue sorry indigo die and this gainsborough just gonna copy those over so if you click on the select color we can just copy that if i put a rectangle in here just drop that color on just so we got it there and do the same with our other color the gainsborough and just drop that there okay so that's almost hidden so i'm just going to put a white behind that so we can actually see it there we go so that's our color palette for this project so that's just a nice little tip there not not necessary for this project but um just something i like to do so we've got some nice colors to play with okay so first things we're gonna do is we're going to build out a rectangle which i'm going to make 8 pixels high and let's make it 256 in width if we zoom in a little bit let's get rid of those harsh corners half of eight is four and now we've got a nice rounded edge let's call this our background okay so we've got our background now let's build a handle so i'm just going to press o on the keyboard drag out a nice oval and let's make that 24 i like multiples of eight i like to use the eight eight point grid system so try and use everything that's multiple of eight okay so that's our handle let's call that handle so i'm just gonna speed through this quite quickly and what do we need next next we need a spacer and this is the secret sauce i was talking about so we're gonna make a rectangle we're gonna make it eight high and then we're gonna make it zero if you type in zero that's not a thing it goes to one if we type in zero point one still zero point one so figma has this little trick whereas if you put zero point and then a few zeros and a one we get a zero and what we can do is we can grab these two objects here in fact let's just rename our spacer there we go that's our spacer and now we're going to want to grab our handle and our spacer and apply an auto layout which we can see is shift a there we go so now we've got our auto layout we want to come over here and play with these settings here inside our auto layout so let's call this the adjuster layer just so we know what it is so we've got all or adjustment might be nicer adjustment layer there we go so this is our adjustment layer and we can set this to zero or whatever we want really and we'll see how this works in a minute so to make this work we want to come over to our alignment to make sure everything's center aligned to the left that's because we want this to grow out from the left to right so if we align it to the left it will start at the left go to the right exactly what we want okay so we can now apply this on top of our background layer but let's do some colors first so let's select our background layer and let's pick this nice gray that we chose here i think it was called gamesboro again we're going to need that white background to be able to see that so it probably wasn't the best choice for this there we go and then let's take our handle and choose that nice indigo i think it was indigo right so what do we need to do next to make this work because if we come to our adjustment layer and adjust here we can see okay well nothing's happening so how can we fix that we can do that quite easily by adding a fill onto the adjustment layer itself so on to the auto layer component which is a frame we need to add a fill and let's make that fill really horrible color just to show what's happening here so let's select that adjustment layer again and pull it out and we can now see it's actually doing a nice fill this is what we want but it's not doing it the way we want it to well it is but we just need to style it so how can we do that so we want to come to resizing here and we've got this hub contents here for the horizontal which is correct we want that but on the vertical we want a fixed height in fact let me set this back to the top so we can show what mistakes might happen so we've got our fixed height here and now this height before that was grayed out we couldn't do anything but now it's exposed this height here so let's change that to eight and now we can see when we grab the adjuster layer and pull that out okay cool that's pretty much doing what we want now set the back to u0 but because we went and fiddled and changed it to top left alignment it's it's put the um the fill layer too high so we want to move that back to the center and move that whoops grab that adjustment layer again and just nudge it down there we go so now when we do that it fills nicely but we've got this issue here where we've got these horrible harsh corners and our background has this nice round corner so we can quite easily fix that by just setting the radius to the same as the background there we go so last thing to do is select that blue and now we've got a nice color so there we go that's how you make a slider and i'm just going to select all of those group it together call that slider and create a component from that so now we've got a component of a slider and we can bring it in and we've got all these different things here and if we now go into that component itself here we go an adjustment layer we've got some interesting behavior going on here so what's going on there let's fix that so we can see aha so what have i done wrong here i believe this needs to be left locked yeah there we go so that's all it was that was all the issue there so we come back because we've done it on the the original component it should have fixed it here as well so we'll just double check that sanity there we go perfect so let's come and look at animating this now so we select our component here create a frame frame selection okay and then we in fact let's not do that let's just draw a frame by pressing f and we'll draw a frame around it because we want a frame to be bigger than the actual object itself so we get this frame one if we center this component inside that frame whoops there we go so that's our first component and we want to set that adjustment layer to zero and then we want to come in and create another one and we're going to get our adjustment layer and drag it all the way till it's 100 there we go so we now want to go into our prototyping tool which you can click up here or you can press shift e press shift e we've now got our prototyping and if we select that component here drag it onto this frame and what we're going to do is on drag we're going to do a smart animate over 240 milliseconds and we're going to do a nice ease in and he's out and we're gonna do the same thing going back the other way and drag 240 and there we go so now if we go have a look at this prototype you should get a nice animation so if we grab a handle there we go that's too fast for me let's just come back back in quickly and just slow that down let's make that 600 so really slow it down there we go back into our prototype and it should be nice and slow now there we go it's got a nice really nice ease in there now and that's how you create sliders so i really hope you enjoyed this tutorial let me know what you think in the comments below um if there's anything else you would like me to demo or create a tutorial for let me know in the comments below please make sure you like and subscribe as well that really helps the channel and gives me a reason to keep building more videos so yeah see you in the next video thanks for watching

Channel: Will Brett Design

Views: 1,701

Keywords: Figma interactive slider, figma, figma design, figma ui, figma auto layout, auto layout, autolayout, slider, volume control, ui, ui design, design, product design, ux, figma tutorial, figma tutorials, interactive component, interactive components, will brett, will brett-atkin, william brett-atkin, will brett design, tutorials, design course, figma training, Figma course

Id: YR41sLFicT4

Length: 11min 49sec (709 seconds)

Published: Mon Nov 01 2021