Day to night toggle animation | Figma to Lottie. No After Effects Needed!

hey you awesome people welcome to my channel this is satta and if you are here for the first time this is the place where I help designers build and scale their career with tips suggestions and tutorials and today I'm back with another motion design tutorial with two of my favorite tools I am too excited and I can't keep my car the first tool that I'm gonna use is Lottie files of course I'm going to teach you to animate something and then export it as Lottie something that I have done in the past also in this channel but the second tool that I'm gonna use today is figma Yes you heard me right figma so I'm going to teach you to design something in figma animate it in fig by itself using his prototyping abilities and then export as a Lottie using the Lottie pipes plugin this is a brand new feature that Lottie files has released in conjunction with figma and I am too excited so this is what I'm going to teach you today everything inside figma no After Effects at all so let's get started so we are going to make this toggle today it is a simple toggle which goes from day to night let me Zoom it in for you so if you click on it it becomes night you click once again it becomes day uh very simple very popular you would have seen it many times in many different places you would have also seen many tutorials where After Effects was used to build this of course you could also do it on figma but if you ever did it on figma you could only use it for your prototypes now you can not only make this entire thing on figma but also export it directly from figma as a Lottie using the Lottie files plugin and like I said I can't be more excited so today I'm going to teach you how to make this and Export the same using Lottie files plugin all right let's get started so yeah these are the two artboards very simple to do these are the Prototype links in case you want to see and this is the preview so we will get started right here on a new page okay so this is page one I'm going to create a new page so that uh uh I'll name it tutorial so that it's not confusing so first and foremost I'll go and make an artboard I'll hit a and draw an artboard and I will resize it too I'll give the height as 48 and the width has 80. now 48 or rather 80 by 48 is actually too big for a toggle if you use it especially on a mobile interface but for this tutorial I think it's okay if we use it right so here we have the frame I'm going to call it the day it doesn't matter I could rename it later now I'll use the rectangle and draw a full rectangle right inside it okay and since the rectangle also has a height of 48 I'm gonna give it a radius of at least 24 so that it appears Like a Pill I'm gonna give 24 or anything more than that it'll just be the same so I'll hit enter so this becomes the base of our toggle right now of course I can do trial and error but what I'll do is I'll just gather the colors you know which I've already done some trial and error and picked up these colors which I like for you know the runners and the bases respectively I'll copy these and I'll bring it to the second page tutorial so that I can directly use it here right so since this is the base of my day this needs to have this color blue so I'll press Ctrl and C to use the eyedropper tool I'll pick this color so here I have it in blue I will also give it a stroke I'll give it a stroke uh the color of the stroke in this case would be a color which is slightly darker than this blue so I'm going to use the eyedropper tool for the stroke and I'll pick the same color as the body and then I will slightly darken it okay I'll slightly darken it like this I'll just pull it uh inward like this okay yeah and I'm going to give it a thickness of 2 pixels so here it is well I feel the stroke is a little too greenish what I'll do is I'll maybe move it towards this yeah I mean yeah I'm just nitpicking right okay so this is my base I'm going to name it base okay so this is my page and next I'll create the runner the runner is nothing but the Sun or the moon as the case may be let's go ahead and create a sun first okay and we'll create the sun using the star tool if you uh click on the drop down beside the rectangle tool you will see there are many other tools and star is what we are going to use so I'm going to draw a star roughly uh this bit doesn't matter we'll resize it and now we'll make some changes so instead of five pointers we'll make it 16 pointers I'll go ahead and hit enter and this percentage that you see that is the percentage of the inner versus the outer radius I'm going to increase it to some 85 percent okay 85 this looks good a normal resize it a bit of course I'll make it slightly smaller I'll make it slightly smaller you know I'm just pressing and holding option and just hovering around the edges to see how much of spacing is left around there it shows around five I think five should be good enough I think five should be good enough right I'll just keep it this way okay so here is my sun the base of the sun is ready and of course I'll fill it up with this yellow so I will just go pick this color and keep it also I'll give some Corner radius to it across all these vertices that you see so I'm just going to give it two or something yeah I think two should be good enough and I'll also smoothen it so I'll click on this overflow menu which says Corner smoothing and I'll make it all the way up to 100 there's a very subtle difference you probably won't even notice but yeah I like to give it regardless okay uh you know now that I have added the corner radius and all I feel it could be slightly bigger slightly bigger so you know if you remember there was a gap of five across all this top left and bottom I'll make it slightly bigger so that it is 4 right now okay I think this sounds good this uh looks good right this looks good uh so this is my base of the Sun so I'm going to call it sun okay and now we also need a shade a shade is nothing but you know a small thing if you remember what I have drawn out here this shade so we need that shade as well so for this shade I'll be using two circles so I go to the shape tool again this time I'll pick an ellipse and I will draw a circle here keep it along the center of the same now this thing needs to be slightly uh smaller than the circle itself right okay y e does it feel imbalanced okay now it feels like it's exactly at the center I'll make it slightly bigger maybe around yeah this big is good enough I'm using 30 by 30 for the size of the circle I'm just using eye estimation honestly all that I'm ensuring is it's exactly centered with the sun okay now I'll make a copy of this same Circle and I'll subtract one from another okay so I will just press and hold option and when I do that you know that the icon you see the icon changes which indicates that oops which indicates that it's going to create a copy so I press and hold option and I click and drag to create a copy of that Circle okay now I will place it somewhere here somewhere here okay so I have two ellipses now and I'm going to subtract I'm going to select both of them go to this Boolean operations here and click subtract selection so there I have this now the good thing about figma is that even though I have subtracted I can still go and control you know the subtract is nothing but a drop down I can still go and control the the size or the position of this if I am not happy with the results that I got right so what I feel is this ellipse 2 uh which is the inner one which determines how much of how big a hole there would be I'm going to make it slightly bigger okay slightly bigger and I'm going to pull it slightly outward like this okay I think I like this shade uh so we have the shade I'm gonna call it I'm going to give it a name of course I call it shade okay and we'll fill it up with some color now the color would be nothing but a slightly darker and an oranger I mean more orange version of this yellow itself so first step is I will fill it with yellow and now I will tweak it I'll first make it a little orange okay that bit orange and a tad bit darker right you can play around with how orange you want and how dark you want until you get a color that you are happy with right you essentially need a slightly darker version which just adds some definition to our sun okay now what I'll do is I will um I'll keep the shade outside actually and I will create a group of the sun right now why I'm creating this group you will know in a while because there will be few other elements that I add inside it because the same sun will morph into a moon and all so I'm just going to select the sun even though it's just a single stray element I will still create a group command G it created a group one I'm going to call the name of the group as okay you will you will know in a while I have created a group even though there is when there is just one thing okay now I will animate this Runner okay simple now the simple thing that we need to do is we need to make a copy of this of course so this was day let me make a copy of this I will call it night night and also make the corresponding changes of night like what happens in the night uh first of all this color changes to this so I'm going to select this The Fill color and I will pick this up and this time for the stroke last time I picked a darker color right this time I'm going to pick a slightly lighter color than the fill that I've used out here so the first step for the stroke is to pick the fill color and then pick a color which is slightly lighter you see what I'm doing out here slightly lighter than the fill so here we have the night colors ready okay now for the moon we'll have to move it to the right okay now I'm not just going to do a simple move I will try to make it appear like it has rotated okay so it is like rolled if you just look at the preview once again the one that I have already made right if I zoom in you will see it feels like the sun has rolled and gone to the right and then become a moon right so to give that illusion we will also add some rotation value to it right and say mind it my shade is not inside my Runner because you know when things rotate uh the light source doesn't if the light source doesn't change the shade wouldn't change so the stage chain will simply go from left to red right whereas the runner which is the sun's base will rotate okay so the first step first we will move this to the right hand side like this we'll just ensure that you know it is still 4 4 on all the sides to ensure that you know it's exactly snapped there and now we will change the color of this of course to this Moon okay we'll pick this gray color and now this has this you know this Jagged uh saw Edge uh the things which make it a star right we don't want that full Moon the Moon needs to be a perfect circle very simple solution you just take this instead of 85 make it 100 it'll become a perfect circle or a near Perfect Circle you know it's not really a circle okay but you will soon realize that this is not going to work for us we'll have to do something extra to it you'll know in a while right and also when it becomes a circle uh you know it optically appears bigger so if you look at it so that's Optical balancing because it has empty spaces here even though the dimensions of these two are same this appears bigger now that those gaps do not exist so to balance that I will just pick this sun again this is now Moon which is becoming a moon I will reduce the size just a tad bit okay so here it sits and this shade I will manually move it to the left side like this okay I'll manually move it here actually I can make the shade much smaller uh sorry I can make the moon much smaller something like this is actually good enough okay um yeah actually it's that big and I'll also make the shade a little bigger okay I'll make the shade a little bigger I can actually go and control the ellipses which I have inside I'll make the outer ellipse exactly it's the same size of the Moon and the smaller one I will just uh you know make it keep it roughly the same size and for the shade of the Moon I will do exactly the same what I had did for the shade of the Sun I'll pick the color of the Moon make it slightly darker slightly darker so that's my Moon's shade okay now if I go to preview right okay I'll have to start a new preview because this is the preview of the old thing that I had made so this is the new preview uh but before that I will just create some connections out here simple ones I kept it a little down because otherwise the front and back lines will go inside okay you will get to know so I go to prototype and here you'll have to be careful that while creating a figma prototype you can create it with any element right so you can start the Prototype from here or this shape background shape base that we had added or for the entire artboard as well now in this regard please use it for the entire artboard and not an element inside now figma of course will work but Lottie doesn't support it so that's the reason take it as a piece of advice just when you are exporting when you want to export this as a Lottie make sure you create the Prototype on the entire artboard that is when you are you know creating this Junction select the entire artboard so this is selected and now I have any hover over it I see that small plus I'll click and drag it on the night the moment I do that this interaction details opens up on click navigate to night animation I don't want instant of course I want smart animate and uh smart anime is there and the easing style what I need is ease in and back out now what ease in and backup does is it gives it a spring sort of a animation which is really nice so I like it so I'm going to go ahead and use Eason and back out and duration I'll make it 500 milliseconds actually okay I'll go ahead and hit enter okay and now if you just quickly want to see preview of this so This flow One automatically got created because you know I I created this line so I'll click on this button out here it's going to open up a new uh um new preview window and this preview window I can just zoom in a bit when I click on it you see it has happened but it has not rotated because I have not given the rotation yet so it is working so we'll keep it open now we'll add some rotations to it okay so what I can do is I can either rotate this one or I can rotate this one okay it's all the same just that there has to be a difference in rotation between these two states so what I'll do is I'll keep the moon intact that is zero and mind it I have I have selected Runner as the element where I'm going to add the rotation so I'm going to select this Runner out here in the day artboard and I'm going to give this a rotation of 90 degrees okay you not see anything here because you know it has 16 sides and even when it is 90 degree rotated it will still be same and here it is zero here it is 90 so 90 degrees to zero degrees it is going to rotate now if I go ahead and do a preview I'll have to restart it yeah you see it appears like it has rotated yeah so the rotation has come awesome so it is working out okay now like I had said you know this approach to create the moon may not work out because there were some discrepancies that I faced okay so before proceeding any further what we'll do is we'll also open the Lottie files plugin right away and at the same time while we are working on it and adding more elements we'll keep seeing how the Lottie preview would be how do you do that it is very simple and uh you need to install the Lottie files plugin I'm assuming you already have it if you do not have it I've already showed that in one of my past videos I will leave it linked in the description so once you have the plugin ready you will have it inside your plugin bar so you click on plugin here are all the plugins that you have installed yeah I have a couple of them and Lottie files is what you're looking at so click on Lottie files and your Lottie files plugin is going to open there I have the Lottie files plugin loading here I'm logged in with my account of course and previously of course you had these things like discover workspaces and import now you have something new called export to Lottie okay so previously you know discover from discover you could just click on any one of them yeah see there is already a toggle somebody has made it so this you could apply them as GIF you could click on it and a gif would appear out here and then you could use it in your figma prototypes right but now we'll create a Lottie and which will be converted into lines of code directly from figma okay so export to Lottie is the tab that we need to go to now generating Lottie is as simple you could do it in multiple ways right you could either select both the artboards like this and click on export to Lottie that's one way of doing it the other way is if you don't want to select like this just go ahead and pick a flow because you remember when you create a prototype it automatically creates flows and it gives the names so flow one is the default name you could also click on Flow one and yep you see it it created the Lottie okay it's running very fast right now because it is just repeating so if I just pause it and I move this slider you will see it is working okay now I think now you know what I was talking about the reason I said that this is not going to work because you see what's happening it is getting Disturbed a bit and when Lottie generates it it is handling it in a little different way than what you had anticipated if you go and see the figma preview that's not really the case in figma it nicely happens but maybe it could be some challenge with Lottie so to fix this what we will do is we will use one more element inside so I'm going to close the Lottie files plugin just for a while so that's where the reason why we use this folder right group we call it Runner so I'm going to create one circle inside okay inside this I'm going to go ahead and create a circle just like this inside the Sun of course I'll have to put it inside Runner so this is the new thing that I had made I'll put it inside Runner okay and uh same story I'm gonna make it slightly bigger like this yeah maybe roughly the size of our shade and I'm gonna name it Moon okay so now we have one base for Sun and one base for Moon okay so here we have the moon and while the Moon is in the day we will make the color of the Moon as same yellow so that it's not visible okay so I will select the moon and I will give it the same yellow color okay now since if we have it here we'll also need to have it here right uh because that's how smart animate works the number of elements in both the artboards needs to be same only then the differences in position size or whatever you do it animates that's the whole function of smart anime that's exactly how even after effects works right so I'll go and copy this Moon and I will come to my knight layer the runner group of Knight layer and I'm going to paste this Moon out here okay and this Moon while it is in night mode I'm gonna make it bigger okay the same size as the moon I wanted and now while the Moon is in the night mode it needs to have the color of the Moon that I decided right so instead of yellow I'm going to give it the same that gray color that I had picked now what happened is not not nothing really changes right it is just that you know here if you just go ahead and preview it'll still be the same the circle is not even visible by what it will do is since you've added the circle the the error that we were seeing in Lottie that that error should be gone now so let me just go ahead and open the Lottie files plugin once again and we'll quickly do another check understand let me show you how to do with by selecting this artboard so let me select these two artboards it's one and Same by the way click export to lot you see it's much better it's much better still there's a bit of thing going on right it's because you know I have reduced I've changed the percentage so all these things were happening because I have changed the percentage of this from 85 to 100 so we'll keep the star untouched so this is our sun this was 85 right I'm going to keep it 85 only I'm not going to change so let it be it'll just get concealed by the new layer of moon that you have made so that you know that that weird morphing won't happen so let us do it once again and see right so plugin Lottie files I'll select both of them export to Lottie yup you see this is just like the way you want it right so the sun just reduces a bit in size and by then the moon the circle kind of overtakes it because it's over it and it appears like it's a nice smooth morph whereas even in this the sun is getting slightly smaller and the Moon is changing in color and it's appearing like Moon okay so we have the basic thing actually ready pretty simple so we'll just close it now we'll add some bells and whistles to it right so one thing that I want to add is of course uh the moon to the Moon uh the craters of the Moon I think one thing which makes a moon look like a moon are those craters or those small you know dark circles inside right so I'll put them everything inside the runner layer itself that's another reason why we created this group but let me just go ahead and create some circles you know slightly randomized Circles of different sizes so I'm just you know copying these things and uh [Music] I'm just adding them out here okay uh maybe this one can be slightly bigger yeah this is just just random okay some random craters so these are all my craters so I'm going to give this the same color as the shade okay so I'm going to select all of them and give it the same color as shade and I will also uh create a group of all of them command G and I'll call it creators okay and these entire creators will be inside the runner okay so now we have a runner layer which is rotating and everything is happening this has got the folder of craters this has got the moon this has got the Sun and our shade is outside because we don't want our shade to rotate okay and now when if the craters are here the craters also need to be present in the other layer so what I'll do is just for a moment I will remove the rotation here 90 degrees that we had given I'll make it zero and I will then paste the craters inside this inside this Runner I pasted the crater so you you can position the way you want right the element should be present how it looks or how it appears here it's totally your call now once I've added this crater I'm gonna go and you know add this 90 degree once again you see the crater also moved now if you want to see a quick preview this is how it is see the craters are moving with it right this is exactly you want it but you don't want the craters to be visible while on the day right now how do you do that of course you can just go ahead and reduce opacity of it yes you could do that or you could even set the color of this craters to Yellow okay now if you want to do opacity I would like to call out one thing out here is because uh you could you might feel that you would just simply take this crater's layer and you would set the opacity of this to zero okay now if you go to figma preview and try yeah perfectly working isn't it perfectly working but this will not work on Lottie because there's a bit of a bug out there I'll show you why and how it doesn't work right so you click on the Lorry files plugin once again I can actually keep it open all the time I don't know why am I closing it so I'll select both of them both the artboards I'll go to export to Dottie and click on export to Lottie you see what is happening the craters are not even being visible on the moon this is the bug that I was talking about okay now there's a solution to it there's a solution to it so what you need to do is right uh don't first of all two things that you should be mindful about do not make the entire layer as zero okay let the layer be hundred but make the fill set the fill what it does is it takes the fills of the individual elements inside and then it makes them to whatever value you give them right so when you do it to the folder it just reduces the opacity of the layer but when you do even if you even when you select the folder and reduce its fill it actually individually reduces or sets the value of the fill opacity right so that's what we need to do out here and even here there's a caviar the caveat is you cannot put 0 here even if you put 0 if you put 0 it is going to have the same problem that you had seen before it is not going to show up okay this is the Pug so the workaround is instead of zero give it a very small percentage maybe one percent okay give it one percent and now if you go and see the preview the I mean you know like since this time I didn't close the Lottie files thing and since it was already selected all that I'll have to do is just hit on this refresh and it'll update yeah you see it is working one person opacity and it is beautifully working okay now this is a bug but we know I work around and the lottery files engineering team is very proactive and they release updates pretty fast so by the time you're watching this video maybe the bug doesn't exist anymore you never know so uh this is how it works in general if you want to see a comprehensive list of all the things that are supported and not supported you can always click on the help center here right like it says some figma features may not be renders as expected visit our help center for more info so if you click on more info it's going to open up uh this a notion page actually and here uh what you need to check out is of course there are some documentation which you can go and read There are some examples as well which people have made but the important thing is ported features click on supported features it is going to open up a small table it shows what is supported and what is not a green tick means it's supported or read this you know unavailable symbol means it's not available and there's yellow exclamation means that uh some conditions applied may work on some cases if a certain conditions are fulfilled otherwise it will not work so just go ahead with this today in this tutorial whatever I'm going to use of course are supported otherwise you know we can't even use it right so it is working see yeah but now that I look at it you know somewhere here while the transition is happening this gray just stands out like an eyesore right it's just gray it doesn't feel like although it you know someone might see just for a fraction of a second so what I will do is to solve this while the craters are in day we have the craters right and they were they always had great color in them what I would do is it's set to one person you saw we had set the fill for the entire layer but the individual layers also God said that's how the fill works so instead of gray here I will give it yellow I'll make it yellow and of course I'll keep the opacity to one percent only for our obvious reasons and now you will see that weird State won't come right because along with opacity the color is also changing so it feels a little more natural is what I feel okay awesome so we have our sun shade and the craters ready now there are just two things that we need to do and we will quickly add them one is since we've added some flares to the Moon let us add something to the Sun as well let's make a cloud why not right so for we will make clouds using rounded rectangles so I'll draw one rectangle like this I will draw another rectangle you know something like this right and then we'll make everything rounded so that it just appears like some sort of a cartoon Cloud right so I'll take them and I will give it a large value of uh Corner radius yeah I think this sounds good enough and I will just pull this a little down so that you know it just forms like this I will select both of them I will do a union I'll just go to this Union selection and I'm gonna give it a color white because clouds are white right so here it remains this way of course I will give it a name I'll call it Cloud right and if the cloud is present in the day layer or the day art board it also should be present on the night so I'll copy this command C I'll select night paste it and I will push it here right and I don't want it to be visible I want it to be gone right and how do you make something disappear by setting the opacity opacity of not the layer butt of the fill but again not zero but one percent right so it is there one percent but not quite visible okay now if you go and see the preview right I mean see now we are previewing it in two different ways one is figma of course you know figma things will work the way we expect but Lottie may have some problems so let us go ahead and click refresh yeah you see it is working Cloud present Cloud not present creators not prison creators present I think it is beautifully working out now there is just one more thing which we want to add which is nothing but the Stars okay so if you remember in the other page I'd also use some Stars which are nothing but some dots and some Stars around here which just you know bring some Dimension to the night sky so let's go ahead and do it right so here um let's make a few Stars I will just keep it down like this um I will mostly use Circle I will use ellipse you know and I'll make I'll try to make circles of various sizes okay from as small as one pixel by one pixel and maybe the biggest one could be around you know three by three or so and uh yeah you know just randomize just keep them here and there however you like and I'll also introduce another shape you know I mean yeah of course you know however you want just keep it I'll introduce another shape which is nothing but a real star itself which is using the star tool here I'll select the star draw a star but not a five pointed star but a four pointed star okay that feels more natural uh like a twinkling star is what I feel so I'm gonna hit four here and I'm going to reduce this percentage right maybe to some 20 percent yeah I think 20 is good right and I'll do the same thing again I'll keep one of them as big and I'll copy it and I'll make another of them very small maybe I'll keep another small one here right see this I'm just randomizing you know right and now that I see I feed you know another small one can come here another small one can come here yeah you know it is just we are just randomizing things out here right and of course all these Stars these are all our Stars I will fill them with white okay I'll fill them with white and I'll also add variable opacity to it like some would be some would have 100 opacity the others would have slightly lesser and so on so I'm going to keep this too big as 100 opacity and the others I'll reduce right for example this one I'll set it to 30 maybe I hit three on my keyboard and it becomes 30 this also maybe 40 I'll hit four and this one uh let's try 20 so I will just select this and hit 2 on my keyboard and uh this one let's keep it 100 again maybe this one you know I'll make it 60 and it's six okay and this one again maybe 20 and this can remain 100 again and this can be uh what seventy percent yeah yeah I mean you know this is just a game of randomization add more stars if you want to okay right so now I'll select all the shapes uh which are like it's much easier to select it from here so this to this these are all my stars I will group them and I will call them Stars I rename them as stars and I'll also change the position right so the stars in the layer layer position essentially the Stars I just want them right above the base right above the base okay doesn't matter just a hygiene thing right above the page and if I have the Stars here I also should have the stars on the day sky right so I will just select the Stars command C I will come to the day layer right and I'll just collapse all this I'll come to the day layer and paste Stars once again so here are my stars I'll move them to the left side here uh of course we'll change the same position as well bring it right above the base we will now reduce the opacity of the Stars to one percent because that's how it works in addition to that we will also make some movements here so that it feels like you know there is some randomization when the star comes I'll demonstrate and show you by the way the Stars also look good on the day sky but I'm not gonna keep it this way right uh I will just select all the stars in the day and select the fill opacity to one percent they're almost visible now so if you want to see the preview on figma uh here it is here it is you see all the stars are coming together that's what I want to avoid for that will make some position changes right alternately let's also go and see how the law T preview would be right I'll just go ahead and hit refresh yeah see here no star no star star right so it is working out now let us just bring a bit of randomization in this okay bit of randomization okay so for that I will have to see the stars so here I make them 100 again right here I will just you know keep moving those things you know maybe I keep the star here and this one here uh maybe this one uh somewhere here and this one somewhere here I'm just randomizing you see right after all in this position everything will be um at one percent so you'll not even see but there will be a change in the way these things move because of this randomization that we are doing right you'll know in a while so I'll select the Stars layer once again and I will set the opacity to opacity of the fill to one percent so that they are invisible right let's have a figma preview right so yeah you see the randomization you see the randomization I'm talking about sums it feels like some sort of a some stars are coming before um there is but maybe you know we can make it a little more right we can make it a little more so here in this I come to the Stars once again I'll bring them slightly closer I'm bringing this slightly closer here and I've positioned them here now I should be able to see a little more of this yeah you see you see it is it's it's it appears like some like there's a difference in speed between the Stars when they're appearing so you know you can just play around with a relative motion or relative position of these things you know you can also make some changes here if you want to and that will create some sort of a randomization it'll feel like okay the stars are coming from up all over the place all different places right it'll just make it a little more natural okay there yeah I think this looks good you know you can keep tweaking I can keep tweaking the whole day right so that's how it is so we are actually done with the animation so one last time I will just hit on this refresh and you see here I have my stars appearing right sun with clouds No star moon with craters and stars so day night right so here it is right we have the animation ready next we will just export it as Lottie how do you do that very simple one click again right but uh you know you might be thinking we have just done the prototype for one section which is day to night only we have done what about night today we should do that as well right we will do it but you know when you are giving this Lottie asset to your developer you'll have to give it as two different assets of course in figma if you want to play around right now I'm clicking here it's not going because I haven't built that Branch yet I could very simply do it right I take the night and I just clicked on this plus and I give it back and it's going to pick up the exact same thing smart animate is in and back 500 milliseconds so now if I go to my figma thing and I click yeah it is working just like a toggle I would want it to right but then imagine if I if I do the same thing in Latin it is going to be one oscillating thing this is not how you want when you give it to your developer right so when you give it your developer the way it works is it first your developer will first show this Lottie somebody clicks on this this naughty place and this immediately changes to another Lottie and then that Lottie if someone Taps the Lottie place and then immediately changes back to the first Lottie and so on so essentially you'll have to give two lotties one for D to ninth another for night today that's that's an engineering thing you know and now I'm telling it to you normally your developer or your engineer will come and tell you and then you will split it up anyway so you could thank me later anyways so I'll just close it I will delete this branch okay I will call this flow as day to night day to night okay similarly I'll make a copy of these two art boards okay I'll go back to prototype mode okay uh I will delete this I not needed and this one I will call it night to day I'll hit enter and in this one of course you know this will not be the starting point since I copy the starting point is still with the day it shouldn't be this so to fix that what we will do is we'll select this we'll go to the Prototype mode and we'll see this flow starting there's a flow starting mode I will just remove it and I will swap the positions of this here the Knight comes first and then the day because I'm creating a night to day right and here I will create a prototype just like the way you do so night today is what I have done and automatically it created another flow smart animate ease in and back out back 500 milliseconds okay uh think we are all good I'm gonna call it night to day okay I'll hit enter let's quickly see a a prototype or preview out here so this is my day to night if you want to see the other one I I open this flows panel I go to night today I click on this so I have night today so I have two lotties ready right now now if you want to see let's open the plugin once again okay the plugin is loading let's see one thing at a time I go to export to Lottie let's select day to night yeah so it is day to night it is just repeating if you don't want it to repeat just click on this so yeah this is how it is so if you go and play it'll just play and come back to the first frame anyway that's how it shows so this is your day to night and if you want to see the night today just select night today from here and that's your night today okay now let's go ahead and quickly export it right let's do in order day to night okay now how do you export it is a Lottie Lottie is nothing but a file it's a Json file or a DOT Lottie file let's talk about maybe Json file right now dot Json it's a text file right it's you cannot understand it it's it's a file just give it your developer which has all the animation information in it so click on save to workspace now what is your workspace workspace is nothing but when you sign in with your Lottie files account which is a free account by the way you can create it using your Google account you get a workspace of course there's a paid version as well that but the free version has limited patients on how many lotties you can save to the workspace right but I think for your single work and all it doesn't matter so click on save to workspace when you save to workspace see it populated what I already have I have something called subtarshi prakash's workspace which has got private animations so I click on private animations and I click on Save and it is saving it to the cloud now where it is going don't worry about it you know it is there so it got saved you know what I can do is uh these things have this white background which is showing up here what I can do is just go to design and select all of them and remove this fill for all these artboards I don't need this fill background fill so when I remove that fill it kind of becomes that transparent one right so I'll just do it once again the day to night that I had done export to Lottie save to workspace right and I think it should override the one which I had saved before because the name is same which is day two night okay yes now it is saved you see the background is gone right now we'll do for the second one as well night today so I will just select the flow from here night to day and there I have it right you know it just pick the right value right now and now I'll save to workspace once again so the same workspace it populated again under private animations I'm going to go ahead and hit save there it is it is saved the Knight to day once again if you want to see where it goes just open app.lotyfiles.com and hit enter if you haven't logged in on your browser you'll have to log in once again of course to log into the plugin you'll have to log into the browser so I'm assuming you would already be logged in make sure you're logged in with the same account uh in case you have multiple accounts and this will start showing up all your projects right it's going to show up all your naughties you know you have a look at this so this is just showing you the preview right this is the day to night with the background okay it did overwrite so I'll just go ahead and delete this because this was the old one and these are the two ones right so it is saved under private animations this is day to night and this is night today now if I want to download them in my computer and maybe send that Json file to my developer over slack or email or something I'll just have to click on this more button and click download as so when you click on download as you have an option to download it in various is forms right Lottie Json is one of the default ones they also have an optimized Json which reduces the size of the file see this is 53.9 KB this is 42.8 KB so your developers would be happy if you do that and there's also another another format called dot Lottie which is made by the lotified steam itself and the files here are much smaller 6.9 KB but having said that maybe dot Json is a more uh Universal format so for the sake of this tutorial I'm just going to open the Lottie Json which is the normal one because the optimized one looks like it's a paid feature I may not have that feature here because I have a free account right now so I'll go ahead and click download and I can save this you know I can go to desktop or any other place and save that day to night save it just downloaded the date to night Json file similarly I can also download the night today in exact same fashion and I click download in desktop it just goes ahead and say gives night to day Json next it is simple just go ahead and share this files with your developers and start implementing them right away magic is in your hands I hope you enjoyed the tutorial I hope you had fun learning it as much fun as I had teaching it to you and since this is so simple everything within figma and can be exported with just one click I'm hoping to see all of you create more and more of these and whenever you create any animation make sure you post them on social media because you need to show off your work right and when you do don't forget to tag me don't forget to tag Lottie files and figma as well whichever platform you're posting it in dribble Instagram Twitter LinkedIn just posted and also don't forget to use the hashtag 30 days of figma Lottie yes there's a 30 day animation challenge going on so make sure you use the hashtag I hope you enjoyed this video and learn something new please subscribe to my channel I'll be back with lots and lots of content for you that's all for today this is sapta signing off [Music] thank you

Channel: Saptarshi Prakash

Views: 9,521

Keywords: lottiefiles tutorial, lottie after effects, saptarshi prakash, lottie course, lottiefiles course, product design, product design tutorial, lottie tutorial for beginners, how to make a lottie, lottie animation after effects, lottie animation figma, after effects tutorial, lottie animation website, day night toggle, toggle button animation, day to night transition, figma to lottie, figma to lottiefiles, adobe after effects crack download 2022, Config 2023, Figma 2023

Id: rKtBy63cHJ4

Length: 45min 0sec (2700 seconds)

Published: Tue Jun 20 2023