I was excited for the new Component Properties and how they might simplify my components, but I haven’t been able to make much use of it because most of my components involve nested components, which the Component Properties can’t control.
For example: Suppose you have a Modal component, which has within it a Button component. You may want the Modal component to have a Component Property for the Button’s CTA text - but that’s not possible. It is possible to override the visibility and text within nested components, so it seems like Component Properties should be able to control this.
Also, I’ve already built countless components so that all of the variants are based on one master component. Component Properties can’t be used for these at all since they’re entirely nested components. If I detach all the instances, I’m worried that will undo all of the overrides in designs when the component is published.
Hopefully a future update will allow Component Properties to control nested components.
I’m sad to see there’s no real answer form the Figma team on whether this is a “maybe”. There’s a lot of potential if they can get Properties on nested components, I too wish we could use the master component to control so many other versions. For now we just have so many duplicates if we want booleans. Not ideal.
a welcome improvement!
Reminder to those using a master component for variants:
You can only apply component properties to the master, not the component/variants set (which makes sense)
As a result, you’ll still need to click into your nested components to make those variant property adjustments… Essentially your variant properties remain a level above your master component properties.
A small but obvious sacrifice in order to have full control of nested components (at a higher layer level) I’d say.
Note: I tested this quickly so please feel free to correct any errors
UPDATE to step 2: Select your variant set and click Properties “+” and select Expose properties from - Nested instances see @Nate8post below, this will expose those master component properties as well. (i.e. No longer need to click into your nested component to make adjustments.)
It would be good to have the possibility to select which of the properties of the nested components should be displayed. Currently all properties of the nested components are displayed in the right side panel. Especially when reusing basic components, it is sometimes necessary not to offer certain properties for selection at all.
I found out that I can influence the order via the layers. However, it is difficult to organise the complete design layers technically so that you can have it in the properties the way you want … Unfortunately it does not always work.
Component’s property is so powerful and It would be very interesting to be able to choose exactly which property of a sub component I want to expose through a parent component. And also may be to override its name.
It could be a good way to create a nice generic components library and then during implementation (it is the way I call prototyping in Figma ) to be able to specialised thos components and to give them a more semantic meaning.
My TextBox “content” properties would become a “Description” in my new components created for a specific purpose. And also all others properties of my TextBox would be hidden because I don’t need them.
I feel like @dvaliao 's link to Figma Beta Features, no longer mentions anything about the hash #component-properties, or nested properties etc… I was confused
This Figma link describes “Expose properties from Nested instances”, which is what I was looking for!
On the “parent” master component, I add a new Property and one of the options is to “Expose properties from Nested instances” as shown in the screenshot below
a welcome improvement!
) to be able to specialised thos components and to give them a more semantic meaning.