Expose/hide nested instances -> at component property level

+1 it’s super needed when building complex design system components, with multiple atoms inside a larger component. Now it’s easy design consumers can break the molecule by changing specific props in the atom that shouldn’t be accessible.

2 Likes

Agree. Adding “_” before property name would be a very nice feature.

Having a ton of unnecessary properties in the component panel quickly get’s to a point where DS users come into a tl;dr mode, which drastically reduces component acceptance.

The solution could be so simple

  • if checked, add toggle icons for nested properties to hide or show.
  • even sub-properties from further nested components should be reflected there: toggle a property with nested sub-properties should add another expandable level for it
2 Likes

+1
cant stress enough, how needed this is :smiling_face_with_tear:

This missing feature has become even more glaring to me with Figma UI3.

UI3 seems to default to collapsing the properties of any nested components, which makes them less discoverable to design system consumers.

I realize that what I ultimately want is a way to in some way, shape or form elevate certain nested component properties to be “first-class citizen” properties of the parent component (e.g., the text and icon swap properties of a nested button component).

And UI3 (presumably in a bid to make the cascade of nested component props less overwhelming overall) pushes in the opposite direction, instead making all nested component properties very much second-class citizens that you will only find if you know to look for them. (And, in cases where a parent component has multiple nested components, you may need to hunt.)

I can imagine a few potential solutions to my needs:

  • Allow the values of component properties to be configured to pass through and used as values for nested components (e.g., configure a nested component text property to use the value set to a text property in the parent; allow component consumers to select a state variant by name in the parent component and configure it to cascade down to the state variants of nested components)
  • Allow properties of nested components to be selected to be ‘promoted’ to the top of the component property stack where they can live alongside the parent properties (albeit probably with some sort of visual/textual indication that they’re scoped to a specific subcomponent)
  • Allow properties of nested components to be optionally hidden completely in the scope of the parent component (their values being ‘hard-coded’ in the master component and unavailable to consumers at the instance level)
  • Allow specific nested component properties to be set to expanded by default in the properties panel (with other nested properties hidden behind something like a “See all” link)
3 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.