Properties propagation is necessary to build and maintain a flexible, modular, and dynamic design systems.
For example, I’m building a TableCell component in my design system, which should support inline editing. I’d like to crate a Value property on the TableCell master component, so both states (View | Edit) retain this value when switched. I’ll use different components to render out the cell value:
- View mode - Typography (text) component
- Edit mode - TextField (input) component
I can’t implement this, unfortunately, due to the limitation described in this thread, so I have a few options:
- Use nested instances and lose the ability to propagate the master component (TableCell) Value property to the child instances (Typography, TextField), so once the state is changed, overrides (Value) are lost, and should be re-entered (manually) for each of the component states.
- Don’t use nested instances and instead put detached versions of them. In that case, I’ll need to re-implement a lot of additional logic/states from nested component, especially the TextField, on the master component (TableCell) level, eg Select option, Adornments visibility (Start | End), and different TextField states (Enabled | Hovered | Selected | Disabled), let alone the Validation states..
- Use a global variable and assign that to Value on the nested instances, but this has several (huge) drawbacks, such as:
- Creating a GLOBAL variable in the file each time I need to propagate the property value from the parent to its children
- Such va ariable will live in the scope of the design system file, and once such a component is used in some local file new Value variable needs to be reassigned and then remapped (so usability of this is < 0)
- That’s not how property propagation works in the real code components. While assigning a global variables (context) to some properties is useful for cases, such as theme change, it’s rather an anti-pattern to pass the property from the parent component to the child components.
Actually, there is an ability to create the Text property on the parent component and map to the corresponding text properties on the nested instances, but it doesn’t seem to work: it shows [object Object] as a propagated value and has no actual effect (
In my opinion, this is a crucial feature and I’m surprised this has so little traction from the Figma team in recent years. Moreover, it allignes with the common code patterns, which makes perfect sense as we now have generative AI (Make, Cursor etc) for assembling UI based on the design system components, which requires proper alignment between design component and code componens 😉
PS: I’ve gathered similar topics below, hoping it’ll get more tracktion this time 🙏🏻:
- Allow master component properties to be assigned to nested instances of components inside the master
- How to pass component property to a nested component property?
- Component Properties should have the power to control nested Components
- New text property should work through nested components
- Nested components won't allow for 'Text Property' to be applied
- Text properties of nested instances not able to override their default values?
- Nested component properties not updating with main component
