Skip to main content
Question

Booleans don't seem to work inside components


I have run into a bug / limitation on Boolean variables.

I created a button component with an active and a disabled state. The property to switch between them is a true / false Boolean.

I set a boolean variable #decementActive

This is used in a layout with buttons, one that increments a count upward, and another that increments down. The boolean property is tied to the #decrmentActive variable for the button that decrements.

It is set to false by default, meaning the decrement button is disabled state.

When the user clicks the increment button, it sets #decrmentActive to true and the decrement button becomes active. So far, so good.

If I convert this into a component, the boolean no longer works on this or any other button or anything else. Other assigned variables — color, numbers, strings — are fine. It strips booleans from the button and I cannot reattach them.

Is this a bug? A limitation? Am I missing something?

11 replies

Fabien_Moreno

Same here, quite a strange limitation !


halkiona
  • 6 replies
  • July 3, 2023

Same here. Not sure if it’s a bug or the way it’s supposed to work.


Petrro
  • 1 reply
  • July 3, 2023

For some reason boolean variables can be assigned to the instances only at this moment. If the instance is a part of a different set of components, the variable connection is broken and cannot be re-applied.

Example: I have a simple tree where I keep selection only to a single node using boolean variables - pretty much a straightforward turn off Row1,2,3 and 5 by clicking on Row4 etc.

The moment I want to use this tree in a bigger design, nested in a component that will have its own Variants and states, it all falls apart. Only the last instance in a chain can have boolean variables applied. Which breaks my intended ‘only one node selection’ functionality completely. And that is just one example.

Having it this way makes zero sense; pretty much all of my designs use nested components instances.
Functionalities that are intended for components lower on the Atomic Design chain will straight wont work until this is fixed. And it needs to be fixed, as I see no reason for it to be anything else but a bug.


Prabaharan_CS

Let’s Ask for this feature to be enabled, because without that reusable components are at stake. I will post this as an idea. Guys please vote @David_Putney @Fabien_Moreno


Prabaharan_CS

Have posted in Share an idea topic, please vote guys Boolean Variables Assignable inside component @Petrro @halkiona


Hi,
I’m not sure if this is my problem as well, please advise:
Inside a component I have some icons that I need to:

  1. show with different states - default, hovered and focused - I used the variants property for that.
  2. “show/hide” - I used the boolean property for that

Now, the issue I’m facing is that the boolean properties appear only for an instance of the first variant in the component set, and not for the rest of them.

I feel like I’m missing something, not sure what and already spent a while on this.


Kati_Tchilinguirov

Hey all! I found that booleans DO work inside components—but only if you have 2 variants total. One must be named “True” and the other must be named “False”.

You can also name the variant layer as such: [component name]=True

Otherwise you can only tag variants with a string value. Hope this helps!


Up. I can’t solve the problem


Brittany_Innes

Same here, I’m having the same issue as @Felicia_Birloi 🫠


Gavin_James-Weir

You LIFE SAVER.

I had 3 states in my component - True, False and ‘logo only’. Removed the Logo only state and I can now select the boolean variable.

A weird limitation on Figma’s part, but I can work around it.


JacekDynski

My solution to this annoying issue was to remove component inner state from interactions, and repeat it in the interaction that sets variable.

Before:

After:
See - “Change to” action was part of component inner state.

This is pain in the a**, but I could not find other working solution.


Reply


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