Component overrides let you customize individual instances without breaking the link to the main component. Change text, swap nested components, hide layers, and modify properties while still receiving updates.
What Can Be Overridden
- Text Content - Change label, title, body text
- Instance Swaps - Replace nested components
- Visibility - Show/hide layers
- Fill/Stroke Colors - Change colors
- Properties - Exposed component properties
Overriding Text
- Select the instance
- Double-click to edit text directly
- Or use the Overrides panel
- Text updates, link maintained
Text overrides appear with a different color in the panel.
Swapping Nested Instances
- Select the instance
- Find the nested component in Overrides panel
- Click the swap icon
- Choose replacement component
Great for: Icons, avatars, badges, states.
Hiding Layers
- Select the instance
- In Overrides panel, find the layer
- Click the eye icon to toggle visibility
- Hidden layers don't affect layout (with Auto Layout)
Use for: Optional elements, state variations.
Component Properties
Main component can expose properties:
- Boolean - Show/hide toggle
- Instance Swap - Component selector
- Text - Text content field
- Variant - Switch between variants
Properties appear in the Properties panel when instance selected.
The Overrides Panel
Shows all overridable content:
- Hierarchical list of nested elements
- Text fields for content
- Swap controls for nested components
- Visibility toggles
- Reset buttons per override
Override Indicators
- Blue dot - Item has overrides
- Different text color - Text was changed
- Crossed eye - Layer is hidden
Resetting Overrides
Reset Single Override
- Right-click the overridden item
- Choose "Reset to Component"
- That property returns to main value
Reset All Overrides
- Right-click the instance
- Choose "Reset All Overrides"
- Instance returns to main component state
Preserving Overrides
Overrides are preserved when:
- Main component is updated
- Component is moved to library
- Document is duplicated
Overrides break when:
- Overridden layer is deleted from main
- Layer is renamed in main component
- Instance is detached
Best Practices
- Name layers descriptively for easy overriding
- Expose frequently-changed properties
- Use consistent naming across variants
- Group related overridable elements
- Test overrides after component updates
Tips
- Use properties for common customizations
- Don't detach just to override - check overrides first
- Review overrides before major component updates
- Use variants for different states instead of overrides