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

Подписаться 1,2 тыс.

Просмотров 6 тыс.

50% 1

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.com/font/digit...

Опубликовано:

8 фев 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 19

@naga9384 Месяц назад

Thank your for this great tutorial Rishi 👌

@zahirabbash13 4 месяца назад

Wow, this is great❤

@TaroonTyagi 4 месяца назад

Awesome ❤

@shilpasharma54 3 месяца назад

Amazing❤

@arvindc100 3 месяца назад

Good

@shreyanshdutt 4 месяца назад

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

@gsharma1 3 месяца назад

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 3 месяца назад

-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 🙈