figma-metadata-extractor 1.0.15 → 1.0.16

package/dist/index.cjs

@@ -499,143 +499,67 @@ class FigmaService {
         );
       }
     }
-    const downloadPromises = [];
-    const imageFills = items.filter(
-      (item) => !!item.imageRef
-    );
-    const renderNodes = items.filter(
-      (item) => !!item.nodeId
-    );
-    if (imageFills.length > 0) {
-      const fillUrls = await this.getImageFillUrls(fileKey);
-      const fillTasks = imageFills.map(
-        ({
-          imageRef,
-          fileName,
-          needsCropping,
-          cropTransform,
-          requiresImageDimensions
-        }) => {
-          const imageUrl = fillUrls[imageRef];
-          if (!imageUrl) {
-            Logger.log(
-              `Skipping image fill with missing URL for imageRef: ${imageRef}`
-            );
-            return null;
-          }
-          return () => downloadAndProcessImage(
-            fileName,
-            resolvedPath,
-            imageUrl,
-            needsCropping,
-            cropTransform,
-            requiresImageDimensions,
-            returnBuffer
-          );
+    const imageRefs = [
+      ...new Set(items.map((i) => i.imageRef).filter((r) => !!r))
+    ];
+    const pngNodeIds = items.filter(
+      (i) => !i.imageRef && i.nodeId && !i.fileName.toLowerCase().endsWith(".svg")
+    ).map((i) => i.nodeId);
+    const svgNodeIds = items.filter(
+      (i) => !i.imageRef && i.nodeId && i.fileName.toLowerCase().endsWith(".svg")
+    ).map((i) => i.nodeId);
+    const [fillUrls, pngUrls, svgUrls] = await Promise.all([
+      imageRefs.length > 0 ? this.getImageFillUrls(fileKey) : Promise.resolve({}),
+      pngNodeIds.length > 0 ? this.getNodeRenderUrls(fileKey, pngNodeIds, "png", { pngScale }) : Promise.resolve({}),
+      svgNodeIds.length > 0 ? this.getNodeRenderUrls(fileKey, svgNodeIds, "svg", { svgOptions }) : Promise.resolve({})
+    ]);
+    const tasks = items.map((item) => {
+      const {
+        imageRef,
+        nodeId,
+        fileName,
+        needsCropping,
+        cropTransform,
+        requiresImageDimensions
+      } = item;
+      let imageUrl;
+      if (imageRef) {
+        imageUrl = fillUrls[imageRef];
+      } else if (nodeId) {
+        if (fileName.toLowerCase().endsWith(".svg")) {
+          imageUrl = svgUrls[nodeId];
+        } else {
+          imageUrl = pngUrls[nodeId];
         }
-      ).filter(
-        (task) => task !== null
-      );
-      if (fillTasks.length > 0) {
-        downloadPromises.push(runWithConcurrency(fillTasks, CONCURRENCY_LIMIT));
       }
-    }
-    if (renderNodes.length > 0) {
-      const pngNodes = renderNodes.filter(
-        (node) => !node.fileName.toLowerCase().endsWith(".svg")
-      );
-      const svgNodes = renderNodes.filter(
-        (node) => node.fileName.toLowerCase().endsWith(".svg")
-      );
-      if (pngNodes.length > 0) {
-        const pngUrls = await this.getNodeRenderUrls(
-          fileKey,
-          pngNodes.map((n) => n.nodeId),
-          "png",
-          { pngScale }
-        );
-        const pngTasks = pngNodes.map(
-          ({
-            nodeId,
-            fileName,
-            needsCropping,
-            cropTransform,
-            requiresImageDimensions
-          }) => {
-            const imageUrl = pngUrls[nodeId];
-            if (!imageUrl) {
-              Logger.log(
-                `Skipping PNG render with missing URL for nodeId: ${nodeId}`
-              );
-              return null;
-            }
-            return () => downloadAndProcessImage(
-              fileName,
-              resolvedPath,
-              imageUrl,
-              needsCropping,
-              cropTransform,
-              requiresImageDimensions,
-              returnBuffer
-            ).then(
-              (result) => ({ ...result, nodeId })
-            );
-          }
-        ).filter(
-          (task) => task !== null
-        );
-        if (pngTasks.length > 0) {
-          downloadPromises.push(
-            runWithConcurrency(pngTasks, CONCURRENCY_LIMIT)
+      if (!imageUrl) {
+        return () => {
+          Logger.log(
+            `Skipping missing image for ${imageRef ? `imageRef: ${imageRef}` : `nodeId: ${nodeId}`}`
           );
-        }
-      }
-      if (svgNodes.length > 0) {
-        const svgUrls = await this.getNodeRenderUrls(
-          fileKey,
-          svgNodes.map((n) => n.nodeId),
-          "svg",
-          { svgOptions }
-        );
-        const svgTasks = svgNodes.map(
-          ({
+          return Promise.resolve({
             nodeId,
-            fileName,
-            needsCropping,
-            cropTransform,
-            requiresImageDimensions
-          }) => {
-            const imageUrl = svgUrls[nodeId];
-            if (!imageUrl) {
-              Logger.log(
-                `Skipping SVG render with missing URL for nodeId: ${nodeId}`
-              );
-              return null;
-            }
-            return () => downloadAndProcessImage(
-              fileName,
-              resolvedPath,
-              imageUrl,
-              needsCropping,
-              cropTransform,
-              requiresImageDimensions,
-              returnBuffer
-            ).then(
-              (result) => ({ ...result, nodeId })
-            );
-          }
-        ).filter(
-          (task) => task !== null
-        );
-        if (svgTasks.length > 0) {
-          downloadPromises.push(
-            runWithConcurrency(svgTasks, CONCURRENCY_LIMIT)
-          );
-        }
+            originalDimensions: { width: 0, height: 0 },
+            finalDimensions: { width: 0, height: 0 },
+            wasCropped: false,
+            processingLog: ["Skipped: URL not found"]
+          });
+        };
       }
-    }
-    const results = await Promise.all(downloadPromises);
-    return results.flat();
+      return async () => {
+        const result = await downloadAndProcessImage(
+          fileName,
+          resolvedPath,
+          imageUrl,
+          needsCropping,
+          cropTransform,
+          requiresImageDimensions,
+          returnBuffer
+        );
+        return { ...result, nodeId };
+      };
+    });
+    return runWithConcurrency(tasks, CONCURRENCY_LIMIT);
   }
   /**
    * Get raw Figma API response for a file (for use with flexible extractors)
@@ -1596,7 +1520,11 @@ async function getFigmaMetadata(figmaUrl, options = {}) {
       if (imageAssets.length > 0) {
         const imageNodes = imageAssets.map((asset) => ({
           nodeId: asset.id,
-          fileName: sanitizeFileName(asset.name) + `.${imageFormat}`
+          imageRef: asset.imageRef,
+          fileName: sanitizeFileName(asset.name) + (asset.filenameSuffix ? `-${asset.filenameSuffix}` : "") + `.${imageFormat}`,
+          needsCropping: asset.needsCropping,
+          cropTransform: asset.cropTransform,
+          requiresImageDimensions: asset.requiresImageDimensions
         }));
         const downloadResults = await figmaService.downloadImages(
           fileKey,
@@ -1831,28 +1759,37 @@ function sanitizeFileName(name) {
   return name.replace(/[^a-z0-9]/gi, "-").replace(/-+/g, "-").replace(/^-|-$/g, "").toLowerCase();
 }
 function findImageAssets(nodes, globalVars) {
-  const images = [];
+  const assets = [];
   function traverse(node) {
-    const isImageAsset = node.type === "IMAGE-SVG" || hasImageFill(node, globalVars);
-    if (isImageAsset) {
-      images.push(node);
+    if (node.type === "IMAGE-SVG") {
+      assets.push({
+        ...node,
+        id: node.id,
+        name: node.name,
+        type: "render"
+      });
+    } else if (node.fills && typeof node.fills === "string") {
+      const fillData = globalVars?.styles?.[node.fills];
+      if (Array.isArray(fillData)) {
+        const imageFill = fillData.find((f) => f.type === "IMAGE");
+        if (imageFill) {
+          assets.push({
+            ...node,
+            id: node.id,
+            name: node.name,
+            type: "fill",
+            imageRef: imageFill.imageRef,
+            ...imageFill.imageDownloadArguments
+          });
+        }
+      }
     }
     if (node.children && Array.isArray(node.children)) {
       node.children.forEach(traverse);
     }
   }
   nodes.forEach(traverse);
-  return images;
-}
-function hasImageFill(node, globalVars) {
-  if (!node.fills || typeof node.fills !== "string") {
-    return false;
-  }
-  const fillData = globalVars?.styles?.[node.fills];
-  if (!fillData || !Array.isArray(fillData)) {
-    return false;
-  }
-  return fillData.some((fill) => fill?.type === "IMAGE");
+  return assets;
 }
 function enrichNodesWithImages(nodes, imageAssets, downloadResults, useRelativePaths = true, localPath) {
   const imageMap = /* @__PURE__ */ new Map();

package/dist/index.js

@@ -497,143 +497,67 @@ class FigmaService {
         );
       }
     }
-    const downloadPromises = [];
-    const imageFills = items.filter(
-      (item) => !!item.imageRef
-    );
-    const renderNodes = items.filter(
-      (item) => !!item.nodeId
-    );
-    if (imageFills.length > 0) {
-      const fillUrls = await this.getImageFillUrls(fileKey);
-      const fillTasks = imageFills.map(
-        ({
-          imageRef,
-          fileName,
-          needsCropping,
-          cropTransform,
-          requiresImageDimensions
-        }) => {
-          const imageUrl = fillUrls[imageRef];
-          if (!imageUrl) {
-            Logger.log(
-              `Skipping image fill with missing URL for imageRef: ${imageRef}`
-            );
-            return null;
-          }
-          return () => downloadAndProcessImage(
-            fileName,
-            resolvedPath,
-            imageUrl,
-            needsCropping,
-            cropTransform,
-            requiresImageDimensions,
-            returnBuffer
-          );
+    const imageRefs = [
+      ...new Set(items.map((i) => i.imageRef).filter((r) => !!r))
+    ];
+    const pngNodeIds = items.filter(
+      (i) => !i.imageRef && i.nodeId && !i.fileName.toLowerCase().endsWith(".svg")
+    ).map((i) => i.nodeId);
+    const svgNodeIds = items.filter(
+      (i) => !i.imageRef && i.nodeId && i.fileName.toLowerCase().endsWith(".svg")
+    ).map((i) => i.nodeId);
+    const [fillUrls, pngUrls, svgUrls] = await Promise.all([
+      imageRefs.length > 0 ? this.getImageFillUrls(fileKey) : Promise.resolve({}),
+      pngNodeIds.length > 0 ? this.getNodeRenderUrls(fileKey, pngNodeIds, "png", { pngScale }) : Promise.resolve({}),
+      svgNodeIds.length > 0 ? this.getNodeRenderUrls(fileKey, svgNodeIds, "svg", { svgOptions }) : Promise.resolve({})
+    ]);
+    const tasks = items.map((item) => {
+      const {
+        imageRef,
+        nodeId,
+        fileName,
+        needsCropping,
+        cropTransform,
+        requiresImageDimensions
+      } = item;
+      let imageUrl;
+      if (imageRef) {
+        imageUrl = fillUrls[imageRef];
+      } else if (nodeId) {
+        if (fileName.toLowerCase().endsWith(".svg")) {
+          imageUrl = svgUrls[nodeId];
+        } else {
+          imageUrl = pngUrls[nodeId];
         }
-      ).filter(
-        (task) => task !== null
-      );
-      if (fillTasks.length > 0) {
-        downloadPromises.push(runWithConcurrency(fillTasks, CONCURRENCY_LIMIT));
       }
-    }
-    if (renderNodes.length > 0) {
-      const pngNodes = renderNodes.filter(
-        (node) => !node.fileName.toLowerCase().endsWith(".svg")
-      );
-      const svgNodes = renderNodes.filter(
-        (node) => node.fileName.toLowerCase().endsWith(".svg")
-      );
-      if (pngNodes.length > 0) {
-        const pngUrls = await this.getNodeRenderUrls(
-          fileKey,
-          pngNodes.map((n) => n.nodeId),
-          "png",
-          { pngScale }
-        );
-        const pngTasks = pngNodes.map(
-          ({
-            nodeId,
-            fileName,
-            needsCropping,
-            cropTransform,
-            requiresImageDimensions
-          }) => {
-            const imageUrl = pngUrls[nodeId];
-            if (!imageUrl) {
-              Logger.log(
-                `Skipping PNG render with missing URL for nodeId: ${nodeId}`
-              );
-              return null;
-            }
-            return () => downloadAndProcessImage(
-              fileName,
-              resolvedPath,
-              imageUrl,
-              needsCropping,
-              cropTransform,
-              requiresImageDimensions,
-              returnBuffer
-            ).then(
-              (result) => ({ ...result, nodeId })
-            );
-          }
-        ).filter(
-          (task) => task !== null
-        );
-        if (pngTasks.length > 0) {
-          downloadPromises.push(
-            runWithConcurrency(pngTasks, CONCURRENCY_LIMIT)
+      if (!imageUrl) {
+        return () => {
+          Logger.log(
+            `Skipping missing image for ${imageRef ? `imageRef: ${imageRef}` : `nodeId: ${nodeId}`}`
           );
-        }
-      }
-      if (svgNodes.length > 0) {
-        const svgUrls = await this.getNodeRenderUrls(
-          fileKey,
-          svgNodes.map((n) => n.nodeId),
-          "svg",
-          { svgOptions }
-        );
-        const svgTasks = svgNodes.map(
-          ({
+          return Promise.resolve({
             nodeId,
-            fileName,
-            needsCropping,
-            cropTransform,
-            requiresImageDimensions
-          }) => {
-            const imageUrl = svgUrls[nodeId];
-            if (!imageUrl) {
-              Logger.log(
-                `Skipping SVG render with missing URL for nodeId: ${nodeId}`
-              );
-              return null;
-            }
-            return () => downloadAndProcessImage(
-              fileName,
-              resolvedPath,
-              imageUrl,
-              needsCropping,
-              cropTransform,
-              requiresImageDimensions,
-              returnBuffer
-            ).then(
-              (result) => ({ ...result, nodeId })
-            );
-          }
-        ).filter(
-          (task) => task !== null
-        );
-        if (svgTasks.length > 0) {
-          downloadPromises.push(
-            runWithConcurrency(svgTasks, CONCURRENCY_LIMIT)
-          );
-        }
+            originalDimensions: { width: 0, height: 0 },
+            finalDimensions: { width: 0, height: 0 },
+            wasCropped: false,
+            processingLog: ["Skipped: URL not found"]
+          });
+        };
       }
-    }
-    const results = await Promise.all(downloadPromises);
-    return results.flat();
+      return async () => {
+        const result = await downloadAndProcessImage(
+          fileName,
+          resolvedPath,
+          imageUrl,
+          needsCropping,
+          cropTransform,
+          requiresImageDimensions,
+          returnBuffer
+        );
+        return { ...result, nodeId };
+      };
+    });
+    return runWithConcurrency(tasks, CONCURRENCY_LIMIT);
   }
   /**
    * Get raw Figma API response for a file (for use with flexible extractors)
@@ -1594,7 +1518,11 @@ async function getFigmaMetadata(figmaUrl, options = {}) {
       if (imageAssets.length > 0) {
         const imageNodes = imageAssets.map((asset) => ({
           nodeId: asset.id,
-          fileName: sanitizeFileName(asset.name) + `.${imageFormat}`
+          imageRef: asset.imageRef,
+          fileName: sanitizeFileName(asset.name) + (asset.filenameSuffix ? `-${asset.filenameSuffix}` : "") + `.${imageFormat}`,
+          needsCropping: asset.needsCropping,
+          cropTransform: asset.cropTransform,
+          requiresImageDimensions: asset.requiresImageDimensions
         }));
         const downloadResults = await figmaService.downloadImages(
           fileKey,
@@ -1829,28 +1757,37 @@ function sanitizeFileName(name) {
   return name.replace(/[^a-z0-9]/gi, "-").replace(/-+/g, "-").replace(/^-|-$/g, "").toLowerCase();
 }
 function findImageAssets(nodes, globalVars) {
-  const images = [];
+  const assets = [];
   function traverse(node) {
-    const isImageAsset = node.type === "IMAGE-SVG" || hasImageFill(node, globalVars);
-    if (isImageAsset) {
-      images.push(node);
+    if (node.type === "IMAGE-SVG") {
+      assets.push({
+        ...node,
+        id: node.id,
+        name: node.name,
+        type: "render"
+      });
+    } else if (node.fills && typeof node.fills === "string") {
+      const fillData = globalVars?.styles?.[node.fills];
+      if (Array.isArray(fillData)) {
+        const imageFill = fillData.find((f) => f.type === "IMAGE");
+        if (imageFill) {
+          assets.push({
+            ...node,
+            id: node.id,
+            name: node.name,
+            type: "fill",
+            imageRef: imageFill.imageRef,
+            ...imageFill.imageDownloadArguments
+          });
+        }
+      }
     }
     if (node.children && Array.isArray(node.children)) {
       node.children.forEach(traverse);
     }
   }
   nodes.forEach(traverse);
-  return images;
-}
-function hasImageFill(node, globalVars) {
-  if (!node.fills || typeof node.fills !== "string") {
-    return false;
-  }
-  const fillData = globalVars?.styles?.[node.fills];
-  if (!fillData || !Array.isArray(fillData)) {
-    return false;
-  }
-  return fillData.some((fill) => fill?.type === "IMAGE");
+  return assets;
 }
 function enrichNodesWithImages(nodes, imageAssets, downloadResults, useRelativePaths = true, localPath) {
   const imageMap = /* @__PURE__ */ new Map();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-metadata-extractor",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "Extract metadata and download images from Figma files. A standalone library for accessing Figma design data and downloading frame images programmatically.",
   "type": "module",
   "main": "dist/index.cjs",