code.ts

// This plugin will open a window to prompt the user to enter a number, and
// it will then create that many rectangles on the screen.

// This file holds the main code for plugins. Code in this file has access to
// the *figma document* via the figma global object.
// You can access browser APIs in the <script> tag inside "ui.html" which has a
// full browser environment (See https://www.figma.com/plugin-docs/how-plugins-run).

// This shows the HTML page in "ui.html".
// figma.showUI(__html__);

// Calls to "parent.postMessage" from within the HTML page will trigger this
// callback. The callback will be passed the "pluginMessage" property of the
// posted message.
// figma.ui.onmessage = msg => {
//   // One way of distinguishing between different types of messages sent from
//   // your HTML page is to use an object with a "type" property like this.
//   if (msg.type === 'create-rectangles') {
//     const nodes: SceneNode[] = [];
//     for (let i = 0; i < msg.count; i++) {
//       const rect = figma.createRectangle();
//       rect.x = i * 150;
//       rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];
//       figma.currentPage.appendChild(rect);
//       nodes.push(rect);
//     }
//     figma.currentPage.selection = nodes;
//     figma.viewport.scrollAndZoomIntoView(nodes);
//   }

//   // Make sure to close the plugin when you're done. Otherwise the plugin will
//   // keep running, which shows the cancel button at the bottom of the screen.
//   figma.closePlugin();
// };


// This plugin counts the number of layers, ignoring instance sublayers,
// in the document








// let count = 0
// const files = [];

// async function traverse(node: any) {
//   if (node.fills && node.fills.length > 0) {
//     for (const fill of node.fills) {
//       if (fill.type === "IMAGE" && fill.imageHash) {
//         files.push(node);
        
//         const image = figma.getImageByHash(fill.imageHash)
//         // const bytes = await image.getBytesAsync()
//         console.log(image)
//         // figma.showUI(__html__, { visible: false }
//         // figma.ui.postMessage(bytes))
//         count++;
//         break; // Exit the loop if at least one valid image fill is found
//       }
//     }
//   }
//   if ("children" in node) {
//     if (node.type !== "INSTANCE") {
//       for (const child of node.children) {
//         traverse(child)
//       }
//     }
//   }
// }
// traverse(figma.root) // start the traversal at the root
// console.log(count)
// console.log(files)
// figma.closePlugin()










let count = 0
const files = [];

async function traverse(node: any) {
  if (node.fills && node.fills.length > 0) {
    for (const fill of node.fills) {
      if (fill.type === "IMAGE" && fill.imageHash) {
        files.push(node);
        count++;
        // const image = figma.getImageByHash(fill.imageHash)
        const bytes = await node.exportAsync()
        console.log(bytes)
        const blob = new Blob([bytes], { type: 'image/png' });
        const url = URL.createObjectURL(blob);
        const downloadLink = document.createElement('a');
        downloadLink.href = url;
        downloadLink.download = 'image.png';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        
        // console.log(image)
        // figma.showUI(__html__, { visible: false }
        // figma.ui.postMessage(bytes))
        
        break; // Exit the loop if at least one valid image fill is found
      }
    }
  }
  if ("children" in node) {
    if (node.type !== "INSTANCE") {
      for (const child of node.children) {
        traverse(child)
      }
    }
  }
}
traverse(figma.root) // start the traversal at the root
console.log(count)
console.log(files)
figma.closePlugin()