Hello Figma supports and Figma enthusiasts alike,
I have utilised Figma variables to come up with a technique to “lock” cherrypicked nested properties of a nested component. It’s not really locked, but gives the user a very strong indication that it should not be tampered with. Because Figma (still don’t) allow users to cherrypick what properties to show from a nested component.
This technique relies heavily on the “Instance Property Preview”-view from UI2 - but I can’t seem to find the same view in UI3. Is this a UI3 bug, an oversight or simply me not being able to find my way around the new UI3?
Nonetheless, for the curious mind, here is a step-by-step guide to the technique (or see the attached image):
-
Create a component (CompA), having a variant property with values “enabled” and “disabled”
-
Create a sub-component (CompB) with the exact same properties, except also having a text property.
-
Duplicate the variant of (CompB) multiple times inside (CompA).
Scenario: now you want 1) the entire component do be disabled or enabled from the highest level, without the user being able to disabled or enabled parts of the component. And you don’t want to hide the nested component, because you still want to 2) give user access to the text property of each nested component. Essentially because you can’t cherrypick what properties from a nested component.
-
Create two text variables, where the value is exactly “enabled” and “disabled” - matching the words used in your variants.
-
Apply these new variables to your variants of your nested components, by clicking “Instance Property Preview”-view on your main components variants.
If this technique lives somewhere else on this forum ( I was not able to find it ), please let me know - so that we can bring awareness of it and carry it over to UI3 <3.
