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...
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.
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...
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
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.
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.
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.
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
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.
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.
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!
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!!
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.
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. ruclips.net/video/3Ksvxuy4zKk/видео.html ruclips.net/video/CFOIDPKE1bw/видео.html
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
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...
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.
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.
@@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?
@@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.
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
![Rolling Counter [with VARIANTS] | Figma Advanced Prototyping](http://i.ytimg.com/vi/Qg2N6Zsz_RQ/mqdefault.jpg)
📄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.
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
Cheers buddy ✌🏼😁
Thanks for the video! Helping me out a lot in University!
Glad to know you found it helpful! 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.
Glad you found it kinda helpful! Cheers 😁
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...
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 this! 🤗
Cheers ✌🏼
Thank you for this tutorial! It was helpful ^_^
Glad it was helpful! Cheers! ✌🏼
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...
Apologize for that... point noted! Will make sure to mention the short keys I use.
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
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.
thank you sooo much for asking this i wondered the same
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.
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.
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
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.
Thanks for your video. Very helpful! Is it possible to pause the animation and play again without it resetting?
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.
Thank you !
You're welcome! :)
@Design Xstream
I did what you did on the number but its not working it, its not moving at all
Did you move the position of the text layer? Maybe duplicate the file from description and compare it!
My tens timer is not synching with units, it is changing before it reaches 0
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.
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!
Hey! Could you please make video on Beginner Portfolio or on case studies? It wud be helpful to many like me..😐🙂
That's a good topic. I will surely add it to my upcoming videos!
Thank you so much.. Will be waiting..🙂
I also forgot to Thank you.. Your videos boosted my confidence.. They are really helpful..🙂
@@mythoughts9728 Very happy to hear that! Will surely keep adding more useful videos soon! 👍
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!!
So you want to the timer to begin without any click? The first animation is a click so that it starts on click.
@@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
I did the exact same thing as you did but its not moving at all , i really need to do this for my project
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.
Appreciate it
Cheers ✌🏼
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.
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.
ruclips.net/video/3Ksvxuy4zKk/видео.html
ruclips.net/video/CFOIDPKE1bw/видео.html
Thank you so much
@@DesignXstream that's a great response to the audience bro. Keep going. 👌
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
Hey Tirta, I hope you are signed up for the beta program since Interactive components feature is still in beta.
How To Reverse minute Work? Like 15:00, 14:59, 14:58, 14:58 Decrees Timer? Because I Need In Project
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...
@@DesignXstream Thank You Very Much & I Doing It. But Some Little Time Delay Issue have but i fixed it. thank you again
@@aakashprajapati5319 That's great! ✌🏼
it aint working when i try to link the '0' to the '1' ??
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
You mean reset to zero?
no to get the 0 on the iphone from the mask group
@@DesignXstream
10 second number have delay so your coding is not correct
There will be some mismatch due to the delay.
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.
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.
@@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?
@@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.
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