Design Like a Pro: design a Timer in Figma using
HTML-код
- Опубликовано: 1 авг 2024
- I am going to make a functional timer in #Figma.
I will use #variables and then write some expressions to prototype this timer. so get sure to watch this tutorial video until the end. let's see how we can make a timer app in Figma!
📌 Timestamps:
0:00 - Intro
0:23 - Step one: design the timer
1:32 - Step two: Animate the arrow
3:07 - Step three: Create variables
3:57 - Step four: Prototyping the timer
5:41 - Bug fixing - The first mistake
6:13 - Bug fixing - The Second mistake
6:54 - Demo
Whether you're a beginner or an experienced designer, you'll find valuable insights in this tutorial. Follow along and take your Figma skills to the next level with this captivating micro-animation technique.
👍 If you found this tutorial helpful, don't forget to give it a thumbs up and subscribe to the channel for more design tips and Figma tutorials!
Let's Learn together #UX and #UI , #Design, #figma #prototype
🔔 Subscribe for weekly design tutorials:@Kimoartcave
--------------------------------------------------------------------------------------------
🔥 Check out some of my other popular tutorials:
Variables: create dial pad: • #figma Tips and Tricks...
Advance micro-interactions in Figma: • Level Up Your Micro-In...
--------------------------------------------------------------------------------------------
🌐 Connect with me:
Instagram: / kimo.artcave
Photography: / kiagraphy.a. .
Twitter: / kiarashmoazzez
TikTok: / thekimo.artcave
LinkedIn: / kiarashmoazzez 
Наука
You keep blowing my mind with the things you are able to do with the new Figma updates.
Thanks a lot. ❤️
Crazy cool
❤️❤️❤️
Awesome content! I wonder if a countdown is possible using variables and conditionals
Thanks ❤️, sure it is possible. In fact, I made a 5s countdown in this video. It is the same approach amd same logic: ruclips.net/video/v8HIFFVzE9A/видео.html
Amazing. Do you have a sample file that we can view?
This one I did not publish the file. I am trying to do it for some of the case studies I am working on. Thanks for reminding me❤️❤️
or can you tell me the condition statement for that
I followed along step by step but could never get my arrow to play. You go fast for beginners to keep up, perhaps I missed an important step? But love that this is possible!
Thanks for sharing your comment. I will definitely try to share more real time record which will be slower and easier to follow in the future. Also, please share your issue to see if we can find a solution for it.
I think I found the problem I was having with the analog clock face. I see you made them in frames. Thank your following up!
@@Kimoartcave
@@NicoleUXplorer great. 💪
Hi, thank you for an interesting tutorial. I tried it several times, didn't get what's inside Group 1 in the Screen Frame, where does the arrow on the Screen frame go when we put an Arrow instance of an Arrow component on top of it. And, of course, the arrow doesn't rotate:( Please hit me with an insight how to finish this tutorial.
I understand your confusion, I used to do voiceover and not do real-time screen recording, so I some parts would have been skipped in result.
Group 1: is basicly just a decorative element. The circle in the center.
I deleted the first arrow when I added the instance of the component that I made.
About arrow not being rotated, I need more info. How did you set up your interaction? Maybe you have to activate the interaction of nested instances to see the effect in another frame (new figma update). Please share more info with me.
I am trying to have real-time recording in laters video to reduce the complexity of tutorials. Thank you!
@@Kimoartcave The arrow doesn't rotate for me either. I wonder if a new Figma update made it not work.
bro can you create an count down like 10 days to go which decrease the time
Hi. In practice, yeah, we can make that happen, but where do you need to use it? ❤️
like sale ends in and like 10 days to go@@Kimoartcave
How do I make this count down instead of up?
For count down, you need a variable with initial value, and instead of increasing it by time, you can reduce thoese value. Logic would be slightly different. Let me know if you need more help.
Suddenly now i need to know if the tutorial is for free user or paid due to variables
It seems some of the features are not available for free licenses. However, you can apply for an educational account to get access to those features if it applies to your condition. Thanks for your comment ❤️
It does not work. When it starts it goes from 0 to 2 seconds and stops.
I need to know more about the details of how the issue appears. but it might be the case that new updates changed something.
ur tutorial is too confuisign dude especially when u were talking about the changing to next variant
I switched to real-time screen recording in later videos, this might solve the issue you mentioned. thank you ♥