Skip to main content

"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.




  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. 🤓

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.

image





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 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.


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.