Swap component on a newly created Instance

Hello.

I am creating my first plugin, and i have little knowledge about programming.
I am trying to solve this issue through google and forums, but i only see stuff about the normal use of Figma as a user, not much feedback about development (Or i still don’t know how to search properly)

First let me tell you the logic, and then the problem and see if you can help me.

I am creating this plugin to be able to store my components in a well organized way.
To do this i have a component set called “Object Organizer”.

It looks a bit like this:
image

This object has a Name and a Dark and light mode.
I am able to handle those things and be able to create an instance, easily thanks to a beginners tutorial.

Now comes the tricky part. ¿See this red tag with the label “Particles”?, This is an instance of another component within “Object Organizer”.

When i launch the plugin, i get to choose a name, choose between Light or dark mode. and then select a tag to display (Module, Element, Particle… ).

I would like that the new instance i create was wearing the selected flag just fine.

For now i was able to correctly select the flags, and store them in a let variable.

Within the if you will see next, i do a switch thingie for each tag available, then i define waht component select and tag, and when this switch thing is done, i would theorically (in my mind) Create an instance of “Object organizer” and then swap the tag component to the desired one.

At first it seems it work. but in reality what it does is tht it swaps all the instance within the main component, not within the recently created instance…
At this point i am nor sure what to do next or where to look.
I just want to curl and cry :smiley:

Here the code, please note that it is my first time. Sorry

figma.ui.onmessage = async(pluginMessage) => {

    await figma.loadFontAsync({ family: "Manrope", style: "Regular" });
    const organizerComponentSet = figma.root.findOne(node => node.type == "COMPONENT_SET" && node.name == "Object Organizer (lvl3)") as ComponentSetNode;
    const labelComponentSet = figma.root.findOne(node => node.type == "COMPONENT_SET" && node.name == "Organicer Tag") as ComponentSetNode;
    const labelComponentModule = labelComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Type=Module Tag") as ComponentNode;
    const labelComponentElement = labelComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Type=Element Tag") as ComponentNode;
    const labelComponentCollection = labelComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Type=Collection") as ComponentNode;
    const labelComponentParticle = labelComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Type=Particle Tag") as ComponentNode;
    const labelComponentWidget = labelComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Type=Widget Tag") as ComponentNode;
    const labelComponentHelper = labelComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Type=Helper Tag") as ComponentNode;
    
    const instanceOrganizer = organizerComponentSet.findOne(node => node.type == "INSTANCE" && node.name == "Organicer Tag") as InstanceNode;

    let selectedVariant;
    let selectedLabel;

    // console.log(pluginMessage.name);

    if(pluginMessage.darkModeState === true){
        switch(pluginMessage.label) {
            case "2":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Dark Mode") as ComponentNode;
                selectedLabel = labelComponentElement;
                break;
            case "3":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Dark Mode") as ComponentNode;
                selectedLabel = labelComponentCollection;
                break;
            case "4":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Dark Mode") as ComponentNode;
                selectedLabel = labelComponentParticle;
                break;
            case "5":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Dark Mode") as ComponentNode;
                selectedLabel = labelComponentWidget;
                break;
            case "6":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Dark Mode") as ComponentNode;
                selectedLabel = labelComponentHelper;
                break;
            default:
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Dark Mode") as ComponentNode;
                selectedLabel = labelComponentModule;
                break;  
        }
    } else {
        switch(pluginMessage.label) {
            case "2":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Light Mode") as ComponentNode;
                selectedLabel = labelComponentElement;
                break;
            case "3":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Light Mode") as ComponentNode;
                selectedLabel = labelComponentCollection;
                break;
            case "4":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Light Mode") as ComponentNode;
                selectedLabel = labelComponentParticle;
                break;
            case "5":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Light Mode") as ComponentNode;
                selectedLabel = labelComponentWidget;
                break;
            case "6":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Light Mode") as ComponentNode;
                selectedLabel = labelComponentHelper;
                break;
            default:
                selectedVariant = organizerComponentSet.defaultVariant as ComponentNode;
                selectedLabel = labelComponentModule;
                // instanceOrganizer = organizerComponentSet.findOne(node => node.type == "INSTANCE" && node.name == "Organicer Tag") as InstanceNode;
                break;  
        }
    }

    const newObjectOrganizer = selectedVariant.createInstance();

    const templateName = newObjectOrganizer.findOne(node => node.name == "Object Name" && node.type == "TEXT") as TextNode;
    
    instanceOrganizer.swapComponent(selectedLabel)
    
    templateName.characters = pluginMessage.name;
    
    //figma.closePlugin();
}

