Skip to main content

Inherit variants on components

  • November 29, 2021
  • 4 replies
  • 4081 views

Roger_Junior

I’ve been using components a looot creating a design system for the company I’m working and there were a lot of cases where I found would be useful to have my components inheriting some variant/variable. Here are some examples:

Inherit style


I would like to put a button and not worry if it is a normal/success/danger button. I should put at the parent container some variable Style: danger and then have all components that have the Style property update automatically.

Inherit theme
Similar to the example above, it would be nice if you could have the parent container with a Theme property and then this would cascade down to all components that also have this property, so creating Light/Dark themes would be faster.

Inherit small properties
There’s a button component with an Icon Slot, this icon should have a default size of 24px but every time I update the icon the value resets to the default icon size (instead of the icon size ON THE BUTTON). In this case, the Size property on the icon should inherit a Size property on the button (or on the Icon slot)

Inherit logic
There are cases where you have a main variable to the whole frame, for example: “Logged in/Logged out”, but only a few components would change by this variable. That way instead of duplicating the frame/big component and then manually changing the variant for every small component you would only input the information once on the parent container and the logged in/logged out variable would cascade down to all components automatically.

I know this isn’t really a dealbreaker, but I can see how this could open endless possibilities and at the same time boost productivity for larger and complex projects.

Do you guys have faced any similar situations before?

This topic has been closed for replies.

4 replies

Klesus
  • 237 replies
  • November 30, 2021

I think what you’re looking for can be (if not fully, then at least partially) solved with nested components.
I would link a YouTube video but that’s not allowed.
If you want to look it up it’s on Figma’s YouTube channel, titled “Figma in 5: Design Systems: Components”. There’s a chapter for nested components.


Roger_Junior

The thing is, I would still need to go through each child component and change this property manually. The idea is to have a property that inherits a value from its parent automatically.


Klesus
  • 237 replies
  • December 13, 2021

Is this not what you speak of?

If not, can you share a file?


  • 0 replies
  • January 12, 2022

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings