Figma variables and Conditional logic issue

Ask the community
1

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.

image
image289Ă—705 23 KB

(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.

2

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

image
image984Ă—1350 139 KB

3

@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
4

Thank you @Nate_G !!!

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

1 Like
5

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.

6

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

image
image1380Ă—1096 61.3 KB

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.

7

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.

8

@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.