Override Properties of a Component Instance

Who can use this feature?

🔒Users on  StudentProfessional and Figma Organization Plans
👤Anyone with Can Edit permissions to the File can Override properties

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.

I want to:

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
❌ Constraints
❌ Layout Grids
❌ Bounds of any Text layers

In our example below, we've changed our "Trip Card" for each holiday that we have planned.

We changed the content of our Title, Date and Status Text Objects. As well as customizing the background image and participants for each trip:

Note: We recommend renaming any layers with Overrides applied. This needs to different than the name in the original Component or Instance. This ensures we keep the override when you switch between Instances. Learn more in our Preserve Text Overrides section below.

Push Overrides to Master

If you've made an override you want to apply to other Instances, you can Push Overrides to Master.

We will then apply any changes you've made to that Instance to the Master Component. This will also affect any other Instances of that Component.

✅You can only push Overrides when the Master 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 Overrides to the Master Component:

  1. Select the Instance with your Overrides applied to it.
  2. Click on the Instance name in the Properties Panel.
  3. Select Push Overrides to Master from the options
  4. We will update the Master Component to reflect your changes.

Preserve Overrides

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 we preserve any Text Overrides, you will need to name the affected Text layers something unique. This ensures that we don'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.

Want to reset any Overrides? Check out our Reset Overrides to restore the Master Component article.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.