Figma Complex Switch Button & Conditions

[high ermine]

Hi everyone!

I'm currently working on a project in Figma and facing a challenge. I'm trying to create a complex and interactive switch button system with conditions, but I'm not sure of the best way to go about it. I would like to seek the help of the Figma community to get advice, tips, or even tutorials that could guide me in the right direction.

Here's what I'm looking for in this switch button system:

The "blue switch" can activate all the "red switches" but not deactivate them.
The "green switch" can toggle the "button" on and off.
If any of the "red switches" are turned off, then the "blue switch" should also turn off.

I've made some attempts, but I'm stuck at certain steps and don't know how to effectively handle the conditions. If anyone has worked on something similar in Figma or has ideas on how to structure such a system, I would greatly appreciate your help.

Additionally, if you know of any online resources, tutorials, or Figma plugins that could be useful for this type of project, I would be thrilled to discover them.

Thank you in advance for your invaluable assistance! 🙏

[safe forge]

Hey @high ermine If you can give edit access that would be helpful

[high ermine]

I'm doing it right now thanks !!

[safe forge]

one important thing though is to kick everyone out before they would charge you for everyone in the file!

so you will probably want to make a bunch of variables to make this work

like one for each switch and button. For the switches, you probably want boolean variables, and for the button you would need a text variable

And then for the interactions, you would need to just go over what you wrote up above!

So eg. if your variables are:

isBlue - false
isRed1 - false
isRed2 - false
isRed3 - false
isGreen -false
buttonState - inactive

then for the

The "blue switch" can activate all the "red switches" but not deactivate them.

part, on the blue switch you would do an on click,

if !isBlue { this means that if isBlue is false
set isBlue to true
set isRed1 to true
set isRed2 to true
set isRed3 to true
}

