When we make a change to a property in a single Instance, we call this an Override.
You can use Overrides to create variations of a Component. e.g. changing the text in a button, or creating different states of a Component.
Looking for how to reset overrides? Try our Reset Overrides to Restore a Master Component article.
Override a Component
Overrides allow you to make changes to:
✅ Text: Font, Weight, Size, Line Height, Letter Spacing, Paragraph Spacing, Indentation.
✅ Color/Paints: Fill (including Images, GIFs and Gradients), Stroke, Background Color, Opacity.
✅ Effects: Drop Shadow, Inner Shadow, Layer Blur, Background Blur.
It's not possible to make changes to:
❌ Position of any layers within the Component
❌ Layer order
❌ Layout Grids
❌ Bounds of any Text layers
In our example below, we've changed both the icons and the labels in our buttons:
Note: Looking for how to reset overrides? Try our Reset Overrides to Restore a Master Component article.
This ensures we keep the override when you switch between Instances. Learn more in our Preserve Text Overrides section below.
Push Overrides to Master
If you've made an override you want to apply to other Instances, you can Push Overrides to Master.
We will then apply any changes you've made to that Instance to the Master Component. This will also affect any other Instances of that Component.
✅You can only push Overrides when the Master Component is in the same File
❌ It's not possible to push Overrides to Components in a published Team Library
❌ It's not possible to push Overrides to nested Components
To push Overrides to the Master Component:
Select the Instance with your Overrides applied to it.
Click on the Instance name in the Properties Panel.
Select Push Overrides to Master from the options:
We will update the Master Component to reflect your changes.
When swapping between Instances, you may want to preserve the Overrides you've applied.
At the moment, we can only preserve Text Overrides. We won't keep any other Overrides - such as Colors and Effects - when you swap an Instance.
To make sure we preserve any Text Overrides, you will need to name the affected Text layers something unique. This ensures that we don't replace those overrides with the Text layers of the swapped Component.
There are a few ways to rename a layer:
- Double-click on the layer in the Layers panel to edit the layer name.
- Right-click on the layer in the Layers panel and choose Rename Layer.
- Use the Keyboard Shortcuts:
- Mac: Command-R
- Windows: Ctrl + R
- Rename Layers in Bulk
Tip! If you have applied an override to a specific Instance, copying that Instance will also copy the overrides.