Creative Figma animations

Key Takeaways

if you're bored of simple animations and you want to up your prototyping game in figma then I'm really excited to show you these four awesome techniques that we're going to learn together there's so much you can do with these to get creative with your own projects and I've also created a source file for you so that you can design along with me if you want so without further Ado let's jump right into it all right if you downloaded the source file and are working along with me you're going to see these four pages to the left here line card swipe text slide and headline these are the four techniques that we're going to be learning in this tutorial so the first one is going to look something like this it's pretty cool so you can do this technique with really any type of line or you know something like that so we're just going to learn a pretty simple version and here is exactly how you do it so I'm just going to grab my pen tool up here and I'm just going to create the line that I want to animate first so I'm going to just put it slightly off the page a little bit I'm going to make it very squiggly okay that looks pretty good now of course you can always go in and clean things up so I'm just going to make this feel a little bit more soft and natural okay here we go so I'm going to make this a little bit thicker we'll do five pixels all right and now I'm just going to drag it off to the side here and I'm actually going to make it a component so option command K makes it a component I'm going to name it line and then I'm going to create a rectangle and I'm going to drop it inside of this component okay so now going to make this rectangle the color that I actually want my line to be so we're going to go over to fill and I'm actually going to make it like a gradient so let's see well actually I don't think we needed a gradient we'll just do this purple color here okay and then I'm going to make sure that this rectangle covers this whole sort of area here and I'm going to select both of these layers rectangle and the vector I'm going to do mask so you can see that made our line purple and that's really all we need for right now okay now I am going to make a new variant of this we're going to do plus button there so we'll go State start State end oops okay and now what we need to do is for the start State we need to bring this oop bring just the rectangle layer all the way to the top so I'm not pulling it outside of the frame you can see I'm making sure that it just goes outside of our line without going outside of this Frame so that it stays a part of the component then I'm going to do the exact same thing here I'm just going to command click so that I can click on that rectangle mask itself I can also use my arrows so I'm just going to Arrow until it is just at the bottom here okay perfect so now I'm going to go into prototype mode and I'm going to create a flow where we're going to go after DeLay So after delay it can be 0 seconds change state to end smart animate and we can do let's try 3,000 milliseconds we'll see how that looks smart animate and ease out should be good and then we're just going to do the same thing here ease out oh after delay 1 millisecond okay now I'm going to go back into design mode and I'm going to copy and paste this right onto here I'm going to make sure it's anchored at the top and we'll send it to the back with the left bracket and now let's preview this and see what it looks like there we go pretty cool the only thing is it's going in front of here so when I sent it to the back that did not exactly work there we go sending it all the way to the back let's make sure that worked now there we go that's pretty cool and you could play around with the smart animate you could do like ease in and out you could make it like bounce and things like that you could make it really slow or really fast but that is how you do the line animation next we're going to do a card swiping animation so for this example we're going to pretend that we designed an app where you answer a questionnaire and then this app recommends some books for you to read and you can read them right there on your phone so this is going to be that screen so what I have is this sort of skeleton for it um with a little heading and then your CTA and I also have these cards that represent books so it has a little image title author a description and then the sort of genre of the book so we what we want is for maybe this um app came up with four recommendations for our user and we want the user to be able to swipe through them so what I'm going to do is first start with this first one here I'm just going to position it in the middle of the screen to make things easier and we can see I created this as like a selected State I just gave it this purple border here so this is the one that like you're currently on so if you hit read this book it would be that book this not the end of the world but we want the user to know that there's some content behind there right so I'm going to put this in as well left bracket to send it to the back and then I'm going to just change the um rotation a little bit we'll move it sort of down here and I also think it would be nice if um the ones that weren't fully in Focus were a little bit of a lower opacity so I'm going to go over here and instead of uh instead of 100 we'll do 50 or even it's a little too light let's do 70 and then I'm going to do8 here okay so here's one frame now we're going to have to prototype along four different frames so what we're going to do is copy and paste these onto this next one and then we'll make our changes right so we're going to get rid of this border here I'm just going to hide it with that ey icon there now I'm going to make this one 70% opacity and I'm going to send it to the back and I'm going to turn it eight pixels and kind of move it down here like this and then we'll give this zero rotation bring it up to 100 Center it perfectly and then we'll turn on that stroke there okay so that's looking good but we also need another title behind it right so we're going to grab this one and we're going to do roughly the same thing we're going to send out to the back8 see how that looks now I don't like how these are overlapping so I'm going to have to scoot these like that and like that scoot this one too okay that's better and then we'll make this again 70 that looks good then going to select all of these and paste them on here and we're just going to do the same thing I'm going to do eight we'll position it kind of like exactly where this one was we can get rid of that one underneath it hide the Border 70% opacity bring this one front and center 100% opacity with the border and then we're going to need oops this guy8 send it to the back and negative oops 70% opacity okay now we just need to do this one more time copy and paste eight have that overlap get rid of the one underneath give it that sort of unselected State I could have made these a component and made my life easier but for the sake of this example I did not do that so you can definitely do that and just have different states for these that would be the smart thing to do so now we'll hop into prototype mode and we're going to put a drag transition on these so we'll start with the first one when you drag on here we want it to go to this Frame here so let's call this flow card swiping okay so we'll change this to on drag we'll do smart animate and ease out is probably good um but let's do 300 milliseconds we'll have to see what that looks like okay let's just preview that one to make sure that that timing is good okay yeah that should be good even like a tad bit faster might be good Okay cool so then we're just going to do the same thing so when we drag on this drag smart animate 200 milliseconds also if we drag the other way we want to go back to the other side so we need to do it both directions so if we drag backwards go that way if we drag forwards we'll go this way and this one we can only drag backwards okay let's see how this looks okay so I'm going to click and drag backwards and forwards there you go and there is the card swiping animation you could also use this to create like a dating app and have the profiles kind of swipe back and forth like that that could be another cool way to use this technique okay this is the text animation that I'm going to show you how to do in this example and like all of these you can really get creative with them and really do any type of text or shape you can do um different sort of colors and layers and spacing with it and it can come out completely differently but I'm going to show you this example and you can kind of run with it so what we're going to need to do first is take this layer and duplicate it and make all of the different colors that we want to use so I have the colors that I like over here so I'm just going to duplicate this change this color okay now that we have all of these I want to name them so that I know which is which so this is the order I want them in so I'm going to do text one text two 3 4 and five that way I know the order of them okay then we'll reorder them in the layers panel here and I'm going to stack them on top of each other so right now they're just perfectly on top of each other in order as we can see from the layers panel here and we're also going to um Center this perfectly on our frame here okay so before we go any further I'm going to duplicate this because we're going to need two different frames to animate back and forth for this animation so we'll call this one state two and we'll bring the slider almost all the way to the right side this is how you can basically control this animation okay so now I'm going to select on all of these except for the top layer cuz I just want to move them incrementally so I'm going to move this one down four pixels 1 2 3 4 and to the left four pixels 1 2 3 4 now I'm going to deselect text layer number two and do the same thing 1 2 3 4 1 2 3 4 same with number three 1 two three 4 1 two 3 4 one two three four and now just number five 1 two 3 4 1 two 3 four now I'm going to do something similar but with the rotation so I'm going to go up here to the rotation and we're going to do -2 now I'm going to do this incrementally so I'm going to do number one is not going to have any rotation number two is going to have -2 rotation number three is going to have -4 number four is going to have 6 I'm going 2 4 6 8 and8 okay perfect now I'm just going to move this just a little bit four pixels to the right and four pixels up okay now I'm going to do the same thing on this side but opposite so I'm just selecting all of these we'll do the rotation first so instead of -2 we're going to do two four oops 6 8 and now we're going to go up and to the right 1 2 3 4 1 2 3 4 deselect the top layer four and four 1 2 3 4 1 2 2 3 4 1 2 3 4 1 2 3 4 okay perfect so now we have these different um sort of orientations of these layers and now we can actually animate them so we're going to do since this is our slider we're going to put the drag trigger right on there and so we're going to say on drag smart animate to state number two and let's try it easy in and out and we'll see what that looks like we'll have to play around but then we're going to want to do the same thing over here on drag smart animate ease in and out oh let's make this like 800 milliseconds cuz I I think we want you to really be able to like see this animation happen okay there we go how cool is that so this one's kind of subtle you could make one that literally takes up the whole screen you could make the text actually grow as it you know rotates and things like that I think this is pretty cool though okay now for this last one this is what I want it to look like I want for this to be one of those um sort of landing pages where the headline changes words to really convey um sort of what the website is all about and what the service is all about so that is what we're going to do for this and I'm going to show you exactly how to do it so we have sort of our skeleton right here and I decided that I want to have the word design actually switch um from design to coding to copywriting to data analytics and I also want to make it really stand out so I put it in this sort of linear gradient and that's just going to make that stand out and just look really nice on this purple background what we have to do is separate these text boxes a little bit so here's what I mean we're going to have this on its own line so I'm just going to cut that and paste it back in and we also need to have for design and coding copywriting data analytics to be separated out so I am going to double click on this so that we have a perfect bounding box here I'm going to WR align it so that when I get rid of design the skills and fast don't actually move so that's good for that and now what I want to do is create a sort of frame that is only going to um show this first word okay so in order to do that I'm going to frame this whole thing so I'm going to do option command G to frame it so we can see what the line height of these are and go based off of that this is 104 pixels tall so I'm going to make this Frame 104 pixels tall and we'll just kind of make sure that's centered within it okay that should be good and I'm going to write align this as well because since it's on the very left of this line we're going to want for the right Edge to always line up perfectly with this skills word okay so that's good and then we can also oops make this you can scooch this over until it is perfectly aligned here and then decrease that size there perfect so now if I roll over this I can see that this Frame is the perfect height for one of these words and the perfect length for the longest word that we're going to have in here so so I'm going to call this switching words here and then you can see if we do clip content it's going to clip the rest of that content but I do want to see it for now so I'm going to make this a component option command K and we're going to make this variant a state and this one is going to be called design we're going to need to have let's clip these actually before I make another one clip content okay we'll call this one coding this one copy writing and this one data analytics and then I'm just going to double click in here so that I am selected on this text box and I am going to go up just enough so that it is perfectly lined up here with just the coating okay so now we're going to take just one of these instances and I am going to line it up here with this so in order for this to look most natural once this turns from design to let's say data analytics we want for this to Center so to do that what we're going to need to do is first we're going to need to make these only take up as much room as they truly need so I'm going to pin these to the top right so once all of the text inside of these is pinned to the right now I can actually decrease the size of this box here just just so that it fits each word perfectly okay it already fits data analytics perfectly okay cool so now when we bring in one of these layers here just make sure it is perfectly lined up with this okay and you can see we have a little bit of room for improvement here so we need to move design down a little bit okay perfect now these line up perfectly and I'm going to group these together in an auto layout so I'm just going to select both of them and do auto layout and we're going to want these two Center together here and we'll want it to hug the contents so that if we Center this perfectly on the screen then we can do turn this into data analytics and it is going to grow sort of from the center copywriting coding see how this really adapts and makes that whole line centered that's exactly what we want okay so let's change this back to design and now I'm going to set up a smart animate on these so that we don't have to have multiple frames of of this actual website w we can just set this up on the word level I guess so I'm going to go into prototype mode and I am going to add an arrow from design down to coding we're going to do on delay or after DeLay So after let's try 1,000 milliseconds we're going to change it from design to coding and it's going to Smart animate I think that can happen pretty quick maybe 200 milliseconds and just ease out that might be nice okay let's just preview that and see what that looks like before we do the rest yeah that looks good I think we might want to do a bit more of a delay though so I'm going to go in here and we'll do 1,500 milliseconds and now just going to do the same exact thing here 1,500 and 200 after delay 1500 oops and 200 and then from data analytics we'll go back up to design after delay 1,500 and 200 okay now let's take a look awesome I think that looks really good I think it might look a little bit more natural if we switch up this order though like I don't like how it just goes from small to big and then back to small so I'm just going to switch up this order a little bit so we'll go from design to copywriting copywriting from copywriting to coding from coding to data analytics and data analytics back to design okay let's see if that looks better there we go I think that looks better all right and that is the last animation like the other ones you can really put your own spin on this and use some different effects and all of that to use this technique for your own project if you want to go deeper with figma and learn how to create a fully responsive e-commerce website then make sure you check out my course Linked In the description box below other than that I hope you enjoyed creating these four animations with me and I'll see you in a future video bye