Craft Dynamic Countdown Timers in Figma! Variables Hack No Coding!

Рет қаралды 10,564

Күн бұрын

Looking to spice up your Figma designs with interactive elements? Learn how to craft eye-catching countdown timers that update automatically using the power of Figma variables!
No coding experience required! This beginner-friendly tutorial will guide you through:
Setting up variables for control: Easily adjust time and text with a single click.
Building the timer structure: Leverage Figma's tools to create a visually appealing interface.
Implementing dynamic updates: Harness variables to automatically count down in real-time.
Customizing your timer: Make it your own with personalized styles.
Perfect for:
UI/UX designers who want to add engaging elements to their prototypes.
Marketing professionals looking to create dynamic presentations and landing pages.
Anyone who wants to impress with interactive Figma designs!
Subscribe for more Figma magic! ✨
#figma #tutorial #countdowntimer #variables #animation #ui #ux #webdesign #graphicdesign #interactivedesign
P.S. Leave a comment below with your dream use case for a timer! Let's get inspired!
Font Link: www.cufonfonts...

Пікірлер: 31

@saurabhbhardwaj6753 17 күн бұрын

Fantastic work Rishi! Keep going :)

@naga9384 5 ай бұрын

Thank your for this great tutorial Rishi 👌

@gsharma1 7 ай бұрын

This was one of the best tutorials I came across as I was trying to figure out variables and conditions to set, and it helped me to build it very quickly. I also appreciated how well-paced your explanation was. It was not too fast nor too slow and helped me follow along better. One question that remains is whether you found a way to show two digits as part of the count down where 0 replaces the left digit. So for instance, right now the seconds shows 10 > 9 > 8... but I want it to show 10 > 09 > 08... where a zero will appear in front of the single digit like it does on digital clocks. What would you recommend for that because in the local variables, even if I place a zero, it will auto-delete it and there doesn't appear to be an obvious way to set it. Also, how do I stop the timer after minutes reaches 0?

@rishikumar3144 7 ай бұрын

-I haven't tried it but you can try and add a text layer with "0" value and make it absolute position in front of the timer. -Now attach a boolean variable to the layer visibility and make it off by default -In your variables condition add one more condition where it checks if the current timer is less than 10 then turn on the visibility of that "0" text layer. - To stop timer just tweak the if condition to >=0 I hope this helps and doesn't confuse you 🙈

@NouranElNakib-- 5 ай бұрын

Thanks a lot for both of you, I had that exact question

@knightlygnus Ай бұрын

@@rishikumar3144 How do you keep the single digit from sliding to the left over the 0?

@icos667 Ай бұрын

We need premium to use conditional interactions

@zahirabbash13 7 ай бұрын

Wow, this is great❤

@jacquesdebeuneure1561 14 күн бұрын

Did you ever figure out why the seconds decremented by 2, rather than by 1?

@rishikumar3144 14 күн бұрын

To be honest, nope. I think some lag issue coz of delay may be.

@arvindc100 7 ай бұрын

Good

@javialexarias 4 ай бұрын

You need to have professional plan for use "conditional"

@sumandhara445 3 ай бұрын

Or you can get a student account by purchasing any such course where figma is in the curriculum.

@TaroonTyagi 7 ай бұрын

Awesome ❤

@shilpasharma54 7 ай бұрын

Amazing❤

@KenethButad 3 ай бұрын

how you add tha viewport>?

@shreyanshdutt 7 ай бұрын

Hmmm, very nice tutorial. Simple and time saving #punintended

@arturbelyaev6508 2 ай бұрын

I do everything like you, but from somewhere it appears after zero 1 with a minus (-1)

@rishikumar3144 2 ай бұрын

If you can share the file I can have a look. Most probably it's just conditional issue with some maths to figure out

@posting_meme_i_like_channel 4 ай бұрын

how to stop timer when minutes and seconds == 0? can we using AND operator? like combining condition

@rishikumar3144 4 ай бұрын

Yeah you can try that, ‘and’ ‘or ‘ operators are available

@ZoeSinner 3 ай бұрын

I'm trying to create a timer that counts up and I need the seconds to be styled as "01" not "1" any tips?

@rishikumar3144 3 ай бұрын

Yup you need to have two separate text layers keep the first text layer constant 0 and on the second one attach variable. Hide the 0 layer once the counter layer crosses 9. Hope it helps and doesn’t confuse instead 🙈

@arturbelyaev6508 2 ай бұрын

Рахмет бро!