I solved the whole thing by discussing it with chatgtp.
Since i am not very aware of what i did, (technically) i paste the code here in case it helps someone in the future.
Please feel free to ask anything.

// Get selected layer name

// Declare and initialize the layerName variable
const selectedLayers = figma.currentPage.selection;
let layerName = '';

if (selectedLayers.length > 0) {
  const selectedLayer = selectedLayers[0];
  layerName = selectedLayer.name;
};

console.log('layerName:', layerName);

// Start
figma.showUI(__html__);
figma.ui.postMessage({ type: 'setLayerName', layerName });

figma.ui.resize(400,520);

figma.ui.onmessage = async(pluginMessage) => {

    await figma.loadFontAsync({ family: "Manrope", style: "Regular" });
    const organizerComponentSet = figma.root.findOne(node => node.type == "COMPONENT_SET" && node.name == "Object Organizer (lvl3)") as ComponentSetNode;
    
    const labelComponentSet = figma.root.findOne(node => node.type == "COMPONENT_SET" && node.name == "Organicer Tag") as ComponentSetNode;
    
    const labelComponentModule = labelComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Type=Module Tag") as ComponentNode;
    
    const labelComponentElement = labelComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Type=Element Tag") as ComponentNode;
    const labelComponentCollection = labelComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Type=Collection") as ComponentNode;
    const labelComponentParticle = labelComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Type=Particle Tag") as ComponentNode;
    const labelComponentWidget = labelComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Type=Widget Tag") as ComponentNode;
    const labelComponentHelper = labelComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Type=Helper Tag") as ComponentNode;

    let selectedVariant;
    let selectedLabel;

    if(pluginMessage.darkModeState === "2"){
        switch(pluginMessage.tag) {
            case "2":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Dark Mode") as ComponentNode;
                selectedLabel = labelComponentElement;
                break;
            case "3":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Dark Mode") as ComponentNode;
                selectedLabel = labelComponentCollection;
                break;
            case "4":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Dark Mode") as ComponentNode;
                selectedLabel = labelComponentParticle;
                break;
            case "5":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Dark Mode") as ComponentNode;
                selectedLabel = labelComponentWidget;
                break;
            case "6":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Dark Mode") as ComponentNode;
                selectedLabel = labelComponentHelper;
                break;
            default:
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Dark Mode") as ComponentNode;
                selectedLabel = labelComponentModule;
                break;  
        }
    } else {
        switch(pluginMessage.tag) {
            case "2":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Light Mode") as ComponentNode;
                selectedLabel = labelComponentElement;
                break;
            case "3":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Light Mode") as ComponentNode;
                selectedLabel = labelComponentCollection;
                break;
            case "4":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Light Mode") as ComponentNode;
                selectedLabel = labelComponentParticle;
                break;
            case "5":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Light Mode") as ComponentNode;
                selectedLabel = labelComponentWidget;
                break;
            case "6":
                selectedVariant = organizerComponentSet.findOne(node => node.type == "COMPONENT" && node.name == "Mode=Light Mode") as ComponentNode;
                selectedLabel = labelComponentHelper;
                break;
            default:
                selectedVariant = organizerComponentSet.defaultVariant as ComponentNode;
                selectedLabel = labelComponentModule;
                // instanceOrganizer = organizerComponentSet.findOne(node => node.type == "INSTANCE" && node.name == "Organicer Tag") as InstanceNode;
                break;  
        }
    };

    const newObjectOrganizer = selectedVariant.createInstance();
    
    const templateName = newObjectOrganizer.findOne(node => node.name == "Object Name" && node.type == "TEXT") as TextNode;
    
    templateName.characters = pluginMessage.name;
    
    const selectedLayer = figma.currentPage.selection[0];
    if (selectedLayer) {
        const padding = 50;
        newObjectOrganizer.x = selectedLayer.x - newObjectOrganizer.width - padding;
        newObjectOrganizer.y = selectedLayer.y;
    };

    newObjectOrganizer.name = pluginMessage.name;

    console.log(pluginMessage.name);
    
    const instanceOrganizer = newObjectOrganizer.findOne(node => node.type == "INSTANCE" && node.name == "Organicer Tag") as InstanceNode;
    instanceOrganizer.swapComponent(selectedLabel);
    newObjectOrganizer.detachInstance();

    
    figma.closePlugin();
}
1 Like