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

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

• The main component defines the properties of the element
• The instance is a copy of the component you can reuse in your designs

You can make changes to any instance of a component you add to your file. These changes allow you to customize an instance to suit its new context, or explore iterations of a design.

Apply changes

To make a change to an instance:

1. Select the instance.
2. Edit or adjust the property you’d like to change. For example, to change the fill of a layer, edit the Fill section of the right sidebar.

Supported properties

Figma lets you change text, fill, stroke, and effect properties.

You can apply the following changes:

• 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 guides
• 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 frame
• Any constraints applied to the layers
• The bounds of any text layers

For changes like reordering layers, you must detach the instance, or make the changes directly to the main component

Change preservation

Figma attempts to preserve your changes when you select a different variant or swap between instances.

Figma uses the following criteria to determine whether to preserve a change on an instance:

• The layer names of the current instance and the variant or instance you’re selecting must match. This applies both when swapping instances and selecting variants.
• When selecting variants, Figma also checks if the layer properties you’ve changed originally matched between variants. If so, Figma will preserve your changes.

In our example below, Figma preserves the fill change on Step 3, but not on Step 4. This is because the default primary button and hover primary button both started with the same fill of #1BC47D. Our change was to change the hex code from #1BC47D to #F531B3.

Figma doesn’t preserve our change in Step 4 as the hover secondary variant has a fill of #FFFFFF, which is different to the fill we applied our original change to (#1BC47D).

The criteria is less strict for preserving text changes. Figma keeps 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.

Reset changes

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

1. Select the instance to view changes for the entire instance, or a specific layer to view changes for that layer only.
2. Click More actions next to the component name in the right panel.
3. Figma opens a menu that lets you view any changes for your selection. Figma only lists properties that have changes applied.
   
   • Select  Reset > Reset [property] to reset a specific property.
   • Select  Reset > Reset all changes to reset all properties for that layer.
4. Figma resets the property to match the main component.

Push changes to main component

You can choose to push your changes back to the main component, which updates any other instances of that component.

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

1. Select the instance with your changes applied to it. You need to select the instance itself, not a specific layer within it.
2. Click More actions next to the component name in the right panel.
3. Select Push changes to main component.