How to fix inconsistent components in Figma
Introduction
Over time, design files accumulate 'cruft'. You might have three different 'Primary Button' components created by three different designers. This fragmentation leads to confusion and a disjointed user interface.
This guide provides a strategy for auditing and consolidating your component library.
Guide Steps
The Problem: Duplicate components
You search for 'Card' in the assets panel and find four different versions. You don't know which one is the source of truth.
The Solution: Audit and Merge
Place all versions side by side. Choose the best-constructed one (using Auto Layout). Rename it clearly. Then, use a plugin like 'Master' or 'Instancelocator' to find instances of the *old* components and replace them with the *new* one. Delete the old masters.
The Problem: Override failures
You swap a component instance, but the text content resets to 'Lorem Ipsum' instead of keeping your custom text.
The Solution: Match layer names
Figma preserves overrides based on layer names. Ensure that the text layer in 'Component A' is named 'Label' and the text layer in 'Component B' is also named 'Label'. If they match, the text content will carry over when you swap.
What to avoid
Avoid detaching instances just to make a quick fix. If a component doesn't work for a specific case, create a variant or update the master, but try to keep it linked.
Pro-Level Design Tips & Workflows
💡 Slashes Nomenclature: Name your master assets with slashes (e.g., button/primary/hover) to allow Figma to automatically group them as states of a single Variant set.
💡 Inherit Properties: Minimize structural variations. Instead of adding new instances, toggles should be defined via Boolean property fields on the original parent layout.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.