Change variant of other component

Ok, I am pretty sure that has been asked already, but the search results I found didn’t give any satisfying results.

I am trying to create a user interface with several components that should also effect others. Example: activating a switch component should also activate a numberbox below and so on. I have created a library of components with different variant states such as default, hovered, pressed, inactive.

Now I wanted to prototype a click dummy and here’s where I get stuck, because for whatever reason you can easily change an instances variant on click, hover, whatever but not the variant of another instance. Why?

I read that I need variables to do so and even subscribed to a professional plan to get access to them. I tried to follow the tutorial for this, however…

a) it only seems to work with boolean variables which provide only two states. So I have to create additional state variants for each component containing only a true / false state, which massively increases the complexity of my component variants setup. I tried to use string variable and matching the value with variable name but that didn’t work.

b) I have to create one variable per Instance I want to switch? This will become a pretty ridiculous number of variables pretty fast.

c) How would I combine that with the components own hover / pressed behaviors? It seems it ignores my logic variable switch because I linked that to the default state of the instance but when I hover it it changes to hover apparently. So I do need to re-logic all my components behaviors to combine it with a variable switch? What’s the point of using components then?

Please tell me I am doing something very wrong here, because I just spent money for a pro subscription and I wonder if I just got ripped off…


image

Hi @Peter_Koehler, Thanks for reaching out about this. I totally understand your frustration, and I’ll do my best to help you out.

a) While boolean variables only have two states, you can still achieve more complex interactions by combining multiple boolean variables. For example, you can use one boolean variable to control the activation state and another for the hover state. This way, you can create different interactions based on the combination of these variables.
Please check here: Multiple actions and conditionals

b) I know it’s far from what you achieve but I made a simple prototype for an instance of an interactive component.
Screen Recording 2024-02-16 at 9.32.10
I used the switch instance action to change the state of the toggle button instance, and applied variables to the pulldown menu instance to enable multiple actions. So yes, you would need to create variables for additional actions.

c) Components are still valuable for maintaining consistency and reusability in your design. To combine variable switching with the component’s hover/pressed behaviors, you may need to ensure that your logic considers both aspects.
You might find some helpful insights here: Advanced prototyping examples

I hope this clarifies things a bit for you! Now, I’ll pass the mic to the community. We have many experts who can share their insights and experiences for the concern here. Feel free to join in the conversation!

Thanks,

Hi, Peter.

That’s weird. String variable should work if you don’t want to use toggle switches.

Is it possible for you to send a screenshot of your component property?

Thanks!

1 Like

@Junko3 , @Raphael_M
thank you very much for your replies. I was able to reproduce your suggestions, however I still have trouble with my scenario when using predefined components with their own hover / pressed / click behaviors. Whenever I use my switch component as shown above as an instance in my mockup and try to connect an additional on click event (to set a variable for example) it will “freeze” the components internal behaviors on the “while pressed” state. So I can click my switch once, but it will then be stuck in the while pressed state and I won’t be able to switch it back. I tested several setups of my components but I don’t find a reliable way to make them work.
I have to use dozens of identical components in my mockups so it is no option to recreate every behavior for every single button / switch etc. Is this a bug or just a hard limitation? I have no idea how I can create any Prototypes with that limitation and I wonder if I am doing something really wrong because I can’t imagine Figma isn’t capable of something so basic. Really frustrating.

Hello @Peter_Koehler, Thank you for your response and I completely understand your frustration.

It seems like you are experiencing issues with adding interactions on interactive components. I attempted to replicate the issue, but without more details, it’s challenging for me to understand the root cause of the issue.
We are unsure if this is a bug without further investigation with a copy of the file to examine your components in detail.

Would you mind reaching out directly to our support team here: https://help.figma.com/hc/en-us/requests/new
Please make sure to use your Figma account email, provide a screen recording of the issue, include a link to the file, and invite support-share@figma.com with “can edit” permission (support-share@figma.com on your file will not count towards your billing.) This will allow our support team to gather more context and replicate the issue for further investigation.

Thank you for your assistance!