Component libraries define and outline the ideal implementation of a design system.

These components often contain generic information which designers will need to change, like the text on a button or the contents of a menu.

Overrides are changes you make to the properties of a single instance. They allow you to customize an instance to suit its new context, or explore iterations of a design.

Figma will record the changes you make to an instance and preserve them, even when you swap between instances or select different variants.

Supported properties

Figma supports overrides to text, fill, stroke, and effect properties. This allows you to make changes to the more superficial aspects of an instance.

You can apply the following overrides:

• Change text properties, including font, weight, size, line height, letter spacing, and resizing
• Change the fill or stroke of any layers, including the fill type, value, and opacity
• Add, edit, or remove any shadow or blur effects
• Add, edit, or remove layout grids
• Swap nested instances of other components, like icons
• Add, edit, or remove export settings
• Change the layer name

It's not possible to make changes to the underlying structure of an instance. You can't override:

• The order, or z-index, of any layers within the instance.
• Position of any layers within the component, including items in an Auto Layout.
• Any constraints applied to the layers.
• The bounds of any text layers. You can still change a text layer's resizing properties.

Preserve overrides

Figma will attempt to preserve your overrides when you select a different variant, or swap between instances in the Instance menu.

Figma uses the following criteria to determine whether to preserve an override:

• Layer names and hierarchy need to match between the current instance and the variant or instance you're selecting. This applies both when swapping instances and selecting variants
• When selecting variants, Figma will also check if the layer properties you’ve overridden originally match between variants. If so, Figma will preserve your overrides.

The criteria is less strict for preserving text overrides. Figma will keep any changes you've made to text layers if the name of the text layer is the same between components. Figma will also check if the text layer's hierarchy is similar.

Push overrides to main component

You can choose to push your overrides back to the main component. This will apply your overrides to the main component, which will then update any other instances of that component.

You can only push overrides if the main component is in the same file as the instance. It's not possible to push overrides to components in another file, including published libraries.

1. Select the instance with your overrides applied to it. You'll need to select the instance itself, and not a specific layer within it.
2. In the right sidebar, click the next to the component name.
3. Select Push overrides to Main from the options.
4. Figma will apply your overrides to the main component.

Reset overrides

Reset the instance to restore the properties of the main component. You can choose to reset the entire instance, or just a specific property.

View any overrides for your current selection in the in Instance section of the right sidebar. From there, you can reset overrides for an individual property, or for the entire instance.

• Select the entire Instance to view and reset overrides for the entire instance.
• Select a specific layer to view and reset overrides for only that layer.

1. Select the instance to view overrides for the entire instance, or a specific layer to view overrides for that layer only. Hold down the modifier key to selected a nested layer:
   • Mac: ⌘ Command
   • Windows: Ctrl
2. In the Instance section of the right sidebar, click the icon.
3. Figma will open a menu that allows you to view any overrides for your selection. Figma will only list properties that have overrides applied.
   • Select Reset [Property] to reset a specific property.
   • Select Reset All Overrides to reset all properties for that layer.
4. Figma will reset the property to match the main component.