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 Instances to remove overrides 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:
This ensures we keep the override when you switch between Instances. Learn more in our Preserve Text Overrides section below.
Push overrides to main component
If you've made an override you want to apply to other Instances, you can push your changes to the Main Component. This will also affect any other Instances of that Component.
✅ You can only push overrides when the Main 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 your changes to the Main Component:
- Select the Instance with your overrides applied to it.
- Click on the Instance name in the Properties Panel.
- Select Push overrides to Main from the options:
- Figma will update the Main 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 Figma preserves any text overrides, you will need to name the affected Text layers something unique. This ensures Figma doesn'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.