\u624b\u52d5\u306e\u76ee\u8996\u78ba\u8a8d\u306b\u306f\u591a\u304f\u306e\u5de5\u6570\u304c\u304b\u304b\u308b\u305f\u3081\u3001\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u7528\u3044\u3066\u5168\u30ec\u30a4\u30e4\u30fc\u3092\u81ea\u52d5\u3067\u8d70\u67fb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u51fa\u529b\u7d50\u679c\u306e\u4f8b\u3067\u3059\u3002<\/p>\n\n\n\n \u30ed\u30fc\u30ab\u30eb\u306b\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u306a\u3044\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u304c\u9069\u7528\u3055\u308c\u3066\u3044\u308b\u30ec\u30a4\u30e4\u30fc\u3092\u3001\u30d5\u30a1\u30a4\u30eb\u5185\u304b\u3089\u8d70\u67fb\u3057\u3066\u691c\u51fa\u3057\u307e\u3059\u3002<\/p>\n\n\n\n \u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u51e6\u7406\u624b\u9806\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n \u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u69cb\u6210\u3059\u308b\u5404\u30d5\u30a1\u30a4\u30eb\u306e\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n\n\n\n \u30ed\u30fc\u30ab\u30eb\u30b9\u30bf\u30a4\u30eb\u306e\u4e00\u89a7\u3092CSV\u5f62\u5f0f\u3067\u51fa\u529b\u3059\u308b\u65b9\u6cd5\u306f\u3001\u4ee5\u4e0b\u306e\u8a18\u4e8b\u3067\u89e3\u8aac\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n \u5b9f\u88c5\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0a\u3067\u3059\u3002<\/p>\n\n\n\n \u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u5b9f\u884c\u3057\u3001\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u306e\u691c\u51fa\u7d50\u679c\u3068CSV\u51fa\u529b\u306e\u5185\u5bb9\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n Figma\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u958b\u767a\u306b\u95a2\u3059\u308b\u8a18\u4e8b\u306f\u3001\u307b\u304b\u306b\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n![\"\u5168\u30ec\u30a4\u30e4\u30fc\u3092\u81ea\u52d5\u8d70\u67fb\u3057\u3066\u5f97\u3089\u308c\u305f\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u53c2\u7167\u306e\u51fa\u529b\u7d50\u679c\u306e\u4f8b\u3002\"](\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2025\/08\/2025-08-17_22h59_04.png\")
<\/figure>\n\n\n\n![\"\u53d6\u5f97\u3067\u304d\u306a\u3044\u5834\u5408\u306b\u4e0d\u660e\u3068\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u304c\u3042\u308b\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u53c2\u7167\u306e\u51fa\u529b\u7d50\u679c\u306e\u4f8b\u3002\"](\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2025\/08\/2025-08-17_22h57_34.png\")
<\/figure>\n\n\n\n\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u53c2\u7167\u3092\u4e00\u62ec\u691c\u51fa\u3057\u3066CSV\u51fa\u529b\u3059\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u4ed5\u7d44\u307f<\/h2>\n\n\n\n
<\/figure>\n\n\n\n\n
![\"\"](\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2025\/09\/figma-style-export-csv-300x169.jpg\")
<\/figure><\/div>\t\t\t\t\tmanifest.json<\/h3>\n\n\n\n
{\n "name": "\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u53c2\u7167\u3092\u8abf\u67fb",\n "id": "check-external-styles",\n "api": "1.0.0",\n "main": "code.js",\n "ui": "ui.html",\n "editorType": ["figma"],\n "permissions": ["currentuser"]\n}<\/code><\/pre><\/div>\n\n\n\ncode.js<\/h3>\n\n\n\n
\/\/ \u30ed\u30fc\u30ab\u30eb\u30b9\u30bf\u30a4\u30ebID\u3092\u30ad\u30e3\u30c3\u30b7\u30e5\uff08Paint \/ Effect \/ Text \/ Grid\uff09\nconst localStyleIds = new Set(\n [\n ...figma.getLocalPaintStyles(),\n ...figma.getLocalEffectStyles(),\n ...figma.getLocalTextStyles(),\n ...figma.getLocalGridStyles(),\n ].map((s) => s.id)\n);\n\nfunction isExternalStyle(style) {\n return !!style && style.remote === true && !localStyleIds.has(style.id);\n}\n\nfunction checkExternalStyleUsage(node) {\n const result = [];\n\n function add(styleId, type) {\n if (!styleId || typeof styleId !== "string") return; \/\/ figma.mixed \u306f\u5f3e\u304f\n const style = figma.getStyleById(styleId);\n if (isExternalStyle(style)) {\n result.push({\n name: node.name,\n id: "'" + node.id, \/\/ Excel\u8aa4\u5909\u63db\u9632\u6b62\n type,\n styleName: style.name,\n styleId: style.id,\n libraryName: (style && style.libraryName) || "\u4e0d\u660e",\n });\n }\n }\n\n try {\n add(node.fillStyleId, "Fill Style");\n } catch (e) {}\n try {\n add(node.strokeStyleId, "Stroke Style");\n } catch (e) {}\n try {\n add(node.effectStyleId, "Effect Style");\n } catch (e) {}\n if ("textStyleId" in node) {\n try {\n add(node.textStyleId, "Text Style");\n } catch (e) {}\n }\n\n return result;\n}\n\nfunction walk(node, acc) {\n \/\/ SceneNode\u306e\u307f\u30c1\u30a7\u30c3\u30af\n if (node && node.type && typeof node.type === "string") {\n try {\n acc.push(...checkExternalStyleUsage(node));\n } catch (e) {}\n }\n if ("children" in node && Array.isArray(node.children)) {\n for (const child of node.children) {\n walk(child, acc);\n }\n }\n}\n\nfunction getTimestamp() {\n const now = new Date();\n const yyyy = now.getFullYear();\n const mm = String(now.getMonth() + 1).padStart(2, "0");\n const dd = String(now.getDate()).padStart(2, "0");\n const hh = String(now.getHours()).padStart(2, "0");\n const min = String(now.getMinutes()).padStart(2, "0");\n return `${yyyy}-${mm}-${dd}_${hh}${min}`;\n}\n\nfunction toCSV(rows) {\n const headers = [\n "Layer Name",\n "Layer ID",\n "Style Type",\n "Style Name",\n "Style ID",\n "Library Name",\n ];\n const records = rows.map((r) => [\n r.name,\n r.id,\n r.type,\n r.styleName,\n r.styleId,\n r.libraryName,\n ]);\n return [headers, ...records]\n .map((row) =>\n row.map((c) => `"${String(c).replace(\/"\/g, '""')}"`).join(",")\n )\n .join("\\n");\n}\n\n\/\/ ---- UI\u3092\u8868\u793a\uff08\u5c0f\u3055\u3081\u306e\u30e2\u30fc\u30c0\u30eb\uff09 ----\nfigma.showUI(__html__, { width: 320, height: 160 });\n\nfigma.ui.onmessage = (msg) => {\n if (!msg || typeof msg !== "object") return;\n\n if (msg.type === "export") {\n const allResults = [];\n\n \/\/ \u30d5\u30a1\u30a4\u30eb\u5168\u4f53\uff1a\u5168\u30da\u30fc\u30b8\u3092\u8d77\u70b9\u306b\u518d\u5e30\u8d70\u67fb\n for (const page of figma.root.children) {\n if (page.type === "PAGE") {\n walk(page, allResults);\n }\n }\n\n if (allResults.length === 0) {\n figma.notify(\n "\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u3092\u53c2\u7167\u3057\u3066\u3044\u308b\u30ec\u30a4\u30e4\u30fc\u306f\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002"\n );\n figma.ui.postMessage({ type: "error", message: "\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u306a\u3057\u3002" });\n return;\n }\n\n const csv = toCSV(allResults);\n const filename = `external_styles_${getTimestamp()}.csv`;\n figma.ui.postMessage({ type: "download", csv, filename });\n }\n\n if (msg.type === "close") {\n figma.closePlugin();\n }\n};\n<\/code><\/pre><\/div>\n\n\n\nui.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="ja">\n <head>\n <meta charset="utf-8" \/>\n <title>\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u53c2\u7167\u3092\u8abf\u67fb<\/title>\n <meta name="viewport" content="width=device-width,initial-scale=1" \/>\n <style>\n html,\n body {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,\n "Hiragino Kaku Gothic ProN", Meiryo, "Noto Sans JP", Arial, sans-serif;\n color: #111;\n background: #fff;\n }\n .container {\n padding: 16px;\n }\n h1 {\n font-size: 14px;\n margin: 0 0 6px;\n font-weight: 700;\n }\n p {\n font-size: 12px;\n margin: 0 0 12px;\n color: #555;\n }\n .actions {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n button {\n appearance: none;\n border: 1px solid #ccc;\n background: #0b62ff;\n color: #fff;\n font-size: 13px;\n padding: 8px 12px;\n border-radius: 8px;\n cursor: pointer;\n }\n button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n .status {\n font-size: 11px;\n color: #666;\n }\n <\/style>\n <\/head>\n <body>\n <div class="container" role="main" aria-labelledby="title">\n <h1 id="title">\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u8abf\u67fb<\/h1>\n <p>\u5168\u30da\u30fc\u30b8\u30fb\u5168\u30ec\u30a4\u30e4\u30fc\u3092\u8d70\u67fb\u3057\u3001\u5916\u90e8\u30b9\u30bf\u30a4\u30eb\u53c2\u7167\u3092CSV\u306b\u66f8\u304d\u51fa\u3057\u307e\u3059\u3002<\/p>\n <div class="actions">\n <button id="run" type="button">\u5168\u4f53\u3092\u30b9\u30ad\u30e3\u30f3\u3057\u3066CSV\u51fa\u529b<\/button>\n <span\n id="status"\n class="status"\n role="status"\n aria-live="polite"\n ><\/span>\n <\/div>\n <\/div>\n\n <script>\n let csv = "",\n filename = "";\n const runBtn = document.getElementById("run");\n const statusEl = document.getElementById("status");\n\n function setLoading(on, text) {\n runBtn.disabled = !!on;\n statusEl.textContent = text || "";\n }\n\n function requestExport() {\n if (runBtn.disabled) return;\n setLoading(true, "\u30d5\u30a1\u30a4\u30eb\u5168\u4f53\u3092\u8d70\u67fb\u4e2d\u2026");\n parent.postMessage({ pluginMessage: { type: "export" } }, "*");\n }\n\n runBtn.addEventListener("click", requestExport);\n\n \/\/ Enter \u30ad\u30fc\u3067\u3082\u5b9f\u884c\n window.addEventListener("keydown", (e) => {\n if (e.key === "Enter") {\n e.preventDefault();\n requestExport();\n }\n });\n\n onmessage = (event) => {\n const msg = event.data.pluginMessage;\n if (!msg) return;\n\n if (msg.type === "download") {\n csv = msg.csv;\n filename = msg.filename;\n\n try {\n const blob = new Blob([csv], { type: "text\/csv;charset=utf-8;" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement("a");\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n a.remove();\n URL.revokeObjectURL(url);\n setLoading(false, "\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u5b8c\u4e86");\n } catch (err) {\n alert("\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002");\n setLoading(false, "");\n } finally {\n parent.postMessage({ pluginMessage: { type: "close" } }, "*");\n }\n }\n\n if (msg.type === "error") {\n setLoading(false, "");\n alert(msg.message || "\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002");\n }\n };\n <\/script>\n <\/body>\n<\/html>\n<\/code><\/pre><\/div>\n\n\n\n<\/figure>\n\n\n\n\n![\"\"](\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2025\/12\/figma-sheet-300x169.jpg\")
<\/figure><\/div>\t\t\t\t\t![\"\"](\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2026\/03\/figma-instance-main-component-name-without-library-update-300x169.jpg\")
<\/figure><\/div>\t\t\t\t\t
![\"\"](\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2025\/06\/figma-url-export-plugin-300x169.jpg\")
<\/figure><\/div>\t\t\t\t\t![\"\"](\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2025\/08\/figma-plugin-progress-bar-enoent-fix-300x169.jpg\")
<\/figure><\/div>\t\t\t\t\t