Interactions using variables

[Ninjanim]

"Hi,
The link below is a link to a Figma ConFig 2023.

Advanced prototyping with less complexity with variables - Miggi, Ricky R, Garrett M (Config 2023)

At 34:12, Miggi is demonstrating how to create interactions using variables.
I have 2 questions.

1. Why did he use the string-type variable ‘load_percent,’ and how was he able to assign its value to the number-type variable ‘load_value’?

2. How can we ensure that the rectangle grows to fill the width exactly when the percentage reaches 100%?"

Any help would be greatly appreciated, thanks.

[Haroll]

Hello @Ninjanim

Why did he use the string-type variable ‘load_percent,’ …

Pretty sure this variable is assigned to the text displaying the progress in the progress-bar

---

how was he able to assign its value to the number-type variable ‘load_value’?

You can convert a number to a string (but not a string to a number) by adding something between double quotes to the value of the number variable (as shown below). I made an example since it’s not visible through Miggi’s demonstration.

---

How can we ensure that the rectangle grows to fill the width exactly when the percentage reaches 100%?"

Once again, it’s not visible through Miggi’s demonstration, so I’ll assumed he hard coded the value and made the math.
You can do the math too, having a variable defining the total width (e.g: #total-width) of the container and then it’s a simple percentage calcul :
Set #total-width to #total-width / 100 * #load_value

Let me know if it helped!

[Ninjanim]

Thanks for the help and the reply.
It worked somehow, I had to find out 3.3 by trial and error. I hope I get better with more practice. Thanks.

[Stefan_B]

I wonder wheter it is possible to use variables to hide and show other components, like:

is it possible to use on click to change another element?

[Ninjanim]

This is how I would do it.
Step 1: Create local variables.
Step 2: Assign variables to appropriate layers(sometimes, you need to do right mouse click or detach instance to see the honeycomb symbol to assign variables).
Step 3: Apply interactions.