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 @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.
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.
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.
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.
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:
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.
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:
I’ve added a page with this example to the source file (post №4).
Direct link to the design file page:
And to the prototype:
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?
Write the appropriate logic. For example, something like this:
// default variant
// draggable layer interactions
// drag to minus interaction
if (currentTime != 7 && !toggle) {
Change to minus variant
}
if (toggle) {
Change to minus variant
}
// drag to plus interaction
if (currentTime != 7 && toggle) {
Change to plus variant
}
if (!toggle) {
Change to plus variant
}
I don’t know the details of your use case, of course, but I would still use endless scrolling and also add an AM/PM switch. See how it’s done in Android and iOS.
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
