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:
- Create a number variable;
- Create a component set containing 2 variants (Minus, Plus);
- Apply the variable from step 1 to the text layer of both variants;
- Create a rectangle that is 3px higher than your variant’s height;
- Put it in each variant;
- Set this rectangle to the following coordinates:
Minus variant:
X = 0, Y = -1;
Plus variant:
X = 0, Y = -2;
- 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:
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?
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
