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.

Practice

1. What does overriding instance properties in Figma allow you to do?

easy

A. Create a new component from scratch

B. Customize parts of an instance without changing the original component

C. Delete the original component permanently

D. Lock the instance to prevent changes

Solution

1. Step 1: Understand instance and component relationship

   An instance is a copy of a component that inherits its properties.

2. Step 2: Recognize what overriding means

   Overriding lets you change specific properties of an instance without affecting the original component.

3. Final Answer:

   Customize parts of an instance without changing the original component -> Option B

4. Quick Check:

   Overriding = Customize instance only [OK]

Hint: Remember: override changes instance, not original [OK]

Common Mistakes:

• Thinking overriding deletes the original component
• Confusing overriding with creating new components
• Believing overriding locks the instance

2. Which of the following is the correct way to override the text property of an instance in Figma?

easy

A. Double-click the instance and edit the text directly

B. Edit the original component's text

C. Right-click and select 'Detach Instance'

D. Use the 'Lock' option on the instance

Solution

1. Step 1: Identify how to edit instance text

   Double-clicking an instance allows direct editing of its text property.

2. Step 2: Understand difference from editing component

   Editing the original component changes all instances, not just one.

3. Final Answer:

   Double-click the instance and edit the text directly -> Option A

4. Quick Check:

   Edit instance text = Double-click instance [OK]

Hint: Double-click instance to change text quickly [OK]

Common Mistakes:

• Editing the original component instead of the instance
• Detaching instance unnecessarily
• Locking instance instead of editing

3. Given a component with a blue rectangle and text 'Hello', if you override the rectangle color to red in an instance, what will happen when you update the original component's rectangle color to green?

medium

A. The instance rectangle changes to green, text changes to original component's text

B. The instance rectangle changes to green, text changes to 'Hello'

C. The instance rectangle stays red, text remains 'Hello'

D. The instance rectangle stays red, text changes to original component's text

Solution

1. Step 1: Understand property overriding behavior

   Overridden properties in an instance stay as set, ignoring component updates for those properties.

2. Step 2: Apply to rectangle color and text

   Rectangle color overridden to red stays red; text not overridden remains synced with component ('Hello').

3. Final Answer:

   The instance rectangle stays red, text remains 'Hello' -> Option C

4. Quick Check:

   Overridden color stays, non-overridden text syncs [OK]

Hint: Overridden properties ignore component updates [OK]

Common Mistakes:

• Assuming all instance properties update with component
• Thinking overridden text changes automatically
• Confusing overridden and non-overridden properties

4. You tried to override the fill color of an instance, but the color did not change. What is the most likely reason?

medium

A. The fill color is locked in the original component

B. You edited the original component instead of the instance

C. The instance is detached from the component

D. You did not select the fill property in the instance

Solution

1. Step 1: Check if fill color can be overridden

   Some properties like fill color can be locked in the component, preventing overrides.

2. Step 2: Understand why color didn't change

   If locked, changing fill on instance has no effect; you must unlock in component.

3. Final Answer:

   The fill color is locked in the original component -> Option A

4. Quick Check:

   Locked property blocks override [OK]

Hint: Check if property is locked before overriding [OK]

Common Mistakes:

• Editing original component instead of instance
• Assuming detaching fixes override issues
• Forgetting to select the correct property

5. You have a button component with text and background color. You want to create an instance with a different text and a different icon image, but keep the background color linked to the component. How should you override the instance properties?

hard

A. Override all properties including background color to new values

B. Create a new component for the different text and icon

C. Detach the instance and edit all properties freely

D. Override the text and icon image properties only, leave background color unchanged

Solution

1. Step 1: Identify which properties to override

   To keep background color linked, do not override it; override only text and icon image.

2. Step 2: Understand impact of overriding background color

   Overriding background color breaks link to component updates; avoid if you want consistency.

3. Final Answer:

   Override the text and icon image properties only, leave background color unchanged -> Option D

4. Quick Check:

   Override selective properties to keep component link [OK]

Hint: Override only what changes, keep others linked [OK]

Common Mistakes:

• Overriding background color unnecessarily
• Detaching instance losing component benefits
• Creating new component instead of overriding