Following on the FigmaConfig announcements, I played around with component properties and immediately saw the benefits to reduce the number of variants and make components more flexible.
However, it looks like I can only apply boolean properties to elements that are not components. For example, if within my card component I have a button sub-component, I’m unable to apply the boolean component to the button to show/hide it easily.
Is this a bug or by design? For us, this seems to completely defeat the purpose of booleans, given that our large components are made of many instances of smaller components.
This only works for layers, when an instance is selected the only option available is “swap instance”. Would be great if visibility on / off could be made available fpr all kinds of elements (layer / frame / group / instance).
Ooof I was wrong! It’s actually available further down, did not see t right away and tried adding it to the instance…
I agree with the OP. It’s a HUGE limitation to “component properties” if we’re not able to target layers within instances of other components used in our components. Most of our components utilize “base components” per the recommendations from Figma to help manage the structure across an entire “component set”. With this limitation, the new “component properties” would be completely useless to us.
Seems like they would make those adjacent in the UI. My eye is looking for instance boolean options next to the component settings in right panel. When I look below, I see the Auto Layout section and mentally stop searching for the option. (Obviously all the new component properties features should be together, right? right??? )
Spent a good hour this morning trying to use component properties and kept running into a wall thinking that you could not use boolean and instance swap together on a component cause I didn’t see it in the UI)
Yes, you describe the problem well, it’s just not visible and I also thought layer / boolean can’t be combined. Got used to it know, it’s ok but UX could be improved.
I am sure this discussion applies to my issue as well… but I am also still wondering how to apply a boolean to an existing component set as a new property??? What the heck?
I have the same problem with @Paul_Brouwer and I don’t know how to apply boolean to my components/variant. After this update, I am a bit lost from the UI perspective.
+1, we need to be able to apply boolean props to any type of layer, not only frames / text, but also instances of components, otherwise it loses a lot of usefulness …
Thanks @shohei it took me a while even after reading the thread and your comment to figure out that it is in fact possible to apply boolean property for an instance layer inside my component.
But here’s my best attempt at explaining what he and @shohei has said.
In your component the boolean property can be applied for any layer that you want to show/hide. For example, an icon next to a button that can be enabled or disabled.
So you can take that existing component set, and within one of the variants, select the layer that you will want to enable/disable.
Then go to the Design panel on the right, scroll to the ‘Layer’ section.
Just above the eye icon for visibility control, you will see the icon that looks like a line ending in a dot inside the component rhombus. This is the ‘Apply boolean property’ button.
When you click on it, you should see the create component property modal that Shohei shared in the screenshot above. Once you create the property, you can drag out an instance of that component/variant and use the boolean toggle to how/hide that layer.
When giving properties to “mother component” do not select “Boolean” but select “Variant”, then for every instance, just type: “true” or “false” when giving values.
Be careful!
Do not change even case. You need just these two words. When all variants are finished, the list must remain { true, false} and NOT{True, true, FALSE}.
If you do it right, then when you “play” with the components, the variable will be a switch!
I still don’t see a solution for the problem OP mentioned. Boolean cannot be applied for a sub-component variants- made using a base component. Which I would guess is a huge problem for most design systems in Figma.
)