📄Figma Community File: www.figma.com/community/file/1005527611597019254/Timer-Animation

Your work and narration looks professional. This is really nice as a prototype and very helpful for the Dev's. Nice job bro.

@DesignXstream

2 жыл бұрын

Heyyy broo! happy to see you on my channel.... and Thank you, that means a lot 😁

You're a legend for doing this, thank you

@DesignXstream

Жыл бұрын

Cheers buddy ✌🏼😁

Thanks for the video! Helping me out a lot in University!

@DesignXstream

8 ай бұрын

Glad to know you found it helpful! Cheers ✌🏼 :)

Thank you for this tutorial! It was helpful ^_^

@DesignXstream

2 жыл бұрын

Glad it was helpful! Cheers! ✌🏼

Thanks for this! 🤗

@DesignXstream

Жыл бұрын

Cheers ✌🏼

It does suck that it has to be out of sync, but this tutorial still really helped! I thought I was screwed when I needed one.

@DesignXstream

2 жыл бұрын

Glad you found it kinda helpful! Cheers 😁

Thank you !

@DesignXstream

2 жыл бұрын

You're welcome! :)

Thanks for your great education. but i wanted to learn how did you create that great plate under of timer. and i waited for that but you didn't talk about it...

@DesignXstream

7 ай бұрын

The video was the timer so did not include that. However they are Neomorphic style you can find many tutorials on youtube just search Skeuomorphic or Neomorphic Figma tutorial.

Thanks for your video. Very helpful! Is it possible to pause the animation and play again without it resetting?

@DesignXstream

2 жыл бұрын

With this structure it is not possible. For pause and play you might have to create multiple variants with each digit. It is gonna get too complex but I'm sure it would be possible.

Appreciate it

@DesignXstream

Жыл бұрын

Cheers ✌🏼

Helpful video. Thanks. Btw can't we use that timer plugin directly in our prototype? Actually I'm designing the plane with motion plugin (from your previous video) , with that I need a countdown timer and as a whole wanted to export it in gif. Is it possible? I'm just a beginner, sorry if it is a silly question. Hope you help.

@DesignXstream

2 жыл бұрын

If it is just a small countdown time like if you just want it to go from 5 to 0 then I would suggest you to do it using motion plugin itself. Just have number from 5 to 0 as later and then add keyframes to hide the digit every one second. So you can easily export the plane animation and countdown timer with motion plugin and get the GIF output. If you face any issue you can dm me on Instagram @designxstream

@dipsikhaphukan5563

2 жыл бұрын

If possible please make a video about it. Using motion what more we can do. I have queries regarding it. I will message you on your Instagram profile.

It was a very helpful video, but I was struggling in many places. Such as at '5.27' when you bring in the 0 for testing it. How did you bring it? Like what did you click? Since I'm a beginner in this field I would appreciate it if it was more in-dept explanation too

@DesignXstream

2 жыл бұрын

Hey Aisha, I'll try to be more elaborative in the next videos! However in 5.27 I just used Alt/Option + Click and Drag. This is done when you want to copy or duplicate an instance of anything. In this case I wanted to a copy of the component so I used Alt + click and drag to do it.

@Stininio

2 жыл бұрын

thank you sooo much for asking this i wondered the same

@ypgjones1

Жыл бұрын

I came here looking to ask the same question! Tried it out and its working perfectly, I struggled a little bit at first because the box with my digits was quite small so instead of Alt+Click+Drag creating a copy, it would think I was trying to create a link. I had to zoom in so that I could have enough space in/around the box for the command to work.

I really wish you said what hot keys or anything you used, I got to the point of adding the unit mask to the frame but can't seem to do it and each time I mess up my interactions...

@DesignXstream

Жыл бұрын

Apologize for that... point noted! Will make sure to mention the short keys I use.

Great tutorial! I follow everyting but it looks like my animation does not work when I drag the numbers into my design. It works when not in my design (play it from 0) do you have any suggestion? Thanks in advance

@DesignXstream

2 жыл бұрын

Hey Tirta, I hope you are signed up for the beta program since Interactive components feature is still in beta.

I like your tutorial and i learn many things from you. so, can you make a input field typing tutorial, because i saw many tutorials they can not show good so if you make a tutorial regarding this . Then will be very helpful for me.

@DesignXstream

2 жыл бұрын

Glad you find the videos useful. I've already made a couple of videos on input field in Figma. Also made one for Adobe Xd as well. kzread.info/dash/bejne/ZX-n2NquqZfge84.html kzread.info/dash/bejne/dXqDq6aJe6iXkto.html

