Timer using 'while' loop created with Figma variables & conditionals

Interactive Components Questions
1

Hi guys, using variables & conditions, is it possible already to create simple countdown going from 10 to 0, with a 1-second delay between each number?

Here’s a example in Python:

import time

def countdown():
    seconds = 10  # Starting number of seconds

    while seconds >= 0:
        print(seconds)
        time.sleep(1)  # Delay for 1 second
        seconds -= 1

    print("Countdown finished!”)

countdown()

Thanks a lot in advance!

1 Like
2

You can. Use the “After delay” trigger and the “Conditional” and “Set variable” actions.

3

Hey @tank666, could you perhaps provide an example on how in practice this looks like? I somewhat understand the theory behind it, but I’m not yet proficient enough to create this myself :frowning: An example certainly would go a long way :pray:

4

timer
timer844×625 33.2 KB

7 Likes
5

WOW, @tank666 you are a true genius :star_struck:
Thank you so so much!!! Do you have a Youtube channel with Tutorials? If not, you probably should. Have a great day.
Next up I’m gonna try to build a proper timer from this, wish me luck :pray:

6

This is great, I’m so glad for variables. Any insight on how to make a 5 minute countdown timer?

7

You need to have 3 variables (2 numbers for minutes and seconds, and 1 string for seconds). The string is needed to handle the case when the seconds value is less than 10 (to show 09, 08, etc.). Apply a string variable to the seconds layer.

Then write the logic for your component.

2 Likes
8

Been trying to do this, but I’m a little lost. Are you able to show me an example? If it’s not too much trouble?

Thanks

1 Like
9
3 Likes
10

Thank you so much for this!!! I have a prototype due today and this is going to make it much more impressive!!! Thanks again!

11

Thank you so much again @tank666 for your example. Based on the learnings from your first example I created a CountUp and a CountDown, albeit not as slick as yours :sweat_smile:
Hopefully this could help you too @Kenneth_Henderson.

Counters
Counters3228×3198 585 KB

12

I have one more question… is it possible to have multiple timers running at the same time?
(I need upto 7)

Thanks

13

Yes, of course you can have multiple timers. Add additional variables to local variables, change component logic to take into account all new variables, add as many instances as you need, and override applied variables in layers within each instance.

14

I’m sorry, I must be missing something then. I did just as you described and tried running two timers and I could never get the 2nd one to work together on the same frame. But if I put them on a frame singularly, either one, they would work. I spent like 4 hours trying to get it to work and gave up. I don’t know what I am doing wrong, I didn’t think it should be that difficult. Thanks.

1 Like
15

How did you change the logic? Have you overridden an interaction in an instance or edited an interaction in a component set variant?

16

I just duplicated the component, and edited the logic in the new component to point to the variables for that one.

17

Sorry, I didn’t quite understand what exactly you duplicated. Component set or component instance? Perhaps this is a bug that needs to be reported to support.

I originally suggested changing the logic in the existing variant of the component set.

18

Well, I’ve done it both ways now. Duplicated a set and tried that, and created a new instance of the Start and that didn’t work either.

Here is a link to my file: https://we.tl/t-MZWLSK8tkS

Perhaps you can see what I’m missing. Thanks so much!!!

19

I’ve been experimenting for a while, and I seem to have figured out that the timer only stops when the “Change to” action is inside a conditional block.

Here’s how I managed to get multiple timers to work:
0. We take as a basis the original timer from this post: Timer using 'while' loop created with Figma variables & conditionals - #9 by tank666;

  1. Select the “Start” variant in the component set;
  2. Open interaction details;
  3. Find the last condition in the list of actions;
  4. Move the “Change to” action from the else block to the end of the list of actions;
  5. Select the component set and duplicate it;
  6. Add the required number of variables for the second timer;
  7. Select the “Start” variant in the duplicated component set and edit the interaction by replacing variables, and bind these variables to the nested layers of both variants;
  8. Add an instance from the second set to the “Test” frame and play the prototype.

I still suggest you contact support to clarify if this behavior is expected, a beta limitation, or a bug.

20

Hey @tank666 I tried what you’ve share for the timer. But for some reason the number just changes from 10 to 9 and stops there. It does not reduce further. Is there something I’m missing?