Figma Timer Animation Prototype

hey everyone and welcome to today's video in today's video i'm going to be showing you how to create this timer in figma in a few simple and easy steps so today is going to be fun there'll be a lot of new stuff we're going to learn how to use components on a whole other level and uh to take our prototype into the next level at the result rest in time let's get into today's video [Music] all right so first things first we're going to create our new project so we're going to call our project timer all right so next we want to just create a design where we're going to have our our timer animation this is uh gonna be a simple design just follow me along so i want to make the most beautiful design possible i love this dark gray and then next we're gonna we're gonna make use of the mov plugin i love using it very much we're gonna draw some three ellipses actually let's just draw two then we're gonna make a duplicate of this hold alt then we're gonna right click and then just go to morph plug-in this is a plug-in that's very vital to do some skeuomorphism and pneumophism so i love doing pneumophilum and schematism so i'm going to apply that effect there as you can see we have uh an effect of pneumophism right there okay but before we do that we're just gonna give our i'll fill some colors so i'm gonna give this uh an orange color just like that then i'm gonna give this a color the same as the dark background right there so i'm gonna give this so right click and go back to your plugin so you're going to choose skeuomorphism and there we go but when i give this some more intensity just want to make sure it's set to this mountain shape okay and there we go so we apply all right so you realize it actually creates a duplicate every time we apply skew morphism so right click on the other go to schematism now next one i create uh an in-depth once something that actually goes in deep it actually has curves within as you can see yeah something like that all right so it creates duplicates so these are the two pneumothism effects so you can actually get rid of the old designs so we can place this right around there all right so this is going to act as our start button it's just going to place it right around there okay so this is so when i create a duplicate of this just hold alt and duplicate that i'm gonna place this right around there then we're gonna place this right to the right all right so it's perfect right so we have our icons so next we're gonna uh add some icons to them so we're gonna make use of a plug-in material design icons sorry about that my microphone just dropped but it's okay i hope you can still hear me it's gonna make use of our material design icons so still loading all right so it has loaded so i'm gonna get some three plugins so one is what chord play we're gonna get make use of that icon so we're gonna drop this right there and i'm also gonna uh make sure we have the replay here by doctor called replay so we're gonna make use of that icon it's also gonna make use of an icon called pause all right so this will do right so we can close the plugin and then we can enlarge this slightly just enlarge them a little bit more right that's that's okay all right so we have our play button here so as you can see they come within frames but we're only interested in the in the icons themselves so what happens is you can select the icon and just drag it out of the frame let's just drag each icon out of the frame so we actually don't need the frames get rid of that all right so i've gotten rid of the frame so i'm going to place the player right there this is going to be our replay icon and this is going to be our pausing all right so we're just going to make sure they actually fit in perfectly so i'm going to reduce the size of this slightly right then just make sure it's positioned right around the center let's just make sure to position them right around the center right there we go so we're gonna give this a white color right there we go right that's looking good then we can type in our timer digit so we're going to type in the timings zero zero zero zero zero zero all right so i'm gonna give this a font uh poppins and i'm going to give this a bold poppins bold and i want to increase my size to 120 all right this actually seems too big let's reduce it to 80. all right still that may look too much so just adjust the size until it actually looks perfect so 50 50 will do right so that's our timing then we're gonna for personal reasons i'm gonna give this an orange color i want my fill to have that orange color for the seconds all right so next we're gonna we're gonna create some and so on some animation on the timing so we're gonna make use of the text too so using the text tool we're gonna type in some some data so we're gonna first deal with seconds so we realize that when counting seconds account from zero to nine so just type in zero then enter key on your keyboard one two three four five six seven eight nine all right so we've we've been typing enter so what we want to do is want to center this okay so we actually have them centered now we we're going to animate this let's actually give them an orange color actually let's first leave them at black black is fine all right so we we are gonna animate this so what happens is we're gonna select a rectangle shape this is what we're going to do we're gonna do some masking so i'm going to make use of the rectangle shape as you can see we have placed a rectangle there let's give it a stroke then let's first uh let's first close the view so as you can see we have our zero it's just right around the rectangle so you can zoom in now what i want you to do all right so what you want to do is one make sure this rectangle actually has the zero fitting in perfectly so just drag those edges until the zero fits actually right into the middle okay so we wanna make sure the masking is perfect so we're gonna open just make sure we can have the fill again okay so on to make sure the rectangle is actually right below the numbers while we do the masking so we're gonna select both then we're gonna use as mask so as you can see we only have the zero appearing but we actually have all the other digits appearing right below but actually they've just been hidden by the mask okay so next we're gonna right click and then we're gonna create a component out of this mask group and then inside this mask group we're gonna create a variant different variants actually so the next variant is we wanna make sure actually it goes to the one value all right so select this then we're gonna just hold your hold your drag up until you see your one appearing actually it will show with those red lines to show you that actually it has just popped perfectly okay so i'm going to do that for each and every single number so every time you do that you go you go to your variant to your next one then i'm going to duplicate this i do that by clicking ctrl d and then i have variant three so let's go to variant three select the text and then we're gonna drag upwards so drag until you have the next value appearing just right there all right so i'm not going to waste your time so i'm going to do this all the different variants i'm going to speed it up a little bit so just watch [Music] all right so we've actually just created each and every single variant to have variant one of the variant in so next we're gonna do some prototyping so uh starting from variant the first variant zero so gonna prototype and then just just drag that then then we're gonna say um on after delay so we just wanna make sure there is actually a delay of one second each and every session single time so this actually equates to 1000 milliseconds okay after delay of that we want that to change to variant two then we want that to happen instantly okay all right so i'm gonna do the same thing for the second for the next one so i want to make sure it actually it's something after delay it actually after delay of 1000 milliseconds it actually changes to variant three and it just also happens instantly so i'm gonna do that for each and every single number so i'm gonna fast forward this but just follow along [Music] all right so lastly when we reach the final variant here we want the nine to go back to the zero so we're going to drag this back to this zero okay and you also want that to happen so it's to go back to the default so also on that to happen after delay of 1000 all right so we're gonna test this when i test our i'm gonna test this all right so what how do we test so we're gonna duplicate the zero all right so i'm gonna duplicate the zero then i'm gonna place it right there where we actually have the second so go back to your design so i'm gonna place the zero right around there all right so next we we actually just want to delete that zero that was there behind it so i'm gonna give this zero of ours we're gonna give it an orange color the same orange colors we have there right so next we're gonna try to animate this so we're gonna click on play and test it just give it a second to load everything went wrong okay all right so as you can see it's actually working so our second is sticking it's actually ticking and moving then it goes back to zero eventually so our second is ticking so next we can go and work on the next ticket all right so back back to our animation here so we've actually dealt with a second so now what what want to happen is after 10 seconds you want actually that to be another change so we're going to right click this so just going to duplicate this duplicate this mask i do that by clicking ctrl d next we want to make sure we can actually work on the 10 second digits so what happens is we in the second mask we're gonna call the first group seconds all right so this next group is going to be the 10 second group so every 10 seconds this digit will actually change so what we're going to get rid of some of the digits we actually don't need the we don't need the 9 we don't need that we actually only need the digits up to five all right so that's actually enough so we're going to maintain that so we're gonna do some prototyping also but we're going to change the delay this time so instead of a delay of 1000 so this will actually change to this every after every after 10 seconds so that's actually equates to 10 000 10 000 milliseconds okay so when i do that for each and every single value so just change the delay to ten thousand so i'm gonna do that quickly just follow along with the video all right so when we get to the five second we're gonna add a different interaction so after the delay we want that to go back change to the default we want that to go back to the zero so that also happens after 10 seconds right and that was happens instantly now we're going to make a duplicate of this so i'm going to place this right around there so just duplicate the zero from that group and i'm going to place it right up there okay so we're gonna delete the old text the old zero okay so i'm going to give this some orange color i'm gonna give it the same orange color right so next we can test you can see we have this uh 10 second digit also changing and animating every after 10 seconds first so just observe and watch the change to 20 all right and actually it's working that's it so lastly i'm just gonna animate this a little bit so i'm gonna create a duplicate of our frame right here all right so we're going to have one we're going to have one that has the the values of the of the components that we have but then we're going to get rid of the components from one of them so in the very first one here we're going gonna get rid of the components so just gonna have them typed out okay it's just gonna have that typed out okay so this is actually just text so what you want to do so what you want to do is want the animation to start when the user clicks on play and then we want the animation to restart when the user clicks on this replay button okay so we're going to click so we're going to animate this so we're going to animate our play button so just highlight it then we're going to say add interaction so on click we're going to navigate to frame two then we want that to happen as a smart animation okay so when you actually want that to be a smart animation it just might animate and then it will start counting because this is actually the row component values then we also want to edit the the replay then in the second frame we're going to edit the replay button so also one other interaction we're going to say on click navigate to frame one then also going to make that have to be a smart animation okay so click on play all right so we're gonna run our prototype again and as you can see it no longer starts by default it actually waits for you to do an action so when i click on this play button you can actually see it changes to hand when i click on the play you realize the animation actually starts then when i click on the replay it goes back to the very very beginning okay so when i click on play it starts when i click on the replay it actually goes back to the very beginning and that's how this create a timer in figma and a few simple and these steps i hope you learned something if you if you feel learned something just feel free to tell me below in the comments and then if you're new to this channel i encourage you to subscribe and join the community because you'll be getting to learn more of such things otherwise thank you so much for watching uh i encourage you to subscribe and join in the community and please when you subscribe don't forget with that notification bell so that you get updates every time i upload a new video otherwise thank you so much for watching i'll see you all in my next video have a nice day [Music] you

Channel: Create Beautiful Things

Views: 158

Keywords: Figma timer animation prototype, figma timer animation, figma timer plugin, figma counter animation, figma countdown timer, figma counter, figma delay animation, figma delay interaction, figma delay, figma clock, figma component variants, figma components, figma variants, figma variants prototype, figma variants tutorial, timer prototype, count down timer tutorial, figma number animation, figma number counter

Id: JNtowj9Ki_A

Length: 18min 3sec (1083 seconds)

Published: Sun Nov 28 2021