Create After Effects-Like Animations in Figma?!

[Music] have you ever thought to yourself it would be so great if i could really create awesome intricate animations solely within figma or adobe xd in this case we're going to be using figma without having to leave figma you know like for instance it kind of sucks having to recreate everything like in adobe after effects to create some really cool ui animations for your ideas so now in this video i'm going to show you a single plugin which is free called fig motion where you can do just that without having to leave figma now before we begin i just wanted to mention if you're interested in ui design but you're not very good well then you should definitely take my ui design bootcamp at scrimba.com at scroomba you don't just watch videos no no you're actually able to modify code in the browser while you learn my course on ui design features over 100 lessons that are specifically tailored to help you become an awesome ui designer and they're packed with interactive challenges so make sure you click the very top link here in the youtube description and that way you'll get access to my course along with many others for a very low monthly fee let's get started all righty so we have to open here now the first thing we're going to want to do is i right click on the canvas we're going to go to plugins and then go to browse plugins and this is of course assuming you don't have fig motion already installed uh we can click on this plugins over here type in fig motion and install click install obviously it's already installed here um and then you come back here i believe you have to refresh if you have a current document open and i'm just using the desktop frame right here and let's get ready to rock so i'm not going to sit here wasting your time designing like a ton of like just like like a massive ui we're going to have three elements we're going to have a headline sub headline and an image of some sort so um generate the trees honestly that just came to mind right now that type that i have no clue what's going on whatever all right underneath we'll have like a description not a sub headline maybe just like a description of text so because we want good visual hierarchy we're going to scale that thing down a lot and also change from bold to regular now i'm going to drag out just the text area kind of size right here and right click plugins and i have the lorem ipsum plugin you can install that as well using the same method that we used before and we'll choose generate all right so looking a little bit uh boring i guess but that's okay um again this isn't the purpose of the tutorial uh i'll go ahead and change the line height here just a little bit get that separated out and then i'm going to over here have a rectangle maybe we'll just like have it sit right about there move this up here it'll be kind of like in the center of this area and then we'll select this we're going to right click plugins and we're going to choose unsplash all right yet another one uh another problem that you can install now unsplash i use all the time so i recommend using it um trees let's just let's put in trees because for some strange reason um i chose trees i like that look how cool that looks that's nice looking all right so just you know a half baked half assed sore sort of ui that we have here but that's all we need just to demonstrate the purpose of the fig motion i plug in so what we want to do is first we'll select the frame right click go to plugins and then choose fig motion and we're going to choose open fig motion right here now as you can see uh it's showing if we have the layers panel open over here in the make main figma interface and over here we have the same sort of view of our layers now here's the problem if you go back here like maybe you move this out of the way and you add a layer or something like if we hit duplicate over here we can see the two duplicated layers in the main figma interface but over here we do not you will have to click up here and why is it hanging up there um well these buttons are cut in half right now i'm trying to figure out how to get them re-situated apparently it's not going to happen if i click update layers however you'll see they're both right there um we don't want that though we'll click update layers again okay so here's the thing uh here's how this works basically we have now if you've ever worked with a keyframe animation based software of which there's many freaking after effects adobe premiere final cut i believe uh so many um the way we handle animation is this timeline right here and as you can see you know zero seconds point one seconds and then we can also go pretty far out here as you can see like the 10 seconds i think the max is 20 seconds so it gives you quite a bit of leeway um and then over here we have the individual layers if you click on them we can see it's xyz width height opacity rotation fill okay i'm not going to read all those but those are basically the available properties that you have at your disposal to animate individually and simultaneously so here's the thing about animation design and motion design as it's called uh you you just because you're able to animate everything doesn't mean you should uh you want things to come in in a consistent manner and almost in an unnoticeable but very nice and pleasing manner um this while this isn't going to be like a motion design tutorial i thought i'd just throw that out there all right so let's say for instance we want to have this particular page kind of animate in from nothing so initially it's going to look like that and then these three elements are going to animate in somehow we could do that through a simple opacity fade although that's kind of lame um we could do it through an opacity and a movement maybe they'll all come down a little bit maybe they'll all reveal i in some way shape or form so let's just go with that idea we'll just kind of have them kind of slide in so what i'll do is take this we're going to start with this one first and this is um this rectangle one here all right so this is starting at the very zero but what i want to do is kind of move this to where based on how long i want this animation to occur i we're going to move it to that that that section so maybe we'll just do like one second so a thousand milliseconds we'll put it right there and then i'm going to if you it's kind of hard to see them initially bad contrast you guys need to increase that contrast of these little keyframe icons right here uh but no big deal uh you you're going to want to click one of these based on what it is that you want to adjust so let's adjust the position the y axis which is up and down we'll put a keyframe there and then also adjust the height all right so this is its end point we're going to go all the way back here to the beginning to the very beginning point and then now we're going to change these uh in some way shape or form so what i'll do is now notice there's already already a keyframe here if we select it we're able to put in the a value right here um right here we're just gonna put in uh for the height we're gonna put zero [Music] all right and oh that's for the y position i'm sorry so that puts it up there kind of in the middle of it which is technically zero um and then for the height we're going to put in zero as well oops i forgot for the height you you can't put zero it has to be one at least like that's the smallest value so you can see it right up there okay so now if we hit play isn't that kind of cool uh how it kind of just kind of fills out um so we'll watch this again now it's if you right click on these you could see if we pop up it has a linear easing applied to it and that just kind of affects it just means it's going to have like the same exact type of um animation curve all throughout it's linear it's a little bit boring so if you go to the very end keyframe and we click on it you can see it says linear that's where we change it so you can use something like custom um and you can go to like a website where you can um i get different types of easings to put in i'm just going to use um we'll just use ease in and out now if we hit ok let's do that for both of these ease in out hit okay and then we go back here and we hit play it it's just a more natural sort of uh animation that occurs so i think it looks pretty good and then now perhaps when this starts to move and maybe around like two 300 milliseconds let's do 300 i i did not mean to do that i don't know why it scrolled up that far let me go to like 300 here all right so when it's starting here maybe we'll we'll reveal this text as well um so there's a few ways to do it um in this contest a context simply because we have um a white background i'm gonna put two layers on top and they're both going to be white so by default the things behind them which are the text will be hidden oh did that not duplicate unreal duplicate that get that into place all right there we go so now they're both hidden we have to hit update layers and those will show up below and let me collapse that so rectangle two is right there and rectangle 3 is at the top so we want to animate 3 first because it's at the top and that will naturally happen first so at 300 milliseconds we'll animate i will animate let's see yeah i think we'll animate it up on the y-axis so i'm going to try something i haven't tried yet with this um and what i'm going to do is let's move over to like the end portion of this um let's just go let's go back to a hundred i about right there all right so what we'll do now is for three we're going to just put in a keyframe at the y position all right now we're going to go all the way back now notice that zero so we can drag this up to like around 300 all right and with this one we want to change the position now notice here it says insert node value i believe i haven't tested this but i believe what that means is if we move this up we can click this and it says 189 um well i think i just realized something i screwed up and reversed these so let me back up just a second all right so let's hit what's it um go back to zero let's hit play yeah i kind of screwed this up because um those are being hidden so if i take this one and i'm going to leave this in just because just let everybody know i'm human too all right so 189 i'm going to remember that we're going to change this one at the end to 189 so 189 now let's go back and hit play there we go all right and let's do the same thing with this one down here except you know what i don't want it hiding this or you know what we could do is we could do height as well and just kind of push it right there all right so rectangle two is right here and we're gonna put in a keyframe right around here for height this time and y as well and then we'll go all the way to the end around 1000 milliseconds where the other ones end and why is it doing that there we go and i'm going to put in y and height as well now for these ones we're going to i change the height here we're also going to push it right there all right so now what we can do is click this insert the node value and this insert the current node value as well and if any luck if we hit play there we go so now let's get this way out of the way and there we go this is a type of animation that you really want to be able to create here in figma when things are happening at different points in the timeline within the same artboard or the frame as it's called okay now let's say for instance you're happy with the animation you know what is it that you can do at this point in order boy this is really frustrating me that part of that ui was hidden let's go back to it um fig motion open it there we go now it should be fixed we have to select the frame though there we go now we can see all the buttons i'm not sure what that was about so now wait did it just oh i thought it like got rid of everything i was about to like get really upset about that so now what we can do is we can i we have a few options here render and export so if we click render basically it allows you to change the video format um from mp4 gif and webcam um let's let's hit render just show it just show just so i can show you um the result all right so i paused for a second uh it didn't take that much longer like 30 seconds maybe view last render if we click it now notice how much smoother this appears as opposed to when we were clicking the play button in the editor itself so it's actually really smooth and so i like that a lot now this is something where you can now take this i prototype based animation and you can put you can show you know a developer or the front-end developer who's responsible for making all this stuff actually work um and yeah that's a really handy tool so now we can also hit export we can export this as actually css or as json so if i save that and we open this up there we go so basically it takes the the selector names as as ids as as we can see here um from the names of the layers obviously you want to use something better naming conventions rather than rectangle um so we have rectangle one here's the uh initial transform and then the animations and then here's the each animation thereafter and one thing that's i you know annoying about it is it is in pixel and absolute you know units as opposed to like relative units but uh that would just be a matter of adjusting those yourself if you wish and this is something that as well that you can hand to the front of developer or they can take themselves um to help to help them set up all of the individual key frames all right everybody hopefully you learned something new just a quick video here just to teach you some awesome new plugin i'm not sure how new it is i'll be honest with you but at least it is for this channel that you can use to create awesome ui animations all right i'll see you all soon goodbye [Music] you

Channel: DesignCourse

Views: 12,815

Rating: 4.9401994 out of 5

Keywords: figma, figma animation, figma animations, figma tutorial, figma complex animations, ui animations, figmotion, figmotion tutorial, figma animation plugin, gary simon, designcourse

Id: h6LX3bb7SxU

Length: 16min 33sec (993 seconds)

Published: Thu Aug 19 2021