for the else part you wouldnt need anything (since as you say it couldnt deactivate them. Maybe you want a set isBlue to false in the else part if you want to turn it off when clicking on it (and it is on)

now, to actually make the interaction do something

after you create the variables, you need to connect the instance's prop to that variable

so eg here you click the blue switch, and then you can see that hexagon thing popping up -- meaning variable, and linking it to the isBlue variable

Similarly, you can translate the other two statements similarly

[high ermine]

I'm not english native so if I need clarification can I ask you well ? Btw just wanted to give you a big shoutout for your help with my Figma issue ! Your advice seems super clear. I'm going to give it a try. Thank you so much Mai !!

[safe forge]

yeah lmk if you have any questions!

Good luck on it! i hope it works out 😄

[high ermine]

I have take a screenshot but i seems I cant send it to you here

Hi Mai, going back to you, it seems that the variable dont want to connect to an instance, did I miss something ?

[safe forge]

Please get verified in #verification

And you will be able to send images

[high ermine]

Thank you very much, you're the best !

[safe forge]

Could you show the variables u made?

[high ermine]

Yep

[safe forge]

Okay, my assumption is that even though in props off/on creates booleans, figma hasnt updated it so it would work eith variable booleans as well

My suggestion is to rename the off and on props options in your component sets

To True and False

Or if that doesnt work either then to true and false

[high ermine]

It works with the maj 😄

[safe forge]

Nice!

[high ermine]

Thank you, I try to finish by myself, hope I dont have to bother you again 😁

[safe forge]

Good luck! You got the basics down 😄

[high ermine]

So here I come again 😅

I change all the condition for the Blue but there is no changes added to the proto

I've surrely miss something but what ? If you can one more time bring you luminous experience on this it would be very nice 😁

[high ermine]

Here is another try

[safe forge]

There is no change to

Alll of them needs to be set

[safe forge]

Also you dont have if in here

[trail hamlet]

Wait , that’s how that’s going to work? Anyone we give edit access to counts as an extra user ? I didn’t really process that context of how it will work

[safe forge]

Yep

Since on pro team things are /user

—> the more user u have in a pro team, the more you have to pay

[trail hamlet]

Good grief so to help anyone on this server, the user is going to need a free plan, log into that and copy the file over ? That sounds tedious .

[safe forge]

Well in this case you can only do variable interactions on pro plan

And they charge you based on how many ppl you have on the team atm

[trail hamlet]

Is edu out in terms of variables?

[safe forge]

So if you have them in for a day and kick them out i believe thats okay

[safe forge]

Edu is basically = pro plan but for free

[high ermine]

Hi @safe forge , I'm reaching out to you because I don't think I understood which settings I should use or how to use it to properly manipulate variables and conditions. Could you help me clarify this? Thanks in advance 🙂

[safe forge]

you are in the right spots! But you are missing eg the condition part

if !isBlue { this means that if isBlue is false
set isBlue to true
set isRed1 to true
set isRed2 to true
set isRed3 to true
}

as described here

You are also using change to, but you should only be using set variable

[high ermine]

Yes but the syntaxe isn't exactly the same so it's confusing me :/

[safe forge]

you just need to use conditional here

[high ermine]

Oh okay, but did my toggle will still working ?

[safe forge]

and then it shows the if thing

[safe forge]

yes, basically the way it works is that you have the blue variable that is false, right?

and then you connected the blue variable to be the property for the instance, right?

That basically means, that the instance will be whatever the value of the blue variable is

so in the beginning, it is going to be the false variant (being off), because the blue variable is set to false

But then, when you click here,

if !blue <-- meaning that if not blue is true, so if it is currently false (because not false is true), then change the blue variable to ture

set variable blue to true = make the value of the blue variable into true

when it becomes true, the swithc that is connected to that variable will become the "true" variant aka being turned on

because it is always the variant whatever the variable's value is

in the beginning the value was false, but when you click on the switch, you set the value to true

[high ermine]

It's working !!!! Thank very much Mai !!!

❤️ 🥳

[safe forge]

nice! glad it worked out 😄

You can do the same logic for the other ones too! I think you have described them well in your original message!

[high ermine]

With this level of accuracy, I should finally be able to manage on my own. Thanks again for your help, and I wish you a wonderful day 😄

[safe forge]

You too!

[trail hamlet]

You’re the variables whisperer !!!

[high ermine]

Hey @safe forge I want to push a bit further from that point now. I've been trying since this morning, but guess what... I'm stuck again 😅 So, if your up for an audio call and screen share, it would be greatly appreciated ❤️ It'll be much faster than what I'm currently doing !

[safe forge]

Hi, im sorry but i cant really hop on a call but happy to help here

[high ermine]

Oh okay no problem 😄 But do you know how I can ask for this kind of demand on the server, just want to go on a voice room (for an obvious question of privacy) in the server but how can I let people know that ?

[safe forge]

I would say probably ask in design chatter or figma discussions. But in my experience i dont think people would often get on a voice call

Theres often a delay, people who might would do it might not be awake or available at your time or just dont see the message. Without clear knowledge of what you need, ppl would also be less likely to say that they can help with it - they cant know if they can help unless they know the exact problem

[trail hamlet]

I wonder if you would have more luck posting on Reddit when you’re looking for someone to help with a specific problem

[safe forge]

I think if you have a specific problem reddit can be a place, but i also think that lots of questions are being answered here as well. I have also posted in the figma help forum before and my questions were always answered or validated by the community that it is a problem

I think it is harder to find help if the question is more generic (eg hey can someone help me? Im lost) because potential helpers dont have enough context.

Or if you are looking for someone to talk to you in a voice chat because that requires things to be synchronous (whereas just chatting can be asynchronous), or because people cant or dont want to do voice chat.

In those cases i dont think that reddit is any better

@high ermine in case you dont find anyone to help you, feel free to add your questions here

[high ermine]

Already do a post on reddit but, cant reach a good answers there. Thanks for mentionning it 🙂

[high ermine]

Thank you for the clarification I'm not use to forum so your explaination are very welcome Mai !

[high ermine]

Well, I've tried to solve this with several developers I know but no one claim victory on it.

This is the actual update

So with the great answers Mai gives me I have accomplish this

The Blue switch activate all the Red switch ( this one is done correctly, nothing to say )

I have partially accomplish this

The Red switch disable the Blue switch

Explanation : Normally if the Red is switching from On to Off then the Blue pass Off BUT in my case it does when the Red is switching from Off to On AND I haven't find anything to achieve this in the good order.

Actually I loose interest in the Green and Button part if cant make work correctly the Blue & Red part.

I'm at a point where I wonder if there is problem with the feature, surely not but its reassuring me to think about

So I'm not likely to ask this habitually but if someone can show me the answer on my file or can do it on his file and share with me I would be very grateful

Kiss kiss love love ❤️

[safe forge]

Is this basically this part?

If any of the "red switches" are turned off, then the "blue switch" should also turn off.
:

This is a bit confusing to me :

‘Explanation : Normally if the Red is switching from On to Off then the Blue pass Off BUT in my case it does when the Red is switching from On to Off AND I haven't find anything to achieve this in the good order.’

I think the part before the BUT is the same as the part after the BUT? Could you clarify what the difference is there?

And what have you tried to do?

[high ermine]

A lot of different pseudo code in the conditions, I tried to change the syntax and move the variables order but nothings work when it works its not in the right way and when I try to apply the logical to reverse it then it wont work.

[safe forge]

so is basically what you want is that if a red button is turned off, the blue switch turns off?

[high ermine]

I rectified this thank you its "Explanation : Normally if the Red is switching from On to Off then the Blue pass Off BUT in my case it does when the Red is switching from Off to On AND I haven't find anything to achieve this in the good order. "

[safe forge]

i assume that in your thing you need to switch it somewhere

[high ermine]

I upload an image like we said in my country a little draw is better than a thousand word

[safe forge]

on all red switches u basically just want:

if (red){
set red to false
set blue to false
}

so eg on red1, you would do

if(red1){
set red1 to false
set blue to false
}

for red2, you would do the same, but instead of red1 it would say red2

basically:

if(red1) - means that if red1 is turned on

then

set red1 to false - turn red1 off

set blue to false - also turn the blue one off

[high ermine]

I've tried this but just to make it sure i'll do another try

[safe forge]

it would be helpful if you could show what interactions you added in

maybe if something is misconnected or mispelled, that could cause an issue also

[high ermine]

I've tried so many things and I think some of the last lost sense 🥲

[high ermine]

This one isn't working

I can share you the file

[safe forge]

i think sometimes for these is better if you start from 0 when you start to just do random things to see if they would work

[high ermine]

So it would be more easy for you to see and understand

[safe forge]

its better to think it through then just randomly putting things in

[high ermine]

Not randomly but I was searching for a logical and sometimes it was far fetched

[safe forge]

right, i mean it is still not random, but once it gets too much, sometimes its better to start from 0

[high ermine]

Yep I've create many page to do thi as well

Do you mind if I show you from scratch on Figma ?

[safe forge]

sure, just send me the link

with edit access and i can look at what you have done

it doesnt have to be from scratch

whatever version is okay.

[safe forge]

maybe this version specifically

[high ermine]

I've send it to you MP

[safe forge]

okay

[safe forge]

i found the problems

for one, you dont need the interactions here

these on-clicks interfere with the other on-click

you can only have a type of interaction on one level. either in the component set or on the instances

but since you need different interaction for each red switches, you cant have it in the component set

[high ermine]

Oh okay

[safe forge]

problem number 2:
you shouldnt have change to here but set variable

as mentioned before

if you make those changes, it works

[high ermine]

Mai I can't thank you enough for all your hard work and dedication to help solve this problem.

@safe forge I just wanted to say a big thank you for all the help you provided in resolving my issue. Your assistance was truly awesome and made a huge difference. Without your support, I would have been completely lost.
Thanks once again for your help. You're fantastic, and I'm lucky to have crossed paths with you.

[safe forge]

no problem! Glad it worked out 😄 good luck on the rest!

[high ermine]

I'm really happy to announce that everything that needed to be done, has been done! I'm sharing with you the complete solution to my problem, in the hope that it will be of use to others. Once again I'd like to thank you Mai, it's thanks to people like you that communities evolve in the best conditions. Best regards ❤️