Figma Instance Overrides: Local Changes, Global Components

Why it exists

Instance overrides solve the tension between consistency and context in a design system. A system needs reusable components for efficiency, but those components must adapt to different situations (e.g., a button labeled "Submit" vs. "Learn More"). Overrides allow this local customization without creating dozens of nearly identical main components.

The mental model

Think of a main component as a blueprint for a house. An instance is a specific house built from that blueprint. Instance overrides are like choosing different paint colors, light fixtures, or doorknobs for your specific house. You can customize surface-level properties, but you can't move walls or change the foundation—that's the component's unchangeable structure.

How it works

When you select an instance and change a supported property—like its fill color or text content—Figma records it as an override on that instance only. Figma attempts to preserve these overrides when you swap between variants or other components. This preservation depends on consistent layer naming. If you override the color of a layer named "Icon BG", that override will only persist on a new variant if it also contains a layer named "Icon BG".

When to use it

Use overrides for cosmetic and content changes. This includes modifying text properties (font, weight, size), changing fill or stroke colors and opacity, adding or removing effects like shadows and blurs, and swapping nested instances like icons. You can also override layer names and export settings.

When not to use it

You cannot use overrides to change a component's fundamental structure. This includes the order of layers (z-index), the position of elements within the component's frame, or any applied constraints. To make these kinds of structural changes, you must either edit the main component directly or detach the instance, which severs its link to the main.

One canonical example

You have a "Card" component with a text layer named "Title" and an image layer named "Thumbnail". You place an instance of this card in your design and override the "Title" to read "New Feature" and fill the "Thumbnail" with a specific product image. If you then switch this instance to a "Featured" variant, your text and image overrides will be preserved, but only if the "Featured" variant also has layers named "Title" and "Thumbnail".