What is a Detached Instance in Figma?
A detached instance is a Figma component instance that has been disconnected from its main component, losing the ability to receive updates when the source component changes.
Why Detached Instances Are Problematic
When a designer detaches an instance, it becomes a standalone group or frame. This breaks the link to the main component, meaning any updates to colors, spacing, or structure won't propagate. Over time, this creates visual inconsistencies across your product—buttons that look slightly different, cards with mismatched padding, or typography that drifts from your design system standards.
Common Causes of Detachment
Detachment typically happens when designers need to make changes that component properties don't support, when copying elements between files without proper library setup, or when working under time pressure and taking shortcuts. Sometimes detachment is accidental—a designer may not realize they've broken the component link.
How to Find Detached Instances
Manually finding detached instances requires comparing your designs against the component library frame by frame—a tedious process in large files. Design system teams often discover detached instances only when inconsistencies appear in production. Automated auditing tools can scan entire Figma files and flag detached instances instantly, with deep links to the exact location in your design.
Prevention Strategies
Build components with flexible properties that reduce the need for detachment. Use component variants for different states. Establish clear guidelines about when detachment is acceptable (rarely) versus when designers should request new component variants. Regular audits help catch detachment early before it spreads.
Automate Your Design System Audits
ComponentQA automatically detects issues like this across your Figma files. Get actionable insights with deep links to fix issues where they live.