Detach Component Instances

Figma Plugin

ㅤ

Description

When 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 component
• See exactly how many instances of each component exist
• Selectively choose which components to detach
• Process multiple instances at once with a single click

Whether 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 Features

• Flexible 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 alphabetically
• Real-time Updates: In "Selection" mode, the component list automatically refreshes as you select/deselect objects on the canvas
• Search & Filter: Quickly find specific components by typing part of their name
• Selective Detaching: Choose exactly which components to detach and which to keep linked
• Visual Zoom: Hover over any component in the list to see a zoom button that highlights all its instances in the canvas
• Nested Instance Support: Automatically finds instances nested within frames, groups, and other containers

ㅤ

Getting Started

1. Open Your Figma File

• Open the Figma file containing the component instances you want to detach

ㅤ

2. Launch the Plugin

• Go to Plugins in the menu
• Find and click Detach Component Instances
• The plugin window will open

ㅤ

ㅤ

Choosing Your Scope

3. Select Your Search Scope

At the top of the plugin window, you'll see three scope options:

ㅤ

🅰 Selection: Only shows instances within your currently selected objects

1. This option is disabled if nothing is selected
2. The list automatically updates as you select/deselect objects
3. Perfect for working on a specific section of your design

ㅤ

🅱 Page: Shows all instances on the current page (default)

1. Scans the entire active page
2. Ideal for page-specific cleanup

ㅤ

🅲 Document: Shows instances across all pages

1. Searches your entire Figma file
2. Use this for document-wide operations

Reviewing Components

4. Review the Component List

The main area displays all components found in your chosen scope:

1. Components are listed alphabetically by name
2. Each component shows its instance count in a badge
3. The info text shows the total number of instances found
4. All components are selected by default

ㅤ

5. Use the Search Filter (Optional)

If you have many components:

1. Click the search box at the top
2. Type part of a component name to filter the list
3. Click the × button to clear the search

Selecting Components to Detach

6. Choose Which Components to Detach

You have several ways to select components:

1. Click individual components: Click any component to toggle its selection
2. Shift+Click for range: Click one component, hold Shift, then click another to select everything in between

ㅤ

Use Quick Actions:

1. Select All: Selects all components in the list
2. Deselect All: Clears all selections
3. Invert: Flips your selection (selected becomes unselected and vice versa)

ㅤ

7. Preview Component Locations (Optional)

To see where instances are located:

1. Hover over any component in the list
2. A zoom icon appears on the right
3. Click the zoom icon to highlight all instances of that component in the canvas
4. Click again to unzoom

Detaching Instances

Detach the Selected Components

When you're ready:

1. Click the Detach Selected button at the bottom
2. A progress modal appears showing the detachment progress
3. The plugin automatically closes when complete
4. You'll see a notification showing how many instances were detached
5. Review the Results

ㅤ

After detaching:

1. The former instances are now regular frames/groups
2. They maintain their visual appearance
3. They're no longer linked to the main component
4. You can now modify them independently

Tips & Best Practices

1. Start Small: If you're unsure, start with the "Selection" scope to test on a small area first
2. Use Search: For large projects with many components, use the search filter to quickly find specific components
3. Preview First: Use the zoom feature to verify which instances will be affected before detaching
4. Undo Available: If you make a mistake, use Cmd+Z (Mac) or Ctrl+Z (Windows) to undo the detachment
5. Nested Instances: The plugin automatically finds instances nested inside frames, groups, and other containers - no need to ungroup first
6. Selection Mode: When working in "Selection" mode, you can adjust your canvas selection while the plugin is open, and the list will update automatically

ㅤ

ㅤ