Hey everyone,

I want to create a simple plugin: 

I have a frame called “Canvas” which contains all the elements that I use for a project.
I have a frame called “Design System” which contains all elements that I designed. 

Every element in both frames are instances. 

The plugin should compare both frames for the names of the instances and hide all instances from the “Design System” frame that are not also used in the “Canvas” frame. Only the ones with the same names should stay. 

This is the code: 

figma.showUI(`<p>Processing...</p>`, { visible: false });

(async () => {
    try {
        // Ensure all pages are loaded
        await figma.loadAllPagesAsync();

        // Get references to the pages
        const designSystemPage = figma.root.children.find(page => page.name === "Design System Page");
        const canvasPage = figma.root.children.find(page => page.name === "Canvas Page");

        if (!designSystemPage) {
            throw new Error("Design System page not found.");
        }
        if (!canvasPage) {
            throw new Error("Canvas page not found.");
        }

        // Switch to the canvas page and get instances
        await figma.setCurrentPageAsync(canvasPage);
        const canvasInstances = figma.currentPage.findAll(node => node.type === "INSTANCE");

        // Collect all mainComponents used in the canvas
        const usedComponents = new Set();
        for (const instance of canvasInstances) {
            const mainComponent = await instance.getMainComponentAsync();
            if (mainComponent) {
                usedComponents.add(mainComponent);

                // Add nested components used within the main component
                const nestedInstances = mainComponent.findAll(node => node.type === "INSTANCE");
                for (const nestedInstance of nestedInstances) {
                    const nestedMainComponent = await nestedInstance.getMainComponentAsync();
                    if (nestedMainComponent) {
                        usedComponents.add(nestedMainComponent);
                    }
                }
            }
        }

        console.log("Used Components in Canvas:", n...usedComponents].map(component => component.name));

        // Switch to the design system page and get instances
        await figma.setCurrentPageAsync(designSystemPage);
        const designSystemInstances = figma.currentPage.findAll(node => node.type === "INSTANCE");

        console.log("Design System Instances:", designSystemInstances.map(instance => instance.name));

        // Hide unused instances in the design system, except for "AV-orgaNotes-Webmaster"
        for (const instance of designSystemInstances) {
            if (instance.name === "AV-orgaNotes-Webmaster") {
                console.log(`Skipping instance: ${instance.name}`);
                continue;
            }

            const mainComponent = await instance.getMainComponentAsync();
            if (!mainComponent || !usedComponents.has(mainComponent)) {
                console.log(`Hiding instance: ${instance.name}`);
                instance.visible = false; // Hide the instance if its mainComponent is not used
            } else {
                console.log(`Keeping instance: ${instance.name}`);
            }
        }

        figma.closePlugin("Hidden unused design system elements successfully'!");
    } catch (error) {
        console.error(error);
        figma.closePlugin(`Error: ${error.message}`);
    }
})();
 

The Problem: 

It still keeps some instances that are not used in the “Canvas” frame and I dont understand why.

Any help is appreciated!