@sanjuranjit6783

2 жыл бұрын

Thank you so much

@ameen9990

2 жыл бұрын

@@DesignXstream that's a great response to the audience bro. Keep going. 👌

Hi and thank you for this video. I tried to follow it and had one annoying issue. When trying to prototype it I used the exact animation definitions you showed but when running - it could not start .. only when I changed the first animation definition from "after delay" to "on click" it began to run and continued till the last number. (all other animations were still "after delay" and went well). any idea what could be the issue? Thanks much!!

@DesignXstream

Жыл бұрын

So you want to the timer to begin without any click? The first animation is a click so that it starts on click.

@michaltaub4850

Жыл бұрын

@@DesignXstream I changed it from " on delay" as it did not start.. If I use on delay (even with 1msec) it is not running at all

@Design Xstream I did what you did on the number but its not working it, its not moving at all

@DesignXstream

2 жыл бұрын

Did you move the position of the text layer? Maybe duplicate the file from description and compare it!

Hey! Could you please make video on Beginner Portfolio or on case studies? It wud be helpful to many like me..😐🙂

@DesignXstream

2 жыл бұрын

That's a good topic. I will surely add it to my upcoming videos!

@mythoughts9728

2 жыл бұрын

Thank you so much.. Will be waiting..🙂

@mythoughts9728

2 жыл бұрын

I also forgot to Thank you.. Your videos boosted my confidence.. They are really helpful..🙂

@DesignXstream

2 жыл бұрын

@@mythoughts9728 Very happy to hear that! Will surely keep adding more useful videos soon! 👍

I did the exact same thing as you did but its not moving at all , i really need to do this for my project

@DesignXstream

Жыл бұрын

Hey I'm not sure where you went wrong. I've included the project file you can get it from the link in the description.

I was about to add the interaction when i discovered my after delay is greyed out. Tried to do some research to find an answer but every one seems to be saying that you can only add after delay to single frames yet that's not the case with this video. Can someone help me out please.

@DesignXstream

2 жыл бұрын

Hey Moses, Firstly I hope you have signed up for the Beta program as Interactive Components is still in its Beta. After Delay works only when you try to add interaction between 2 frames. So make sure you are dragging out a link from a frame to another frame.

@mosesitodo5491

2 жыл бұрын

@@DesignXstream Yeah I have some other interactive component and it becomes active when i select the frame. But you're not using 2 frames in the tutorial you're just linking two component variants. Is there a way around this please?

@DesignXstream

2 жыл бұрын

@@mosesitodo5491 Yes, I've linked the two variants but selecting the main frame. You have the choose the main frame of the variant and link it to the next only then After Delay will be enabled.

@D4rthyyy_

2 жыл бұрын

I've found that if you remove all variants out of the group and then you can add an after delay interaction to each individual component then you can regroup them as a variant and the 'after delay' interaction is preserved. Hope that helps

My tens timer is not synching with units, it is changing before it reaches 0

@DesignXstream

11 ай бұрын

Using variables we could do this much easier and accurately. Would you like to see a tutorial on this?

Trying to follow this video but even from the start it's not possible to set the first set of digits to make a component as the mask obscures all of the numbers and you can't see what you're doing at all. Gave up after about 10 attempts.

@DesignXstream

2 жыл бұрын

Sorry mate! Masking is an important part of this so could find a better way to explain this! But try to download the figma file and then follow along it might be easier to understand and then you can build your own one!

How To Reverse minute Work? Like 15:00, 14:59, 14:58, 14:58 Decrees Timer? Because I Need In Project

@DesignXstream

Жыл бұрын

You have to do the same interaction but in reverse. So instead of 0:00 you need to set the value to 15:00 then move the last 0 inverse to 9 then 8 and so on...

@aakashprajapati5319

Жыл бұрын

@@DesignXstream Thank You Very Much & I Doing It. But Some Little Time Delay Issue have but i fixed it. thank you again

@DesignXstream

Жыл бұрын

@@aakashprajapati5319 That's great! ✌🏼

it aint working when i try to link the '0' to the '1' ??

@DesignXstream

2 жыл бұрын

I suppose you don't have access to Interactive components feature.... You need to sign up for the figma beta program!

how to drag that zero

@DesignXstream

5 ай бұрын

You mean reset to zero?

@EmilJungmair-eo3fq

4 ай бұрын

no to get the 0 on the iphone from the mask group @@DesignXstream

10 second number have delay so your coding is not correct

@DesignXstream

3 ай бұрын

There will be some mismatch due to the delay.