How to Add a Realistic Slider Animation in Figma || Crema

[Music] hi guys it's Sean with crema and I wanted to make a short video today to show you some of the cool features I've been experimenting with in figma figma is new to me it's new to our team in general but I've been really impressed with the transitions and animations that you can do in the prototyping so what I want to do today is show you something I've been experimenting with which is a slider so we're gonna make a realistic slider in figma I've been so impressed with just a prototyping that you can do that goes far beyond anything you can do inside sketch plus envision so I have to find myself thinking man I wonder if you can do this transition in figma I was like continuously pleasantly surprised that a lot of the stuff I threw at it could be done now at this point I shouldn't be surprised because it is so powerful that a lot of the stuff I think of is pretty easy to do inside the prototyping and it's oftentimes exactly like you think it should happen so what I have here is a little demo that I can show of sort of a stylized slider you'll see I have four frames here what we can do today like what you can take away is really doable in I think two frames and just a few components so I'll show you how that works but right now I have a slider sitting at 0 I have that slider maxed out to the far right the the track is filled in with this green here this one is somewhat frame to this but I have a button that appears that you can interact with and then you have a success state here and you'll see - like if I go into this prototyping tab over here things that I hover over or click on you can see that those are all the same elements across these frames and so that's how any of these transitions and animations between these screens can happen so this all happens with smart animate so really you just have to lay some things out on the screen make sure your veins are named consistently and the tool does a lot of the work for you so I'll show you what this this demo looks like so I've designed it to work and look good on mobile so you can start by grabbing this slider here and as you pull you'll see the numbers tick up and actually I'll show you how that works as well that's another frame that's moving vertically while this slider is moving horizontally so that's that and as soon as it locks into place there there's a delayed response to the button it appears you click on that and it kind of has this animated success screen so that's what I've done to kind of illustrate how that works but again what you can do and making a realistic slider can really happen in just a couple frames so all right now I just hit F shortcut for frame and frames in thigma as I learned during incredibly flexible they're like groups but you can add constraints to them but they're also a lot like artboards so I'm just gonna zoom in here so I've made a frame and I'm gonna make this really big and ugly and super contrast so you just so you can see what's actually happening here but basically I'm gonna draw a rectangle again this is like way chunkier than you'd ever want something like this and so I'll go ahead and place it in the center of the screen here it's into the frame so that's our track that's the default state of the track you can select it and hit command D I'm on Mac so another cool thing about figma is that it's system agnostic so the commands the shortcuts would be something similar but different keys on Windows but basically I've just duplicated that shape of that track I'm going to color it that green that I was using but then I'm going to shorten it down to a single pixel so you can grab this and shrink it down but it will be left aligned so if you just go over here and have one it'll shrink down to that size so the reason I'm doing this is because you'll see that it transitions from this this really like almost empty state here to that whole green bar so I'll show you how that works and then for our slider I'm hitting O for our circle here and we'll make that big and fat - and I'll color that the same green as we had you can even do like a drop shadow or something to show it's interactive so I'm just gonna line that up with this put that track there and bring it to the far right and line it up there as well so this is the first frame and you'll see that this is really everything you need to make a realistic slider so I'm just gonna select that frame you have all the elements here that you need so that filled in bar that's one pixel now why it will be on top of the track and obviously the little handle will be on top of all of that so I'm going to hold command or option shift and drag that frame out because we want everything to be the same as long as it's named the same so he lips - lips - but angle seven rectangle seven and actually for posterity we could do something like this so that these are explicitly different rectangle seven was repeated so I don't know how that would animate so that's our fill shape so if I'd done this previously you wouldn't have to rename things twice but as it is and we'll do this real quickly cool framing names don't really matter at this point as long as the components or the shapes are named something unique and consistent so basically we're just gonna replace this and drag it to the far side now I'll look how wide this is so it's 465 pixels wide that's the track we're gonna go to our fill and add that same width so now it's fully filled in like that mmm so here's cool thing the only thing we did that we need to do is have two frames six well really just three kind of elements and then the tool Sigma will do the rest of the work we just have it we're gonna have it I wouldn't necessarily want it wrapped in a frame so we'll just say none for a prototyping frame so all I'm gonna do is select this handle element and we're going to drag it over to here and you've seen I've you see I've connected or clicked onto the prototyping tab here that allows you to start this this transition animation type of workflow so we're gonna do on drag and another cool thing is you don't have to say on drag to the right rag up or down or left it's going to interpret that for us so on drag we're going to transition from this frame to this frame and as long as smart animate is selected that's all you're going to have to do to make this realistic slider go from left to right now if we want it going back the other way we're just gonna repeat this process click on the handle here drag it and say go to this frame on drag we want to navigate to frame 1 using smart animate so because I already have a prototype clicked up here I'm gonna drag this little play arrow over to our new frame that way when I hit the play button this prototyping tab will change so we're here now and so I'll click on this and you'll see that as we drag it that bar is filling in and it gets locked over to the right side here and because I've clipped it up to go the other way it does the very same thing so the fill goes away just leaves the great track for you there so that's really all it takes to make a realistic slider and these do feel really awesome on mobile so if you make it for a mobile screen or a mobile size device and you're previewing it on your phone it feels really awesome and it's super fluid I didn't obviously something a bit more with those numbers ticking up which I can show you as well to make this slider kind of correspond with actually something else on the screen so that's all it takes to make a realistic slider so what's happening is that again figma is taking all the elements and doing the work for you but the reason we had a one pixel fiddle down here and not something transparent is because if it was transparent like a 0% opacity to 100% you'd see that fade in but I've kept it 100% opaque and one pixel so that line grows you would see it behind this handle shape there that that line is actually growing to fill that shape so I think that was really cool when I first thought of like hey I wonder if figma can do this it happened exactly like this with just three shapes and a couple click ups in the prototype and it worked really well so I was really happy about that to do what I did with those those numbers I can show you that all that is is another frame that I've got some numbers in and I'm moving that frame from the top of the frame and I'm sliding it all the way to the top so I'll go and show you how that looks so we can go ahead and might start typing I'm gonna do something similar where I'm just going like 100 to 500 maybe so we can blow this up again so it's like a really obvious what we're doing and I'm gonna go ahead and center that center that way so I can just hold click on the hold option and drag that off and it's gonna let me take that shape and go down now we're not super concerned about where its lane right now I'll make sure those are evenly spaced and then from there we can do command D and that replicate what I've just done there now you can see that it's going off the frame here it's because I've had this flip there we're actually going to use something like this where we're gonna clip the content but basically we want to select all the numbers that we've got there and hit command option G so that's going to group it but it will group it into a frame which is what we need here because we need to crop that what's happening inside there and we'll make it scroll a group is not as flexible we'll go ahead and renumber this real quickly [Music] so all those are numbered now we can go ahead and click on the the whole frame layer over here and basically I can drag this up so you're still seeing the content but what's happening is I'm effectively masking this so now that I have this frame selected over here you'll see I have that same option of clip content as I did when I clicked on this larger frame because I'm going to click the content at this smaller scale I don't necessarily have to have the frame the main frame as clicking so I can just leave that one unchecked but this one I do want moving and what that allows me to do is effectively select everything inside there and move it around into that mask stays so you're not masking it you're using the frame to effectively mask it but you're not using the tool mass so that's gonna that's gonna let us achieve that sort of that vertical shifting as we go from one slider to the other so I'm just gonna take this layer over here and copy it and paste it into place here because we want again everything to be in the same place and be called the same so we have that consistent there the only difference is I'm going to select all these members so I'm not selecting the frame itself but I'm selecting all the content within it and there's gonna shift it up until we hit the 500 and I'm not being super precise here and just sort of buying things and again this is going to do all the work for us so we said from this screen to this screen it's going to scroll all the way from 100 to 500 and we don't have to click anything up here it's going to interpret that for us the only thing we still have clicked up is the slider so let's give it a go I'm gonna hit play again and it's going to refresh that screen and as we go it's just going to climb up and as we pull it back it should climb down yeah so that's how different elements can look like they're interacting together they're not really obviously connected to one another it's just the screen interpreting these separate actions but that's a way that you kind of add some realism to your slider showing something else happening on the screen as your as you're doing that so it's not just a slider for no reason but yeah this transition feels really smooth it feels really good on mobile and Jigme can do it easily a super easy transition that figma handles with no problem exactly like you think it would be handled so it's really it's really just such a pleasure to go into this tool and and have it work so well and bring your ideas to life and make them feel realistic this is something you certainly can't do within sketch plus envision right now maybe likely they're working towards something like that but the the fact that handled a figment can handle it so well it's just so fun to use the tool not just for design but there's like really special interactions with the tool so yeah if this is helpful to you let me know in the comments I couldn't find anything exactly like this online so hopefully it's useful and I'm still learning the tools so go go ahead and share any of your favorite transitions or secrets or animations because that is where I get a lot of joy when using this tool thanks for watching guys bye

Channel: Crema

Views: 51,696

Rating: 4.9425378 out of 5

Keywords: crema, cremalab, product agency, product team, how to create a product team, app design, app development, Figma animation tutorial, figma tutorial, slider tutorial, animated slider tutorial, slider tutorial figma, easy figma tutorial, realistic slider tutorial, slider animation figma, slider animation tutorial, how to make a realistic slider animation, how to make a slider animation, how to make a slider animation figma

Id: wR2KNGw0fvs

Length: 13min 4sec (784 seconds)

Published: Thu Jun 11 2020