Figma Feature Highlight: Component Overrides | Figma Blog

Figma’s component overrides let designers balance consistency with contextual flexibility. Designers can customize individual instances—such as changing text, colors, effects, or visibility—without detaching them from the original component. This means updates to the parent component continue to propagate while preserving each instance’s unique changes.

Balancing Consistency and Flexibility

• Design systems rely on reusable components such as lists, avatars, buttons, and status bars.
• Real interfaces still require variations based on context, including different text, colors, and interaction states.
• Overrides avoid rebuilding these variations from scratch or breaking instances away from their shared component.

How Component Overrides Work

• An instance remains connected to its parent component after properties are changed.
• Parent-component updates continue to flow into the instance.
• Customized properties remain distinct in that particular instance.
• Overridable properties include:
  • Colors, fills, opacity, and blend modes
  • Text and type alignment
  • Strokes and styles
  • Effects such as shadows and blurs
  • Visibility

Practical Design Examples

• Information lists: Create one cell component, then override the text in each instance with unique data.
• Button states: Use one button component and alter its background, opacity, shadow, or other properties for hover, pressed, or inactive states.
• Address books: Reuse a circular avatar component while overriding its fill with different profile photographs.
• Creative compositions: Multiple flipped and duplicated instances can be combined into effects such as a kaleidoscope.

Creating a Kaleidoscope

• Convert an illustrated frame into a component.
• Duplicate instances to the right and below, flipping them horizontally or vertically.
• Place a final duplicate in the remaining space to form a 2×2 arrangement.
• Edit the original component and watch the changes appear across the connected instances.

Component overrides are most useful when a design system needs reusable foundations without eliminating meaningful variation. Use shared components for structure, then apply overrides for content, states, and context-specific styling.