Skip to main content

In this Figma Tutorial they use a string variable called “Cart Button Text” and a conditional interaction to change the state of the button “Add to cart”. So, when the # Amount available == 0 , the button change to the unavailable variant.


I tried it and this whole thing can be achieved using a boolean variable instead of a string one.


So, my question is. Why should I use a string variable instead of a boolean variable?. Is there any logical explanation to do this? Like, idk maybe thinking in the future I may have another variants or “states” of my button so I would not be able to do this interaction if I have a boolean?


I hope my question is clear and I thank you in advance for your answers. 🙂

In the example, you can achieve the same thing using a boolean variable because there are only 2 values.


But what the tutorial is trying to show is that if the values of a string variable and a variant property match, you can link them, and that allows you to set the value of a variant property from an interaction.


So, for example, imagine you have three colored buttons: red, green, and blue.

And you also have a component called background with 3 variants that you distinguish by the variant property bgColor, which can be “red”, “green”, or “blue”.


Now, you can create a string variable chosenColor and set up interactions so that when clicking the red button, the chosenColor variable gets the value “red” and so on.


Then link the bgColor variant property to the chosenColor variable and you’ll be able to change the current variant of the background component.

Ohh I got it. This feature is very powerful and makes the process of prototyping so much easier.

Thank you for taking the time and replying! Your example was very clear.

Reply


Terms & ConditionsCookie settings