Its very limited indeed.

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.

I have been having a similar issue.

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.

Have posted in Share an idea topic, please vote guys Boolean Variables Assignable inside component @andreaszzzz @Johann2 @Craig_Evans @Natti

Oh jeez, the right click on the eye button drove me insane trying to find it.

That is veery hidden behind the visibility toggle. For future people coming from Google, this is how it looks like after you right klick:

And this is how the property looks like afterwards:

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.