Skip to main content
Solved

Second level component?

  • September 15, 2023
  • 1 reply
  • 227 views

MiaShi
  • New Participant
  • 4 replies

Can we have the feature like “second level component”?

In my organization, we have a standalone UI standard system. They define styles and create the components in Figma for all our teams. Each team has our own products. We will use the standards and components, but we also need to modify them to adapt our use cases. However, if we detach the instances to modify the components, we will miss the updates from our UI standards.

So, can we have a feature, that we can copy the components as the “second level component”. We can modify (add, delete, modify elements) it but not need to detach it.

Typography and color systems are the same. 😃

Best answer by Fernando_Lins

You should be able to do most of what you need (at least visually) if you create a product component using the standard component as a base. That means you’d select, for instance, your Standard_Button component and create a new component around it (Product_Button, which contais Standard_Button). Then, you can make visual changes to its style as overrides and if you change Standard_Button its changes will be passed onto Product_Button.

Of course, if your Standard_Button is already heavily styled, this will become a hassle. The correct way of doing it to there be a Base_Button that contains the very basic style settings used on all other product buttons, and then each other library that used it as a base will be able to have its own properly styled version of that base component and inherit its changes in the future.

Here’s an article on this solution.

View original
This topic has been closed for comments

1 reply

Fernando_Lins
  • New Member
  • 44 replies
  • Answer
  • September 19, 2023

You should be able to do most of what you need (at least visually) if you create a product component using the standard component as a base. That means you’d select, for instance, your Standard_Button component and create a new component around it (Product_Button, which contais Standard_Button). Then, you can make visual changes to its style as overrides and if you change Standard_Button its changes will be passed onto Product_Button.

Of course, if your Standard_Button is already heavily styled, this will become a hassle. The correct way of doing it to there be a Base_Button that contains the very basic style settings used on all other product buttons, and then each other library that used it as a base will be able to have its own properly styled version of that base component and inherit its changes in the future.

Here’s an article on this solution.


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