Skip to main content

Hi,


I’m trying to create a temperature picker and recent variables launch hugely simplified the process. I previously has to create a variant for each temperature. I just created a conditional to increase and decrease the temperature. However, I can still only drag the value in one direction only, in this case increase only.



I added two drag interactions one for toggling the temperature up and one for toggling it down but the second one doesn’t work. Is there a way to set drag direction when using conditionals? If anyone has an idea, please let me know.


Thanks

To be able to drag in different directions, your component must have a draggable object that must extend beyond the component’s bounds.


Just follow this guide:



  1. Create a number variable;

  2. Create a component set containing 2 variants (Minus, Plus);

  3. Apply the variable from step 1 to the text layer of both variants;

  4. Create a rectangle that is 3px higher than your variant’s height;

  5. Put it in each variant;

  6. Set this rectangle to the following coordinates:


    • Minus variant:

      X = 0, Y = -1;




    • Plus variant:

      X = 0, Y = -2;





  7. Add 2 interactions to the rectangles with the “On drag” trigger:


    • Minus variant:

      On drag 1 › Set variable to decrease;

      On drag 2 › Set variable to increase and Change to Plus variant;




    • Plus variant:

      On drag 1 › Set variable to decrease and Change to Minus variant;

      On drag 2 › Set variable to increase.






Thanks @tank666 for sharing this idea. It works but it’s not exactly what I’m looking for.

When I drag up for example, the whole component duplicates and moves up change to a minus variant.



I even tried to create a component using the temperatures box only but then it doesn’t work for some reason. The component needs to be able to collapse and expand as well. I found that conditionals inside components when I change the variant. Not sure if that’s a bug or not.


What I described above should work like this:




And your case, if I understand correctly, should work as a scrollable list-wheel?




Then you will need 5 variables and 3 variants, each of which should contain 5 items.

Duplicate the file from the link below to explore the interactions in more detail.

Figma – 3 Jul 23

Perfect. That worked like a charm. Thanks so much for your help 😀


Do you have any idea how to make it go in a loop? E.g. from 0 to 30 and then again 0. I tried different conditionals but I’m struggling which variable to use as a condition <=0 and >30.


Write conditions for each variable in both Minus and Plus variant interactions.


For example:


I did what you said and it still goes below zero. Not sure why. Each conditional here has the same condition just for a different variable. And I did the same for Plus variant with minTemp and maxTemp reversed. minTemp is 0 and maxTemp is 30.



Could you share a link to the file?


Hi,

See the file here:

Figma

I noticed it’s working when the increments are by 1 degree but when I change it to 0.2 it doesn’t work. That is odd. Why should a decimal make any difference to a mathematical formula?



Unfortunately, there are no tools for debugging variables in the prototype. So I had to go a little deeper.


I think this is due to the way Figma handles decimal numbers. Here are the values of the variables that are obtained using the API:

variables


To fix your prototype, change the == operator in the conditions to <=, >=. Also, in the interaction conditions of the Minus variant, instead of the “minTemp” variable, use another variable or a value of 0.15 or something like that.


Since the variables are currently in beta, various bugs and shortcomings are possible. I suggest you to share your feedback on variables and advanced prototyping.


Man your prototypes were awesome. I was wondering if there is a away, even if it’s by using a gross workaround, to have decimals in a number variable?


Yes, you can create a number variable with a decimal value. Just enter a period or comma (for example, .25; ,5; 1.4; 2,8).


You can also enter a fraction (for example, 1/10, etc.) and Figma will convert it to a decimal value.


I’m trying to use this but for a clock, and changing hours when it gets to 12, for it to change from AM to PM.


So what if I want a range, I want 7 AM-7 PM, on drag. Minutes don’t matter for this. I followed a tutorial for it to all change after a delay but not on drag and tried to combine it with this and got lost. Happy to share my Figma file with you.



In this case, you need to create a couple more variables and add additional conditionals.


For example:

Additional variables:



  • amPM string type;

  • toggle boolean type.


Conditionals:


/*
minHr = 1,
maxHr = 12
*/

// minus variant
if (currentTime == maxHr - minHr && amPM == "AM") {
Set toggle to True
}
if (currentTime == maxHr - minHr && amPM == "PM") {
Set toggle to False
}

// plus variant
if (currentTime == maxHr && amPM == "AM") {
Set toggle to True
}
if (currentTime == maxHr && amPM == "PM") {
Set toggle to False
}

// default variant
// After delay 1ms
if (toggle) {
Set amPM to "PM"
}
else {
Set amPM to "AM"
}

As a result, you should end up with something like this:



Do you have a link to the file? I also want from 7 AM to 7 PM.


I’ve added a page with this example to the source file (post №4).


Direct link to the design file page:

Figma – 3 Jul 23

The wheel picker component example can be dragged in both directions with an infinite loop of values ​​1-12, and the starting value does not matter here. In any case, you can edit the variable values ​​yourself so that the prototype starts with the value you need.


Thank you! How do I make it so it doesn’t go around in a circle? Like I want it to stop at 7 when i scroll up and stop at 7 when i scroll down?


I want the numbers to be

7

8

9

10

11

12

1

2

3

4

5

6

7,


but not be continuous scroll in a endless circle. Like scroll up in one direction and scroll down in one direction, when it passes 12, it changes from AM to PM


When right now if I set the min time to 7 and max to 12, the scroll is

7

8

9

10

11

12

7

8

9…

etc, is there also a way to fix that?


Material Design

Hey, So I am trying to create a similar but a bit different interaction. I am trying to make a weight scale such that if I drag the scale the number above changes with it. I have attached an image for reference. I tried giving number variable and increasing it as I drag the scale but the scale and number increases unevenly. How can I make it move together like with each line it increases 0.1