ComponentSetUIEnhancer

About this plugin

Component Set UI Enhancer — a plugin designed to streamline your workflow with Component Sets in Figma.

How it works:

1. When launched, the plugin asynchronously loads all document pages to correctly gather information about Component Sets.
2. The plugin UI includes buttons to expand or minimize the main window.
3. After scanning the document, the main window populates with buttons representing all detected Component Sets.
4. You can use the built-in search bar and sort options to quickly locate the desired set.

Interacting with Component Sets:

1. When you click (or navigate with the keyboard) on a Component Set button, a secondary window opens, dynamically displaying buttons for each Variant within that set.
2. If a Variant contains an identifiable vector icon, it will appear beside the Variant name; otherwise, a default icon will be used.

Variant button behavior:

1. No selection on the canvas: creates a new Instance of the selected Variant in the center of your viewport.
2. Instance of the same Component Set selected: replaces the selected Instance with the chosen Variant.
3. Other selection (different set, non-Instance, or multiple nodes): no action is performed.

Extra feature:


When the main plugin window is expanded, selecting an Instance on the canvas automatically highlights the corresponding Component Set button (using the :focus state).

Variant window:


The Variant selection window also includes its own search bar and sort controls for quick navigation.



Code for plugin available at https://github.com/mrkoss1985/COMPONENTSETUIENHANCER