Detach Component Instances

About this plugin

DescriptionWhen working with complex Figma designs, you often need to convert component instances into regular frames to make unique modifications. However, Figma's native detach function works on individual instances only, making it tedious to detach multiple instances of the same component across your design.This plugin solves that problem by providing a centralized interface where you can:View all component instances in your design organized by componentSee exactly how many instances of each component existSelectively choose which components to detachProcess multiple instances at once with a single clickWhether you're preparing a design for handoff, creating variations from a template, or simply need to break away from a component system, this plugin streamlines the workflow and saves you valuable time.ㅤㅤKey FeaturesFlexible Scope Options: Choose where to search for instances - Current Page, Selection, or Entire Document.Smart Component List: View all components with their instance counts organized alphabeticallyReal-time Updates: In "Selection" mode, the component list automatically refreshes as you select/deselect objects on the canvasSearch & Filter: Quickly find specific components by typing part of their nameSelective Detaching: Choose exactly which components to detach and which to keep linkedVisual Zoom: Hover over any component in the list to see a zoom button that highlights all its instances in the canvasNested Instance Support: Automatically finds instances nested within frames, groups, and other containersModern UI: Clean, intuitive interface that adapts to Figma's light and dark themesㅤㅤGetting Started1. Open Your Figma FileOpen the Figma file containing the component instances you want to detach2. Launch the PluginGo to Plugins in the menuFind and click Detach Component InstancesThe plugin window will openㅤㅤChoosing Your Scope3. Select Your Search ScopeAt the top of the plugin window, you'll see three scope options:🅰 Selection: Only shows instances within your currently selected objectsThis option is disabled if nothing is selectedThe list automatically updates as you select/deselect objectsPerfect for working on a specific section of your design🅱 Page: Shows all instances on the current page (default)Scans the entire active pageIdeal for page-specific cleanup🅲 Document: Shows instances across all pagesSearches your entire Figma fileUse this for document-wide operationsㅤㅤReviewing Components4. Review the Component ListThe main area displays all components found in your chosen scope:Components are listed alphabetically by nameEach component shows its instance count in a badgeThe info text shows the total number of instances foundAll components are selected by default5. Use the Search Filter (Optional)If you have many components:Click the search box at the topType part of a component name to filter the listClick the × button to clear the searchㅤㅤSelecting Components to Detach6. Choose Which Components to DetachYou have several ways to select components:Click individual components: Click any component to toggle its selectionShift+Click for range: Click one component, hold Shift, then click another to select everything in betweenUse Quick Actions:Select All: Selects all components in the listDeselect All: Clears all selectionsInvert: Flips your selection (selected becomes unselected and vice versa)7. Preview Component Locations (Optional)To see where instances are located:Hover over any component in the listA zoom icon appears on the rightClick the zoom icon to highlight all instances of that component in the canvasClick again to unzoomㅤㅤDetaching InstancesDetach the Selected ComponentsWhen you're ready:Click the Detach Selected button at the bottomA progress modal appears showing the detachment progressThe plugin automatically closes when completeYou'll see a notification showing how many instances were detachedReview the ResultsAfter detaching:The former instances are now regular frames/groupsThey maintain their visual appearanceThey're no longer linked to the main componentYou can now modify them independentlyㅤㅤTips & Best PracticesStart Small: If you're unsure, start with the "Selection" scope to test on a small area firstUse Search: For large projects with many components, use the search filter to quickly find specific componentsPreview First: Use the zoom feature to verify which instances will be affected before detachingUndo Available: If you make a mistake, use Cmd+Z (Mac) or Ctrl+Z (Windows) to undo the detachmentNested Instances: The plugin automatically finds instances nested inside frames, groups, and other containers - no need to ungroup firstSelection Mode: When working in "Selection" mode, you can adjust your canvas selection while the plugin is open, and the list will update automaticallyㅤㅤNeed more design tools? Visit Samolevsky.com to discover more plugins and resources.