Skip to main content
Jairo
March 14, 2024
Solved

Figma Plugin: Move component to a section

Hello.
First of all, i want to clarify that i have not a lot of knowledge in plugin development nor programing in general. But with the help of GPT4 i manage to do my little stuff here and there.

I just created a small plugin that moves the selected object to an autolayout frame that stores discarded components and stuff:

// This is a sample function wrapper for plugin logic
function moveToBrokenToys() {
  const selection = figma.currentPage.selection;

  if (selection.length === 0) {
      figma.closePlugin("Please select an object to move to 'Broken Toys'");
      return;
  }

  const theVoidPage = figma.root.children.find(page => page.name === "🌌  The Void");

  if (!theVoidPage) {
      figma.closePlugin("'🌌  The Void' page not found.");
      return;
  }

  const brokenToysSection = theVoidPage.children.find(frame => frame.name === "Broken Toys" && frame.type === "FRAME");

  if (!brokenToysSection || !(brokenToysSection.type === "FRAME" || brokenToysSection.type === "GROUP")) {
      figma.closePlugin("'Broken Toys' section not found in '🌌  The Void'.");
      return;
  }

  selection.forEach(node => {
      // Check if node.parent exists and if brokenToysSection is a FrameNode or GroupNode to access 'children'
      if (node.parent && ('children' in brokenToysSection)) {
          // TypeScript still needs assurance that 'children' is a valid property of brokenToysSection
          const brokenToysChildren = (brokenToysSection as FrameNode).children;
          
          if (node.parent.id !== brokenToysSection.id) {
              const index = brokenToysChildren.length;
              // Append the node to "Broken Toys"; TypeScript requires casting for appendChild
              (brokenToysSection as FrameNode | GroupNode).appendChild(node);
              node.x = brokenToysSection.x + (index * 100); // Adjust positioning as needed
              node.y = brokenToysSection.y;
          }
      }
  });

  figma.closePlugin("Selected object(s) moved to 'Broken Toys'.");
}

// Call the function when the plugin is run
moveToBrokenToys();

I would like to not move them inside an autolayout frame, but inside a Section.
PRoblem is that GPT doen’t know how to do it since its knowledge is from before sections where introduced.

Can someone help me?

Thanks!

This topic has been closed for replies.
Jairo
JairoSolution
March 15, 2024
// This is a sample function wrapper for plugin logic
async function moveToBrokenToys() { 
    const selection = figma.currentPage.selection;
  
    if (selection.length === 0) {
        figma.closePlugin("Please select an object to move to 'Broken Toys'");
        return;
    }
  
    const theVoidPage = figma.root.children.find(page => page.name === "🌌  The Void");
  
    if (!theVoidPage) {
        figma.closePlugin("'🌌  The Void' page not found.");
        return;
    }
  
    await theVoidPage.loadAsync();
  
    const brokenToysSection = theVoidPage.children.find(node => node.name === "Broken Toys" && node.type === "SECTION");
  
    if (!brokenToysSection || !(brokenToysSection.type === "SECTION")) {
        figma.closePlugin("'Broken Toys' section not found in '🌌  The Void'.");
        return;
    }
  
    selection.forEach(node => {

        if (!node.name.startsWith("Old-")) {
            node.name = "Old-" + node.name;
        }

        if (node.parent && ('children' in brokenToysSection)) {
            const brokenToysChildren = (brokenToysSection as SectionNode).children;
            
            if (node.parent.id !== brokenToysSection.id) {
                const index = brokenToysChildren.length;
                (brokenToysSection as SectionNode).appendChild(node);
                node.x = brokenToysSection.x + (index * 100); // Adjust positioning as needed
                node.y = brokenToysSection.y;
            }
        }
    });
  
    figma.closePlugin("Selected object(s) moved to 'Broken Toys'.");
  }
  
  // Call the function when the plugin is run
  moveToBrokenToys();
  

1 reply

Jairo
JairoAuthorSolution
March 15, 2024
// This is a sample function wrapper for plugin logic
async function moveToBrokenToys() { 
    const selection = figma.currentPage.selection;
  
    if (selection.length === 0) {
        figma.closePlugin("Please select an object to move to 'Broken Toys'");
        return;
    }
  
    const theVoidPage = figma.root.children.find(page => page.name === "🌌  The Void");
  
    if (!theVoidPage) {
        figma.closePlugin("'🌌  The Void' page not found.");
        return;
    }
  
    await theVoidPage.loadAsync();
  
    const brokenToysSection = theVoidPage.children.find(node => node.name === "Broken Toys" && node.type === "SECTION");
  
    if (!brokenToysSection || !(brokenToysSection.type === "SECTION")) {
        figma.closePlugin("'Broken Toys' section not found in '🌌  The Void'.");
        return;
    }
  
    selection.forEach(node => {

        if (!node.name.startsWith("Old-")) {
            node.name = "Old-" + node.name;
        }

        if (node.parent && ('children' in brokenToysSection)) {
            const brokenToysChildren = (brokenToysSection as SectionNode).children;
            
            if (node.parent.id !== brokenToysSection.id) {
                const index = brokenToysChildren.length;
                (brokenToysSection as SectionNode).appendChild(node);
                node.x = brokenToysSection.x + (index * 100); // Adjust positioning as needed
                node.y = brokenToysSection.y;
            }
        }
    });
  
    figma.closePlugin("Selected object(s) moved to 'Broken Toys'.");
  }
  
  // Call the function when the plugin is run
  moveToBrokenToys();