Creating Text Animations in Figma: Tutorial & Tips

in this video I'll show you how to make this text animation in figma natively using smart anime I'll also show you a tip that I've been using that has changed my workflow in figma that's helped me be able to create more advanced animations before we jump into figma let's just have a quick chat about animations and why it's so helpful that you can pull off animations like this in figma natively so animations in web design can really help take designs just that little bit of a notch up so of course you need to have great UI and ux but animation can just be that cherry on top previously as a webro UI designer it was a bit tricky trying to make animations go from design to development because one of the things that you would run into is that when you have to do designs in Adobe or photoshop you'd have to then open up after effects or Premiere Pro and understand that software as well and it would kind of mess up the workflow because you design something in Adobe or photoshop and then you have to move into a different program and do the animation in there or if you stayed in Adobe or photoshop you could storyboard it and try to explain it that way to try to get your animation across sometimes though the small details it would get missed or trying to explain to a client when you're presenting the work when it's still designed and it's static just saying yeah trust me when this goes into development and you see these animations it's going to look even cooler and you're just having to explain it with words you can't actually visually show something and this could be the thing that really just makes or breaks or pushes the design over the edge compared to if it needs to go back for another round of revision now with great tools like figma you can achieve all these animations using smart animate and prototype it doesn't break up the workflow you can say all in figma and it really speeds up the process I before used to only use smart anime for interaction design so hovers and click animations and interactions like that but recently I've been experimenting more complex animations and I've been surprised actually how much you can achieve with smart animate in figma this is great as well because it counters those two points I just said when you're presenting to a client you can actually show them the Prototype and show them all the animations and how it's intended to do which can save you time and also just wail the client and also if you're passing it over to a developer who's maybe a third party or something like that you can make sure that it's all packaged up and you can visually show them and walk them through the animation so when they're developing it they have something to base it off this will save you a lot of time as well having to do back and forth with a developer doing quality checks it just helps streamline the process for everyone in figma this is what the final animation is going to look like with the text loading like this and it takes loading one after the other with the delay and then also down below with this text effect as well as we go into it this is the final frame but we'll start at the beginning so coming across here this is how it starts so we have our layout here but the animation isn't applied yet and we haven't set it up so the first thing we want to do with these words is break them up so we want to actually be able to load them individually so we need to break them up from one long paragraph that you would normally use to individual words so I've broken them up now into individual words so simplifying financial and management they're all in individual text boxes so we'll drag this first one across I'm just going to leave one there and turn them down the opacity a little bit more just a guide when I bring back in the animated one I'll know where to put it so this is one of the big things I found about smart animate and animations in figma is that previously I used to rely on things going across frames and I would animate between going from one frame to the other one the big difference now that I use is that I actually do a lot of the animation within component minutes so this way I find that you can finesse it a lot more and previously when I used to do it across frames it would become really frustrating if I wanted to change things because I'd have to change it across multiple frames but if you have it as a centralized component you can make the animation updates to the component and then it's a lot faster workflow created this as a component we're going to add a variant we'll name this first one preload change property name to state and then we'll create another variant and we'll call the second one loaded just position them next to each other so it's easier to see so to achieve this sort of Animation one of the big shortcuts is using the feature click content so what clip content does is you see this purple bounding box around here clip content is off double click into select the text so right now one click I've selected the text box double click in and now it's underlined I'm selecting the text box if I drag this and it goes outside the box nothing happens you can still see it if I go back to the text box and I select the feature clip content you actually can't see it anymore so makes clip content it more or less turns this into a window so you can see through the window and then when you drive drag it outside the window it's kind of behind a wall and you can't see it anymore so we'll drag it back up so to achieve this animation is you want to apply a rotation to it because I want the first letter to appear first I want to make sure that I do a minus rotation of 15 degrees you can play around with this it's not a science of it has to be exactly minus 15 degrees I just found that as a good number for this another one I've used to achieve this animation is I've broken up all the characters so it looks like they load one after another which is another way to do it this way is just much faster so now that you've applied the -15 rotation you'll want to drag it below another thing to know is that it helps if you hold down spacebar when you're dragging something out of a bounding box because sometimes it will D group if you don't hold space so hold space we'll drag it all the way below so you can't see it anymore and now we'll select the bounding Box come into prototype drag a noodle from preload to loaded and you can set up the settings here so we'll actually change this to after delay and we want it to load after 10 milliseconds to loaded and then you can set this to whatever I've been playing around a bit with custom at the moment and experimenting with it you don't have to use custom you can use any of these ease out ease in or linear or whatever kind of Animation you want so now that we've done that let's just drag this back into the frame just so you can see what it looks like a good tip here is to turn it back to the loader so you can actually see it line it up with the template that you left there before turn it to preload hide this layer for a second and now if we preview this Frame you can say how it loads actually a mistake though because I didn't select clip content on the second variant so go back to this one had selected clip content but I hadn't selected the clip content on there so make sure you select clip content on bow preview it there you go so now repeat the process with the other ones foreign just duplicate this first variant and then put Financial into the second one and duplicate it again upon management but the reason that I'm not doing that because I want them to load at a different speed because I want it to be set up not on click but to be set up automatically after DeLay So the first one was 10 milliseconds so now you're playing around with if you've ever done animation with after effects or if you use Premiere Pro and stuff you can understand the sequencing of it so now I'm starting to think about the sequencing of if I want the first one to load at 10 milliseconds when do I want the next one to load probably halfway through the first word coming up I want the second one to probably appear so now I've just repeated the same process so now the next thing as well is with this sort of thing you follow a similar process again if you want to drag some text across make this a component at a variant same price as before the only difference here is I want to make the after the delay a bit longer because this is kind of in the second section it's not in the hero section and also with this one I want it to be the same animation I don't want it to be delayed after each line I want all the lines to come out at the same time so I've just applied Auto layout to the box and then I'll paste the first one in changes to loaded so I can see it and then if I just paste the same amount of components in here as there is lines because they're all going to be the same to speed up I can just copy the word and then paste it into each of these components instead of having to create different components for all of them the last thing as well to achieve this scroll effect that I'm doing I find this not too hard to do now with just the same process before of making it components so I know this is going to be the first frame and then I'll add variant this will be state and this can be first and another screen so then it will be second apply Auto layout on the Block make sure this has clip content on it and then I wanted to drag the frame up to where I want it to be and now the difference here I want this second one I wanted to make sure it looks like it scrolled down so over here in the layers panel I want to select everything within the frame and drag it up hold space to where I want the second spot to be then I'll click the first one and drag a prototype Noodle from the first one to the second one and do one click so when I click it will change from here to here and it'll look like it's scrolling down if we click present we can see our finalize animation and we achieve this all natively with just smart anime in figma figma's always updating and releasing new features so you used to not be able to pull off this kind of Animation but you can now with smart animate recently at config they just announced a heap of new killer features watch this video as I explain one of the big changes to Auto layout as it changes fundamentally how you use Auto layout now

Channel: Jonathan Waterworth

Views: 7,046

Keywords: ui, product design, ui design, figma, figma tutorial, figma animation tutorial for beginners, figma smart animate scroll, figma smart animate tutoriall, text animation figma, figma text animation, smart animate figma, smart, figma tips, figma tutorial for beginners, design, ui designer, product designer, figma 2023, figma web design

Id: OnkSVgP-Ghg

Length: 9min 23sec (563 seconds)

Published: Fri Jul 14 2023