Hide component properties from parent instance properties

image
Here is a Select input component I am working on. The label is a separated component with different states and content property for the text.

I want the parent component to show the “label content” whereas I don’t want user to be able to change the state of the label.

I think we can have a convention where the “_” or “.” in front of the property can make it “local” to the component and not propagate up to the parent components.

Thanks

4 Likes

Might need a little more context on how you have everything structured but you should be able to specify which nested component props show up on the parent component.

I want to show specific properties from an instance, with this I can only show ALL properties from an instance, or none.

3 Likes

We are looking for this Hide specific properties from the nested instances on variant property
or
Hide component properties - #7 by Matthew_Vella

2 Likes

Any update on this ?

This is a must-have feature for any large-scale design system with multiple designers. We need ways to lock down permutations of nested components to avoid user error.

7 Likes

I think it would be really helpful, if there is a way to hide properties. I need this in a lot of complex components. Right now i have to trust the designer, that they don’t use single nested instances wrong.

4 Likes

I can’t upvote this enough. The current component model forces many hacky workarounds to approach something usable, and at best there’s some other tradeoff or invalid configuration you’ve had to expose.

This is the root of most of these problems. We need to be able to compose larger components from smaller ones, while hiding some of the implementation details of the smaller ones. This include hiding properties, changing the “recommended” instance swaps, or even limiting the instance swaps allowed.

3 Likes

Our team is working on a new design system and it’d make things so much easier if there was a way to hide specific props of nested components depending on where they are used. Otherwise, the props panel can grow unwieldy pretty fast and it would make so much sense to tailor exposed props to the specific use case.

@Figma-Team: Could you share if you’re even considering such a feature? It would really help us to decide basic questions regarding our component structure. Thank you!

3 Likes

We are also building out of design system, and I can concur that this would be super helpful to make the components easier to use and handle when creating mocks.
It could be as simple as a eye toggle so you can choose what to hide and what to show.

I like this idea as well. The workaround for me was breaking variants into separate components to prevent user error when using nested instances.

1 Like

This would be really helpful. @Melanie13 and @Brian_Heston are spot on.

Please give this to us :pleading_face:

1 Like

Another vote in favor of this capability. It would be a huge unlock in terms of balancing the power/scalability of a design system with its usability.

A current (and relatively simple) use case:

I’m building a card component that includes multiple nested button components.

I’d love to be able to expose to end users of the card component certain of the nested button components’ properties that they’ll need access to (e.g., button state variants, text property, icon swap property) while restricting/locking down other properties that would only serve to break the layout, mess up the intended hierarchy or otherwise break consistency guidelines (e.g., button size and style variants).

1 Like

Coincidentally, I just watched this presentation by Nathan Curtis from Schema 2022 in which, almost as an aside starting at the 14:14 mark, he briefly makes the case for this as a need along with a related/alternative feature idea (“forwarding” property values from a main component to its nested instances):

And maybe in the future (wink-wink, Figma) we can get to the point where we aren’t just exposing nested instances, but exposing properties within exposed nested instances. And being able to maybe forward properties from something bigger to something smaller, so that our consumers of the design system, when they’re working with a bigger unit, aren’t overwhelmed by having to configure and align all of their different knobs they’re trying to tune.

2 Likes

I will piggyback on this and say I have definitely found a need for this within our system. For example, Have a core navigation component created for my team.

Some properties are pre-defined and should be the same across all instances (ex. Menu Item A should always have “Show Right Icon” on because it’s a link). I need the ability to lock or hide, since team members should not be able to override this decision.

However, in the same component, there are properties that my team should have control over, such as changing Menu Item A from “Unselected” to “Selected”

1 Like

Keeping this open because I need this too on our design system…Hi Figma!

2 Likes

I also need this feature. My customer designers get overwhelmed by all of the options some of my larger components have.

I also have trouble where large components that are composed of smaller ones will have identical properties at multiple levels. All parts of complex components all need to be set to the same platform (“Mobile”), for example. It is necessary for me to hide those platform options at the lower levels, even if I need other properties exposed at those levels.

It is too easy for one of those to get out of synch at the wrong level, which screws up the component.

1 Like

We also need this functionality in our designsystem. One example is our Icons where user chooses Icon by typing its name so the name property needs to be exposed, but the other properties (size, strong, active) is not allowed to set.

Another feature that would solve this is the option to pass down property values from the top component to nested components. In that case we’d simply have an Icon name property on the top component that is passed down to the Icon component (very similar to how it would be coded in React for instance).

Would love this feature as well! I’m wanting to expose a nested property without showing all of the other properties within the sub component.

1 Like

Are there any updates yet? I neeeeeeeed this feature :smiley:

1 Like