Figma variables and Conditional logic issue

Hi Friends,

Using variables in Figma I am attempting to have a checkbox disable/enable other checkboxes. I have this partially working by setting a variable which is assigned to the checkboxes I wish to disable. I have 3 instances in my Checkbox component. 1) Checked 2) Disabled and 3) Default. Easy.

However, when I try to switch to conditional logic to build the check on check off functionality it does not work and I am going in circles. Does anything look incorrect with my logic? I think something must be wrong.

(I’d like to post my project, but the system won’t let me because I am a new user.)

Any help would be truly appreciated.

Thank you.

Not exactly sure how you have this setup, but based on the conditional logic you shared, I found some potential issues.

@Doug_Stackhouse

Was looking into this a little more and put together this example. As with all things in Figma, there are likely many other ways to go about this, so hope this helps.

View Prototype
Get Example File

1 Like

Thank you @Nate_G !!!

What a huge help! Can I buy you a coffee?

1 Like

Hi @Nate_G is there a trick to making this work in a component instance? (component instance in a component instance)

I have table component with multiple instances. In each instance I want to have a checkbox component instance. Figma is not giving me the option to assign a variable to the checkbox when I place it inside a component instance.

Thank you.

Sadly, variables can only be applied to top-level instances, but I hope that will change in the near-future :frowning:

I put together this example file a while back on the above issue along with some ideas around how you can use booleans variables as a “fix”.

I also have another example file that may help, as it relates to tables and checkboxes.

Thank you again @Nate_G! I ended up removing my 8 tables from the component to simplify things.

Having said that, I believe I have uncovered a bug with the variables. I had the checkboxes working wonderfully. Everything was perfect. Until…

I added a boolean to turn on/off the required field asterik. The checkboxes quit enabling/disabling as per your first example. This was going to be a quick win.

For a while, I thought I was going insane.

So, I built up the solution again and was careful to test with every bit of variable code that I added. I had the checkboxes enabling/disabling and I could hide the asterik, but when I placed the code to show it in the “else” clause to show it, the checkbox enable/disable quit working entirely.

No problem, right? Just remove the asterik show/hide code. No go. Solution broken. I suspect there is code that I am unable to see that is causing the problem, but I’m not the expert.

At this point, I’m forced to work on another approach because the deadline I am under draws nearer.

@Doug_Stackhouse Looks like there has been an update!

Nested instances
Now, string variables can be bound to a nested instance’s variant properties, rather than only parent instances.