Boolean properties - how to turn one boolean off when turning another on?

Hi @Ming_Liu, Thank you for reaching out about boolean properties. It’s wonderful to hear that you’re looking for learning materials, and I’ll do my best to assist you!

I understand that you have a component set with two boolean properties. If you already have properties on your component set, using the [Change to] action could be an option to show/hide orange and gray pins.

• For variants and properties: Create and use variants
• Figma YouTube tutorial: Interactive components

If you’d like to delve deeper into conditional logic, please refer to the following:

• Figma YouTube tutorial: Prototype with variables
• Apply variables to designs
• Multiple actions and conditionals

I hope you find these resources helpful, but I may have overlooked something. In that case, could you please tell us more? Would you mind sharing a quick video recording or screenshots of your current design in progress? This may help the community better understand what you want to achieve.

If others from our community have different approaches, feel free to jump in! We welcome your ideas and insights.

Thanks,

Hey there, thanks so much for replying.
That’s v useful to know but i was more talking about at the design stage and not in the prototyping stage.

What i’m looking for is this:
When I’m designing i toggle the redpin on, the graypin automatically toggles off. You can’t ever have both ON, it’s one or the other. That way anyone in my team can’t switch both pins on. Is there a way to do that?

Hi there, Thanks for clarifying!

One idea that comes to mind is to use interactive components. Interactive components are an extension of variants, which means you can add instances of interactive components to your designs just like any other component. The great thing is the instances already have interactions applied for prototyping.

Please take a look at here: Create interactive components with variants

I understand that you’re looking to have interactions between the redpin component’s boolean property and the graypin component’s boolean property without using prototyping. It may be a bit challenging to achieve those interactions without prototyping.

I’ll check with my team internally to see if we can offer more assistance on this. Once we have any information, we will update you!

We also welcome any insight or suggestions from our community, so please feel free to jump in!

Thanks,

Yes perfect.
That’s exactly what i was looking for. Thank you for your help on this. 🙏🏽

Would it be possible to do this with only one switch to flip from one to the other? It’s nice to have it automatically switch the other one off but is there a way to do this were it’s a only showing a single switch?

Hey @Vince11, wonder if you wouldn’t mind giving advice to my use case?. I have 4 map pins, only one should ever be visible at a time - turning one on would hide any of the other pins that are visible. I can’t quite figure out how to do that with the solution you posted. Would I need each pin to have a visible and non visible state, and then stack them like you suggested?

Hello @Hensmon, I tried out the method suggested by @Vince11 (Build Pin Component > Build Pin Stack Component). Using this approach with 4 pins will yield the following result.

I’m not sure if I understand your use case correctly. I would create the four different pins as variants of the component. Then you can simply display the desired variant via a dropdown.

Of course. That would simply be the first step: Build the switch component with the values true and false. You can then place this component as often as required and each switch can be controlled individually.

Yes drop down was my choice in the end, I dont think I was doing the right thing trying to use boolean hide

Hi Vince, any chance you can share the Figma file for this? Trying this out but can’t seem to get it to work. Thanks!