Overriding instance properties in Figma - Step-by-Step Guide

Introduction

Overriding instance properties lets you change parts of a component copy without changing the original. This helps customize repeated elements quickly while keeping design consistency.

When you want to change text or colors in a button used many times without editing the main button component

When you need to adjust an icon size or color inside a repeated card layout

When you want to swap images in a photo frame component for different content

When you want to hide or show certain parts of a component instance for specific screens

When you want to tweak spacing or alignment inside a repeated layout without breaking the master design

Steps

Step 1: Select the instance of the component you want to customize

- Canvas or Layers panel

The instance is highlighted and its properties appear in the right sidebar

Step 2: Click on the property you want to override, such as text, color, or image

- Right sidebar under Properties panel

The property becomes editable or shows options to change

Step 3: Edit the property value directly, for example type new text or pick a new color

- Right sidebar property field

The instance updates immediately with your changes without affecting the main component

Step 4: If needed, repeat for other properties you want to override

- Right sidebar Properties panel

Each overridden property updates only on this instance

Step 5: To reset an overridden property back to the main component’s default, right-click the property and select Reset

- Right sidebar on the overridden property

The property value returns to the original component’s setting

Before vs After

Before

Instance shows default button text 'Submit' with blue fill color

After

Instance text changed to 'Send' and fill color changed to green, main button component remains unchanged

Settings Reference

Text override

📍 Right sidebar > Text property

Change the text shown in the instance without editing the main component

Default: Main component text

Color override

📍 Right sidebar > Fill color property

Change colors like fills or strokes on the instance only

Default: Main component color

Image override

📍 Right sidebar > Image fill property

Swap images in an instance without changing the main component

Default: Main component image

Common Mistakes

Trying to edit the main component instead of the instance

Changes affect all instances, not just one, losing customization

Select and override properties on the instance to customize individually

Overriding a property that is not exposed for override

Property cannot be changed on the instance and no effect is seen

Ensure the property is set to be overridable in the main component or use supported overrides

Not resetting overrides when wanting to revert to original

Instance keeps old override and does not update with main component changes

Right-click overridden property and select Reset to restore main component value

Summary

Overriding instance properties lets you customize copies of components without changing the original design.

You can change text, colors, images, and other properties on each instance separately.

Remember to reset overrides if you want to go back to the main component’s default settings.