TC Design
How do I add content into a component without having to detach it?
- Allison Batoff
When you use a component from one of our Figma libraries in your project file, you are using an instance of the main component. Instances can be detached and modified; however, this will break the link to the main component and the instance will no longer receive updates made to the component.
Simple Component Overrides
Fortunately, some attributes of a component can be overridden without having to detach the instance. Examples include updating text, hiding or showing icons, and swapping nested components. In the current version of the Telerik & KENDO UI libraries, updating text and hiding or showing aspects of the component can be done through the Layers panel. Eventually, we will update these components to leverage the component properties feature launched in May 2022.
Swapping nested components can be done by selecting the nested component layer and swapping the instance through the Component section of the Design panel.
Working with Container Components
While we want to keep our component instances linked back to the main library, we were experiencing a roadblock when using content container components. For example, when using the Tab Strip component, it was possible to replace the sample text with new text content, however, it was not possible to add any other content, like lists or buttons. This was preventing our designers from being able to use these components effectively to create page layouts without detaching the component instance.
We have reworked the Tab Strip component to use a nested placeholder component. This allows the body to be replaced with any type of content without having to detach the component instance.
How to Use
Create the body contents of your tab strip within your project file
Convert this into a local component
Bring the Tab Strip component into your project file
Select the nested Placeholder component
Swap the Placeholder component with your new local component using the Component section of the Design panel
Resources
TC Design