Following the designing with component composition suggested as a best practice, it is often much better to create components with other components as their children. However, I find it very difficult to follow this approach in Figma.
Consider the case of a button, with left and right optional icons (Icon component with multiple variants), optional label, and different icon-label arrangement.
The base layout component only defines whitespace and icon-label arrangement. It may have properties:
- show left icon (boolean)
- show right icon (boolean)
- show label (boolean)
- arrangement (left, center, right)
The basic button component defines the basic styles of the fill and stroke of a button (maybe corner radius too), and may have properties:
- status (normal, focused, hover, active, disabled)
- call-to-action (true, false)
- appearance (content-only, bordered, filled)
And finally, the actual Button component, which has basic button variants, and may have properties:
- theme (light, dark)
- color (default, destructive, primary-color, secondary-color)
…
Can you see where I am going with this?
By using the Button component, unless manually adding variants, I loose access to all of the goodies of the previous components. You can still access the children of (the children of) components from the left panel, and make instance overrides on them, but it’s very inconvenient when the final Button component has a few nested layers and you need to do that in many places.
Instead, I would love for Figma to add a Forward props property type on the parent component, that gives access to the properties of a selected child component.
The user is prompted to select a child component from the layers, and that component will be used.
The forwarded properties are not editable or listed in the parent component. Instead they are listed as normal properties on instances of that component. If the selected child component has forwarded props, these should be passed-through as well.
Obviously, multiple “Forward props” properties should be allowed. The list of child components should be limited to components used in a component’s variant (or in the parent component itself if it does not have variants), and should not include children of children components.
I hope you will you consider adding this, I am confident it would make a world of a difference to Figma users.
