FigmaのコンポーネントをCSVへ一括出力｜ページ走査・分割・中止処理

{
  "name": "コンポーネントCSV書き出し",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": [
    "figma"
  ],
  "documentAccess": "dynamic-page",
  "networkAccess": {
    "allowedDomains": [
      "none"
    ]
  }
}

figma.showUI(__html__, { width: 440, height: 260 });
let busy = false, cancelled = false;
const yieldTask = () => new Promise(resolve => setTimeout(resolve, 0));
function getLayerPath(node) {
  const names = []; let n = node;
  while (n && n.type !== "PAGE" && n.type !== "DOCUMENT") { names.unshift(n.name); n = n.parent; }
  return names.join(" / ");
}
figma.ui.onmessage = async msg => {
  if (!msg) return;
  if (msg.type === "cancel") { cancelled = true; return; }
  if (msg.type !== "start" || busy) return;
  busy = true; cancelled = false;
  figma.ui.postMessage({ type: "reset" });
  let visited = 0, produced = 0;
  const seen = new Set();
  try {
    const pages = Array.from(figma.root.children);
    for (let pi = 0; pi < pages.length && !cancelled; pi++) {
      const page = pages[pi];
      figma.ui.postMessage({ type: "progress", page: page.name, pages: pages.length, currentPage: pi+1, visited, produced });
      await page.loadAsync();
      const stack = Array.from(page.children).reverse();
      while (stack.length && !cancelled) {
        const rows = [];
        for (let batch = 0; batch < 200 && stack.length && !cancelled; batch++) {
          const node = stack.pop();
          if (node.removed) continue;
          visited++;
          if (node.type === "COMPONENT" && !seen.has(node.id)) {
            seen.add(node.id);
            const parent = node.parent;
            const inSet = parent && parent.type === "COMPONENT_SET";
            rows.push({ parentName: inSet ? parent.name : node.name, parentId: inSet ? parent.id : node.id,
              variantName: inSet ? node.name : "", variantId: inSet ? node.id : "", path: getLayerPath(node) });
          }
          if ("children" in node)
            for (let i = node.children.length-1; i >= 0; i--) stack.push(node.children[i]);
        }
        if (rows.length) { produced += rows.length; figma.ui.postMessage({ type: "append", rows }); }
        figma.ui.postMessage({ type: "progress", page: page.name, pages: pages.length, currentPage: pi+1, visited, produced });
        await yieldTask();
      }
    }
    figma.ui.postMessage({ type: "done", cancelled, produced });
  } catch (_) { figma.ui.postMessage({ type: "error", message: "走査に失敗しました。途中のCSVは全件ではありません。" }); }
  finally { busy = false; }
};

<!doctype html><html lang="ja"><meta charset="utf-8">
<button id="start">開始</button><button id="cancel" disabled>中止</button><button id="save" disabled>CSV保存</button>
<p id="status">待機中</p><p id="latest"></p>
<script>
const start = document.getElementById("start"), cancel = document.getElementById("cancel"), save = document.getElementById("save");
const status = document.getElementById("status"), latest = document.getElementById("latest");
let chunks = [], count = 0;
function cell(value) {
  let s = String(value == null ? "" : value);
  if (/^[=+@\-\t\r\n]/.test(s)) s = "'" + s;
  return '"' + s.replace(/"/g, '""') + '"';
}
function send(type) { parent.postMessage({ pluginMessage: { type } }, "*"); }
start.onclick = () => { start.disabled = true; cancel.disabled = false; save.disabled = true; status.textContent = "開始を要求…"; send("start"); };
cancel.onclick = () => { cancel.disabled = true; status.textContent = "中止を要求…"; send("cancel"); };
window.onmessage = event => {
  if (event.source !== parent) return;
  const msg = event.data && event.data.pluginMessage;
  if (!msg) return;
  if (msg.type === "reset") {
    count = 0; chunks = ["\uFEFF" + ["親コンポ名","親ノードID","バリアント名","バリアントID","レイヤーパス"].map(cell).join(",") + "\r\n"];
    latest.textContent = "";
  } else if (msg.type === "append") {
    chunks.push(msg.rows.map(r => [r.parentName,r.parentId,r.variantName,r.variantId,r.path].map(cell).join(",")).join("\r\n") + "\r\n");
    count += msg.rows.length;
    const last = msg.rows[msg.rows.length-1]; latest.textContent = last.path;
  } else if (msg.type === "progress") status.textContent = `ページ${msg.currentPage}/${msg.pages} ${msg.page} / 走査${msg.visited}件 / 出力${msg.produced}行`;
  else if (msg.type === "done" || msg.type === "error") {
    start.disabled = false; cancel.disabled = true; save.disabled = !count;
    status.textContent = msg.type === "error" ? msg.message : (msg.cancelled ? "中止（途中まで）" : "完了") + `：${count}行`;
  }
};
save.onclick = () => {
  const url = URL.createObjectURL(new Blob(chunks, { type: "text/csv;charset=utf-8" }));
  const a = document.createElement("a"); a.href = url; a.download = "components.csv";
  document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000);
};
</script></html>