I was very excited about the ‘variables’ announcement, and was hoping that it could simplify the prototypes I’m working on. However, I hit a wall almost immediately, and I’m not sure if it’s because I don’t understand how the feature is meant to work, or if it’s because of a known limitation.
I want to create a ‘switch’ that changes a visual element across multiple screens. For instance, a menu that lets the user change ‘modes’ from ‘online’ to ‘offline’. In my (very limited) programming experience, I would expect to be able to accomplish this by setting a boolean called ‘online’ to TRUE, and then tell each component that if ‘online’=TRUE then display the ‘online’ variant.
However, it does not seem to be possible to display a specific variant based on a boolean state.
The closest I’ve come to making this work is to set a string variable to ‘online’, which changes the variant, but it only does so in one page. If I go to the next page, the ‘state’ is not remembered. (It reverts back to ‘offline’).
So I’m wondering:
– How can I make a specific variant of a component be displayed based on a boolean?
– Are set variables not remembered across pages?
Use boolean to toggle visibility.
Use strings to toggle between variants (offline/online).
Here is the major catch with figmas prototyping method. Unlike any modern programming framework, you have write the logic for other components state IN each button, instead of assigning the logic to the component itself (like in react/swift).
It’s more accessible for very easy prototypes tough.
I also noticed that it becomes unmanageable pretty quickly with figmas “Imperative” model. Try out Framer, where you can assign code overrides to each component.
To be able to use a boolean variable, your variant property must also be of a boolean type. Why it didn’t work out for you, I don’t know.
A string variable can be applied to variants. Make sure this variable is applied to the variant property in every instance on all screens. Also check the order of actions in the interaction details modal. Maybe you just need to reorder the actions.
You can also do without variables and use interactive components so as not to open the overlay.
In general, if you share specific settings, screenshots, or a link to a file, then it will be much more helpful so that anyone can identify at which stage you are having problems.
A hacky fix is to create another component which shows both offline and online and use layer visibility to react to modes.
Drag an instance of both variants onto your canvas and create a new auto layout component. Select your OFFLINE instance and RIGHT CLICK on the layer visibility toggle next to the opacity mode on the right* then either attach an existing boolean variable to this layers visibility, or create a new variable called OFFLINE and set it to true. Go into your variables window and toggle the switch on the other mode to false. Repeat this for ONLINE with a new boolean variable. You need both, otherwise one of your modes will show both instances.
It’s not an elegant solution, but If you have a hundreds of screens split into Offline and Online mode, this will be quicker than going through each of them and manually changing the variant.
this took me a while to find. Most properties that can accept variables show you a little icon on hover, but for some reason the layer visibility one is hidden behind a click.
Hey @Craig_Evans I’ve struggled with this as well, only the variant properties seem to allow variables but everywhere I read boolean properties should as well.
Would you mind elaborating on this, hidden behind a click where?
Thanks for your help.
Update:
Ah I found it, you have to manually go to the layer:
That interaction is super awkward and unintuitive, just include it in the properties section like the other types please.
This is completely independent of Component Set properties, but I feel like that should be one and the same tbh. The property will be inherited by Component Instances and then reflect the current state of the property in your prototypes.
