Skip to main content
Solved

Figma Plugin: Move component to a section

  • March 14, 2024
  • 1 reply
  • 228 views

Jairo

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!

Best answer by Jairo

// 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();
  
View original

1 reply

Jairo
  • Author
  • 50 replies
  • Answer
  • 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();
  

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings