Skip to main content
Question

Change instance state based on other instance state with conditional variables

  • August 20, 2024
  • 1 reply
  • 49 views
Mathy_Lippens

I’m trying to create a Figma prototype of a form with specific functionality.

image

This is a multiselect form that exists out 6 of the same instances. This component this instance comes from has 4 states:

  • Default
  • Active
  • Hover
  • Disabled

What I need to happen is that when a user selects ‘No preference’ all other selected options need to be turned off (aka set to ‘Default’). What also needs to happen is if ‘No preference’ is set to ‘Active’ and another option is selected, the ‘No Preference’ option needs to be turned off (aka set to ‘Default’).

In short, ‘No preference’ can never be used in combination with any of the other options but the other options should be selectable with each other…

Anybody can help me figure out how to get this working?

This topic has been closed for replies.

1 reply

Raphael_M
  • Raphael_M
  • Power Member
  • 394 replies
  • August 20, 2024

You can do conditional (check if/else) with variables for this one.

Make sure to create variables for each card and attach it to your component that sets it to

selected variant:

image

The technique is to add this condition on the no preference that sets all the other cards to false and for it’s variable to true
image

And then add this to all other cards aside from no preference that sets the no preference variable to false
image

It should work like this:

1 Attachments
Mathy_Lippens
1 person likes this
  • Mathy_Lippens
    Mathy_Lippens
Terms & ConditionsCookie settingsAccessibility statement

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings