"Hi,
The link below is a link to a Figma ConFig 2023.
At 34:12, Miggi is demonstrating how to create interactions using variables.
I have 2 questions.
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’?
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. 🤓
Best answer by 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!
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!
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.
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?
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.