Animate Icons in Figma in 1 Click! + Export As Json | Design Weekly

hi guys welcome back to the channel i'm sure you've seen some amazing icon animations like these this one's one of my favorite of course from icons 8 or this one by cuberto and today i'm going to teach you guys how to create these kind of icon animations right in figma yes in just a few steps in figma you will have amazing animated icons i'll be teaching you guys two to three different methods you can pick from all these methods and see which one suits you best so without further ado let's just get started with the video so to get the whole process set up we will have to choose a certain icon pack this one i've gotten from the figma community and ideally you should pick any line icon pack any icon pack which is made out of strokes and not fill as you can see on the right there's a stroke and not a fill that's the criteria for quickly creating animated icons i'll have i'll have a link to this icon pack but you can choose whichever one you like once i have this icon make sure that this icon is not inside any frame so if you see a frame like this just delete it and remove the icon from the frame right here the next step in setting things up is right clicking while you have that selected and say flatter now you have a continuous stroke that will work for you like magic to animate the first actual method in creating these line icons is to install something called svg animation you will find svg motion in the figma community library and you can just download it for free like i have insanely incredible on what it can do so let's try it out on icons and i come back to my heart icon i will now either right click or just say command p or control p so under this i will search for svg motion so we have svg motion as our first right here i'll click on this and now we have a little window that pops up and as you can see it's already animated our heart like this inside this i wish i could zoom in but unfortunately it depends on the size of the icon now i can increase or decrease the speed as you can see the speed changes and if you guys have the pro plan which i suggest you should just grab because it's just 14 for a lifetime access you can quickly just change between a loader animation a loader shift animation loader shift delay animation so multiple different types and natures of animations now for any icon which might have multiple elements make sure it's it's been ungrouped so if it's a single group just click on the group and say command shift g or ctrl shift g now if you have three different elements i'm going to right click and say flatten now it becomes one singular line in its essence and then i'll play the plugin once again and as you can see it plays as a super cool icon like this so yes you can make it work with complex illustrations or complex icons just like this one right here now once you're happy with this animation how do you apply it in figma or send it to the developer at the bottom here i have something called export animation i'm going to click on it there are two main options svg animation svg animation is something that can easily be used on a website or inside a native application and it's very ideal and very lightweight for any website to load so i think it's a very good way of doing it and the other is video animation where you can even choose what background color you'd like choose white for this one and say render and render in a second and save the video file and then you can even convert it to a gif use it inside figma whatever you like so i think this is a really cool tool for those line animations if you have the premium you'll have more access to different kinds of animations for sure now what if you wanted to edit each and every element of these icons make it super complex choose different timings this third method will be idle for people who are looking for really custom animations so for this one i'm just gonna copy one of these icons again i'm gonna show you slightly separately so here i have this icon i'm not gonna edit it flatten it outline it nothing now what we need to do is go back to the community and search for something called something called motion and motion is what will help you get those complex animations inside figma in real time now to begin with i will go back to my artboard right here select my icon and search for motion and motion will literally pop up as an overlay in figma it will show you all the basics if you want to get started you can check the tutorials out from inside this tool otherwise i'll just place it right below this icon right here now in this i have multiple shapes there are two essential circles one on the outside one on the inside and a little rectangle at the bottom like this if you want to select each one individually you can select each one by double clicking and selecting each element right here so if i want this circle to animate first i'll choose the animation right here now for example i want this circle to create an arc like this so what i'm going to do is there's this arc option right here i'm going to click on this circle and then click on this little diamond at the beginning and then move this timeline a little forward so you can choose how many seconds you want from here right now we've only done 300 and okay so 400 milliseconds is the timeline okay and then we're going to create another arc now here it allows me to increase the arc from here or you can do it from the artboard so in this case i'm going to say a hundred and as you can see it creates this little arc in between it's like a blob effect which i really really like now for the circle on the outside we will click on on the circle of course so we will play around with the width and height now and we'll make this circle really small like this and maybe place it in the center like so now if we move this head on the top and create new nodes at the bottom we will bring the size back to its original uh you know glory so this will be 20 by 20 and we'll again place it in the center like this now make sure you also have nodes on x and y and once that is done as you can see it's playing like a charm now it's a weird animation i know you guys can do much better than this but if you want to create after effects like styles and animations with these icons and do it without using after effects i think this method will be ideal for you now these animations will now be saved here so you don't have to worry about oh if i close this uh if i close this little plugin what will happen it will save it right here don't worry about it and you can even name the animation something right here apart from that you can even save as a local copy or export as any one of these gifs mp4s webm svg sprite frames json so lottie as well so you have all the so this tool is complete it needs nothing else and you'll have something super amazing and you can create multiple pages right here in motion so you can have multiple icons being edited at the same time that's cool i hope you enjoyed that video guys some of these animations if you take some time can be fabulous and can be amazing if you like this video and you're gonna try something like this on your own make sure to give this video a thumbs up and subscribe for videos like this every single week i'll see you next time same place same time until next time take care god bless

Channel: Punit Chawla

Views: 104,600

Keywords: figma animations, figma design, figma ui, punit chawla, figma icons, figma icon animations, figma smart animate, smart animate tutorial, ui animation, ui design tutorial, figma tutorial, figma animation tutorial, auto animate tutorial, figma plugins, smart animate, animated icons, icon animations

Id: EEj3PYjwyC0

Length: 7min 20sec (440 seconds)

Published: Thu May 19 2022