\u64cd\u4f5c\u306e\u9806\u5e8f<\/h2>\n\n\n\n- \u8907\u88fd\u30d5\u30a1\u30a4\u30eb\u3067\u7f6e\u63db\u5148\u306e\u30e1\u30a4\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u9078\u3073\u3001source\u306e\u767b\u9332\u3092\u62bc\u3057\u307e\u3059\u3002<\/li>
- \u5165\u308c\u66ff\u3048\u308b\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u8907\u6570\u9078\u3073\u3001target\u306e\u8ffd\u52a0\u3092\u62bc\u3057\u307e\u3059\u3002<\/li>
- \u4e00\u89a7\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002\u540c\u3058ID\u3092\u518d\u767b\u9332\u3057\u3066\u30821\u4ef6\u306b\u307e\u3068\u3081\u307e\u3059\u3002<\/li>
- \u5dee\u3057\u66ff\u3048\u5b9f\u884c\u3092\u62bc\u3057\u3066\u78ba\u8a8d\u3057\u3001\u7d50\u679c\u306e\u4ef6\u6570\u3092\u898b\u307e\u3059\u3002<\/li>
- \u6587\u5b57\u3001\u753b\u50cf\u3001\u30b5\u30a4\u30ba\u3001\u30cd\u30b9\u30c8\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306a\u3069\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/li><\/ol>\n\n\n\n
\u7f6e\u63db\u5148\u306b\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30bb\u30c3\u30c8\u306e\u65e2\u5b9a\u30d0\u30ea\u30a2\u30f3\u30c8\u3001\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u53c2\u7167\u5143\u3092\u5229\u7528\u3067\u304d\u307e\u3059\u3002\u5143\u306e\u4f8b\u306e\u300c\u8907\u6570\u9078\u629e\u53ef\u80fd\u300d\u3068\u3044\u3046\u8aac\u660e\u306b\u5bfe\u3057\u3066\u5148\u982d1\u4ef6\u3057\u304b\u767b\u9332\u3057\u306a\u3044\u51e6\u7406\u3092\u3001\u9078\u629e\u5168\u4ef6\u306e\u767b\u9332\u3078\u4fee\u6b63\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3059\u308b<\/h2>\n\n\n\n
Figma\u306eNew plugin\u3067\u751f\u6210\u3057\u305fmanifest\u3092\u57fa\u306b\u3001\u6b21\u306e\u8a2d\u5b9a\u3092\u4f7f\u3044\u307e\u3059\u3002\u63b2\u8f09\u4f8b\u3067\u306fid\u306e\u884c\u3060\u3051\u3092\u7701\u7565\u3057\u3066\u3044\u307e\u3059\u3002New plugin\u3067\u751f\u6210\u3057\u305fmanifest\u306eid\u3092\u6b8b\u3057\u3001\u8a2d\u5b9a\u9805\u76ee\u3092\u53cd\u6620\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u4f8b\u5168\u4f53\u3067manifest\u3092\u4e0a\u66f8\u304d\u3057\u305f\u308a\u3001id\u3092\u4efb\u610f\u306e\u6587\u5b57\u5217\u306b\u7f6e\u304d\u63db\u3048\u305f\u308a\u3057\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u30023\u30d5\u30a1\u30a4\u30eb\u3092\u540c\u3058\u30d5\u30a9\u30eb\u30c0\u3078\u4fdd\u5b58\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
manifest.json<\/h3>\n\n\n\n{\n "name": "\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u5165\u308c\u66ff\u3048",\n "api": "1.0.0",\n "main": "code.js",\n "ui": "ui.html",\n "editorType": [\n "figma"\n ],\n "documentAccess": "dynamic-page",\n "networkAccess": {\n "allowedDomains": [\n "none"\n ]\n }\n}<\/code><\/pre><\/div>\n\n\n\ncode.js<\/h3>\n\n\n\nfunction isInstance(n){ return n && n.type === "INSTANCE"; }\nfunction isComponent(n){ return n && n.type === "COMPONENT"; }\nfunction isComponentSet(n){ return n && n.type === "COMPONENT_SET"; }\n\nfunction nearestInstance(node){\n var cur = node;\n while (cur) {\n if (isInstance(cur)) return cur;\n cur = cur.parent;\n }\n return null;\n}\n\nasync function getComponentFromNode(node){\n if (!node) return null;\n if (isInstance(node)) return await node.getMainComponentAsync();\n if (isComponent(node)) return node;\n if (isComponentSet(node)) {\n if (node.defaultVariant) return node.defaultVariant;\n var i; for (i=0; i<node.children.length; i++) {\n var c = node.children[i];\n if (c && c.type === "COMPONENT") return c;\n }\n }\n return null;\n}\n\nasync function resolveComponent(componentNodeId, componentKey){\n if (componentNodeId && componentNodeId !== "") {\n try {\n var local = await figma.getNodeByIdAsync(componentNodeId);\n if (local && local.type === "COMPONENT") return local;\n } catch (_) { \/* \u30ad\u30fc\u304b\u3089\u306e\u89e3\u6c7a\u3092\u7d9a\u3051\u308b *\/ }\n }\n if (componentKey && componentKey !== "") {\n try {\n var imported = await figma.importComponentByKeyAsync(componentKey);\n if (imported) return imported;\n } catch (e) {}\n }\n return null;\n}\n\nfigma.showUI(__html__, { width: 280, height: 220 });\n\nvar stored = {\n targets: [], \/\/ {id, name}\n sourceId: "",\n sourceKey: "",\n sourceName: ""\n};\n\nfunction postState(){\n figma.ui.postMessage({\n type: "state",\n payload: {\n targets: stored.targets,\n sourceName: stored.sourceName,\n hasTarget: stored.targets.length > 0,\n hasSource: (stored.sourceId !== "" || stored.sourceKey !== "")\n }\n });\n}\n\nlet busy = false;\nfigma.ui.onmessage = async function(msg){\n if (!msg || busy) return;\n busy = true;\n try {\n if (msg.type === "capture-source") {\n var sel = figma.currentPage.selection;\n if (!sel || sel.length === 0) { figma.notify("source \u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044"); return; }\n var comp = await getComponentFromNode(sel[0]);\n if (!comp) { figma.notify("\u30e1\u30a4\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u53d6\u5f97\u3067\u304d\u307e\u305b\u3093"); return; }\n stored.sourceId = comp.id || "";\n stored.sourceKey = comp.key || "";\n stored.sourceName = comp.name || "(no name)";\n postState();\n return;\n }\n\n if (msg.type === "capture-target") {\n\n var sel = figma.currentPage.selection;\n if (!sel.length) { figma.notify("target \u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044"); return; }\n for (const node of sel) {\n const inst = nearestInstance(node);\n if (inst && !stored.targets.some(t => t.id === inst.id))\n stored.targets.push({ id: inst.id, name: inst.name });\n }\n postState();\n return;\n }\n\n if (msg.type === "clear-targets") {\n stored.targets = [];\n postState();\n return;\n }\n\n if (msg.type === "swap-now") {\n if (stored.targets.length === 0) { figma.notify("target \u672a\u767b\u9332"); return; }\n if (!stored.sourceId && !stored.sourceKey) { figma.notify("source \u672a\u767b\u9332"); return; }\n var dest = await resolveComponent(stored.sourceId, stored.sourceKey);\n if (!dest) { figma.notify("source \u3092\u89e3\u6c7a\u3067\u304d\u307e\u305b\u3093"); return; }\n\n var ok = 0, fail = 0;\n for (var i=0; i<stored.targets.length; i++){\n try {\n var t = await figma.getNodeByIdAsync(stored.targets[i].id);\n if (!t || t.type !== "INSTANCE") { fail++; continue; }\n t.swapComponent(dest);\n ok++;\n } catch(e){ fail++; }\n }\n figma.notify("\u5dee\u3057\u66ff\u3048\u5b8c\u4e86: \u6210\u529f " + ok + " \u4ef6 \/ \u5931\u6557 " + fail + " \u4ef6");\n return;\n }\n\n if (msg.type === "close") figma.closePlugin();\n } catch (_) { figma.notify("\u51e6\u7406\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\u5bfe\u8c61\u3092\u767b\u9332\u3057\u76f4\u3057\u3066\u304f\u3060\u3055\u3044", {error:true}); }\n finally { busy = false; }\n};\n\npostState();<\/code><\/pre><\/div>\n\n\n\nui.html<\/h3>\n\n\n\n<!doctype html>\n<html>\n<head>\n <meta charset="utf-8" \/>\n <title>Swap Multi Target<\/title>\n <style>\n body { font-family: Inter, sans-serif; margin: 12px; font-size: 12px; }\n .row { display: flex; align-items: center; margin-bottom: 8px; }\n .val { flex: 1; padding: 6px 8px; background: #f5f5f5; border-radius: 6px; }\n button { margin-left: 6px; font-size: 12px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; }\n button.primary { background: #18a0fb; color: #fff; border-color: #18a0fb; }\n button:disabled { opacity: 0.6; cursor: not-allowed; }\n ul { margin: 4px 0; padding-left: 16px; }\n <\/style>\n<\/head>\n<body>\n <div class="row">\n <div class="val" id="sourceVal">source \u672a\u767b\u9332<\/div>\n <button id="btnCapSource">\u767b\u9332<\/button>\n <\/div>\n <div class="row">\n <div class="val">target \u8907\u6570\u53ef<\/div>\n <button id="btnCapTarget">\u8ffd\u52a0<\/button>\n <button id="btnClearTargets">\u30af\u30ea\u30a2<\/button>\n <\/div>\n <ul id="targetList"><\/ul>\n <div class="row">\n <button id="btnSwap" class="primary" disabled style="flex:1;">\u5dee\u3057\u66ff\u3048\u5b9f\u884c<\/button>\n <\/div>\n\n <script>\n var $sourceVal = document.getElementById('sourceVal');\n var $targetList = document.getElementById('targetList');\n var $btnSwap = document.getElementById('btnSwap');\n\n function post(type, payload){\n parent.postMessage({ pluginMessage: { type: type, payload: payload||{} } }, '*');\n }\n\n document.getElementById('btnCapSource').onclick = function(){ post('capture-source'); };\n document.getElementById('btnCapTarget').onclick = function(){ post('capture-target'); };\n document.getElementById('btnClearTargets').onclick = function(){ post('clear-targets'); };\n $btnSwap.onclick = function(){ if (confirm('\u767b\u9332\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u5dee\u3057\u66ff\u3048\u307e\u3059\u304b\uff1f')) post('swap-now'); };\n\n onmessage = function(e){\n if (e.source !== parent) return;\n var m = e.data && e.data.pluginMessage;\n if (!m || m.type !== 'state') return;\n $sourceVal.textContent = m.payload.sourceName || "source \u672a\u767b\u9332";\n $btnSwap.disabled = !(m.payload.hasSource && m.payload.hasTarget);\n\n $targetList.innerHTML = "";\n for (var i=0; i<m.payload.targets.length; i++){\n var li = document.createElement("li");\n li.textContent = m.payload.targets[i].name;\n $targetList.appendChild(li);\n }\n };\n <\/script>\n<\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n\n\u5931\u6557\u3059\u308b\u5834\u5408\u3068\u6ce8\u610f\u70b9<\/h2>\n\n\n\n
\u4fdd\u5b58\u3057\u305fID\u304b\u3089\u30ce\u30fc\u30c9\u3092\u53d6\u5f97\u3057\u76f4\u3059\u305f\u3081\u3001\u767b\u9332\u5f8c\u306b\u524a\u9664\u3055\u308c\u305f\u3082\u306e\u306f\u5931\u6557\u3068\u3057\u3066\u6570\u3048\u307e\u3059\u3002\u30ed\u30fc\u30ab\u30eb\u306e\u7f6e\u63db\u5148\u304c\u89e3\u6c7a\u3067\u304d\u306a\u3044\u5834\u5408\u306f\u3001\u30ad\u30fc\u304b\u3089\u516c\u958b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8aad\u307f\u8fbc\u307f\u3092\u8a66\u307f\u307e\u3059\u3002\u516c\u958b\u72b6\u614b\u3068\u6a29\u9650\u306b\u3088\u3063\u3066\u5931\u6557\u3059\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u89aa\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3068\u305d\u306e\u5185\u90e8\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4e21\u65b9\u767b\u9332\u3059\u308b\u3068\u3001\u89aa\u306e\u5dee\u3057\u66ff\u3048\u3067\u5b50\u306e\u69cb\u9020\u304c\u5909\u308f\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u6700\u521d\u306f\u540c\u3058\u968e\u5c64\u306e\u5bfe\u8c61\u306b\u7d5e\u308a\u3001\u5dee\u3057\u66ff\u3048\u5f8c\u306b\u6b8b\u308a\u3092\u767b\u9332\u3057\u76f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u5b9f\u884c\u4e2d\u306e\u5225\u64cd\u4f5c\u306f\u51e6\u7406\u3057\u306a\u3044\u30ac\u30fc\u30c9\u3092\u5165\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u5171\u540c\u7de8\u96c6\u8005\u306e\u5909\u66f4\u307e\u3067\u505c\u6b62\u3059\u308b\u3082\u306e\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\u540d\u524d\u3060\u3051\u3092\u305d\u308d\u3048\u308b\u5834\u5408\u306f\u53c2\u7167\u5143\u3068\u306e\u540d\u524d\u6bd4\u8f03<\/a>\u3092\u4f7f\u3044\u5206\u3051\u307e\u3059\u3002<\/p>\n\n\n\n\u5143\u8a18\u4e8b\u306e\u64cd\u4f5c\u4f8b<\/h2>\n\n\n\n
\u4ee5\u4e0b\u306f\u5143\u8a18\u4e8b\u3067\u63b2\u8f09\u3057\u3066\u3044\u305f\u958b\u767a\u6642\u306e\u753b\u9762\u3067\u3059\u3002\u4eca\u56de\u306e\u30b3\u30fc\u30c9\u6539\u7a3f\u5f8c\u306b\u64ae\u5f71\u3057\u305f\u691c\u8a3c\u753b\u50cf\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u73fe\u884c\u306e\u8868\u793a\u3084\u5909\u66f4\u7d50\u679c\u306f\u3001\u8907\u88fd\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u3067\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n![\"\u4f5c\u6210\u3057\u305f\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u52d5\u4f5c\u3092\u691c\u8a3c\u3057\u3066\u3044\u308b\u753b\u9762\u3002\"](\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2025\/08\/2025-08-20_07h13_33-1024x350.png\")
2025\u5e7408\u6708\u306e\u5143\u8a18\u4e8b\u306e\u63b2\u8f09\u4f8b\u3002\u6539\u7a3f\u5f8c\u30b3\u30fc\u30c9\u306e\u691c\u8a3c\u753b\u50cf\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/figcaption><\/figure>\n\n\n\n![\"\u5404\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u5dee\u3057\u66ff\u3048\u51e6\u7406\u3092\u5b9f\u88c5\u3059\u308b\u6d41\u308c\u3092\u793a\u3057\u305f\u56f3\u3002\"](\"https:\/\/cg-method.com\/figma\/wp-content\/uploads\/2025\/08\/2025-08-20_07h17_23.png\")
2025\u5e7408\u6708\u306e\u5143\u8a18\u4e8b\u306e\u63b2\u8f09\u4f8b\u3002\u6539\u7a3f\u5f8c\u30b3\u30fc\u30c9\u306e\u691c\u8a3c\u753b\u50cf\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/figcaption><\/figure>\n\n\n\n\u691c\u8a3c\u7bc4\u56f2\u3068\u95a2\u9023\u30ac\u30a4\u30c9<\/h2>\n\n\n\n
\u4eca\u56de\u78ba\u8a8d\u3057\u305f\u306e\u306f\u63b2\u8f09\u30b3\u30fc\u30c9\u306e\u69cb\u6587\u3068\u3001\u8a72\u5f53\u3059\u308b\u5165\u529b\u30fb\u4f8b\u5916\u51e6\u7406\u306e\u30ed\u30fc\u30ab\u30eb\u6a21\u64ec\u691c\u8a3c\u3067\u3059\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u4e0a\u3067\u306e\u52d5\u4f5c\u78ba\u8a8d\u3068\u306f\u533a\u5225\u3057\u3066\u3044\u307e\u3059\u3002\u6539\u7a3f\u5f8c\u306e\u30b3\u30fc\u30c9\u3068\u3001\u5143\u8a18\u4e8b\u304c\u53c2\u7167\u3057\u3066\u3044\u305fGitHub\u4e0a\u306e\u7248\u304c\u4e00\u81f4\u3059\u308b\u3068\u306f\u9650\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\u958b\u767a\u74b0\u5883\u3068\u767b\u9332\u624b\u9806\u306fFigma\u30d7\u30e9\u30b0\u30a4\u30f3\u958b\u767a\u5165\u9580<\/a>\u3001\u516c\u958b\u306fCommunity\u3078\u306e\u7533\u8acb<\/a>\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\u3088\u304f\u3042\u308b\u8cea\u554f\uff1aFigma\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u4e00\u62ec\u5165\u308c\u66ff\u3048\u30d7\u30e9\u30b0\u30a4\u30f3\u3067\u8ff7\u3063\u305f\u3068\u304d\u306e\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8<\/h2>\n\n\n\n\u3053\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u3001\u4f55\u3092\u3057\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u540c\u3058\u90e8\u54c1\u3078\u8907\u6570\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u5dee\u3057\u66ff\u3048\u308b\u3068\u304d\u306b\u3001\u7f6e\u63db\u5148\u3068\u7f6e\u63db\u5bfe\u8c61\u3092\u5206\u3051\u3066\u767b\u9332\u3057\u3001\u767b\u9332\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306bswapComponent\u3092\u5b9f\u884c\u3057\u3066\u3001\u6210\u529f\u30fb\u5931\u6557\u306e\u4ef6\u6570\u3092\u901a\u77e5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u6a19\u6e96\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5165\u308c\u66ff\u3048\u3068\u3001\u3069\u3046\u4f7f\u3044\u5206\u3051\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u5c11\u6570\u306e\u90e8\u54c1\u306a\u3089Figma\u306e\u6a19\u6e96\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5165\u308c\u66ff\u3048\u3067\u3082\u5bfe\u5fdc\u3067\u304d\u307e\u3059\u3002\u7e70\u308a\u8fd4\u3057\u540c\u3058\u5dee\u3057\u66ff\u3048\u3092\u884c\u3046\u5834\u9762\u3067\u3001\u81ea\u4f5c\u306e\u767b\u9332UI\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u5dee\u3057\u66ff\u3048\u308b\u3068\u3001\u4e0a\u66f8\u304d\u306f\u5f15\u304d\u7d99\u304c\u308c\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
swapComponent\u306f\u6a19\u6e96UI\u3068\u540c\u69d8\u306e\u898f\u5247\u3067\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u3092\u5f15\u304d\u7d99\u304e\u307e\u3059\u304c\u3001\u3059\u3079\u3066\u306e\u5185\u5bb9\u304c\u7121\u6761\u4ef6\u306b\u4fdd\u6301\u3055\u308c\u308b\u4fdd\u8a3c\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u5dee\u3057\u66ff\u3048\u5f8c\u306b\u3001\u6587\u5b57\u3001\u753b\u50cf\u3001\u30b5\u30a4\u30ba\u3001\u30cd\u30b9\u30c8\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306a\u3069\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u7f6e\u63db\u5148\u306b\u306f\u3001\u4f55\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30bb\u30c3\u30c8\u306e\u65e2\u5b9a\u30d0\u30ea\u30a2\u30f3\u30c8\u3001\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u53c2\u7167\u5143\u3092\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u89aa\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3068\u5185\u90e8\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u3001\u4e21\u65b9\u767b\u9332\u3057\u3066\u3082\u3088\u3044\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u89aa\u306e\u5dee\u3057\u66ff\u3048\u3067\u3001\u5b50\u306e\u69cb\u9020\u304c\u5909\u308f\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u6700\u521d\u306f\u540c\u3058\u968e\u5c64\u306e\u5bfe\u8c61\u306b\u7d5e\u308a\u3001\u5dee\u3057\u66ff\u3048\u5f8c\u306b\u6b8b\u308a\u3092\u767b\u9332\u3057\u76f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
\u3053\u306e\u30b3\u30fc\u30c9\u306f\u3001Figma\u3067\u52d5\u4f5c\u78ba\u8a8d\u6e08\u307f\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u4eca\u56de\u78ba\u8a8d\u3057\u305f\u306e\u306f\u3001\u63b2\u8f09\u30b3\u30fc\u30c9\u306e\u69cb\u6587\u3068\u3001\u5165\u529b\u30fb\u4f8b\u5916\u51e6\u7406\u306e\u30ed\u30fc\u30ab\u30eb\u6a21\u64ec\u691c\u8a3c\u3067\u3059\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u4e0a\u3067\u306e\u52d5\u4f5c\u78ba\u8a8d\u3068\u306f\u533a\u5225\u3057\u3066\u3044\u307e\u3059\u3002\u8907\u88fd\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u3067\u3001\u78ba\u8a8d\u3057\u3066\u304b\u3089\u4f7f\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"
\u540c\u3058\u90e8\u54c1\u3078\u8907\u6570\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u5dee\u3057\u66ff\u3048\u308b\u3068\u304d\u306f\u3001\u7f6e\u63db\u5148\u3068\u7f6e\u63db\u5bfe\u8c61\u3092\u5206\u3051\u3066\u767b\u9332\u3057\u307e\u3059\u3002\u3053\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u767b\u9332\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306bswapComponent\u3092\u5b9f\u884c\u3057\u3001\u6210\u529f\u30fb\u5931\u6557\u306e\u4ef6\u6570\u3092\u901a\u77e5\u3057\u307e\u3059\u3002\u9078\u629e\u3059\u308b\u30ce\u30fc\u30c9\u304c\u90e8\u54c1\u5185\u90e8\u306e\u30ec\u30a4\u30e4 […]<\/p>\n","protected":false},"author":1,"featured_media":755,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","book_review_data":"","footnotes":"","ssp_meta_title":"Figma\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4e00\u62ec\u3067\u5165\u308c\u66ff\u3048\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\uff5c\u5bfe\u8c61\u767b\u9332\u3068\u5dee\u3057\u66ff\u3048","ssp_meta_description":"Figma\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u307e\u3068\u3081\u3066\u5165\u308c\u66ff\u3048\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30b3\u30fc\u30c9\u3002\u7f6e\u63db\u5148\u3068\u8907\u6570\u5bfe\u8c61\u306e\u767b\u9332\u3001\u91cd\u8907\u9664\u53bb\u3001\u975e\u540c\u671f\u306e\u30ce\u30fc\u30c9\u53d6\u5f97\u3001swapComponent\u3001\u5931\u6557\u6642\u306e\u78ba\u8a8d\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002"},"categories":[145],"tags":[],"class_list":["post-752","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-figma-tools"],"_links":{"self":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/comments?post=752"}],"version-history":[{"count":13,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/752\/revisions"}],"predecessor-version":[{"id":22867,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/752\/revisions\/22867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/media\/755"}],"wp:attachment":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/media?parent=752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/categories?post=752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/tags?post=752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u7f6e\u63db\u5148\u306b\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30bb\u30c3\u30c8\u306e\u65e2\u5b9a\u30d0\u30ea\u30a2\u30f3\u30c8\u3001\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u53c2\u7167\u5143\u3092\u5229\u7528\u3067\u304d\u307e\u3059\u3002\u5143\u306e\u4f8b\u306e\u300c\u8907\u6570\u9078\u629e\u53ef\u80fd\u300d\u3068\u3044\u3046\u8aac\u660e\u306b\u5bfe\u3057\u3066\u5148\u982d1\u4ef6\u3057\u304b\u767b\u9332\u3057\u306a\u3044\u51e6\u7406\u3092\u3001\u9078\u629e\u5168\u4ef6\u306e\u767b\u9332\u3078\u4fee\u6b63\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3059\u308b<\/h2>\n\n\n\n
Figma\u306eNew plugin\u3067\u751f\u6210\u3057\u305fmanifest\u3092\u57fa\u306b\u3001\u6b21\u306e\u8a2d\u5b9a\u3092\u4f7f\u3044\u307e\u3059\u3002\u63b2\u8f09\u4f8b\u3067\u306fid\u306e\u884c\u3060\u3051\u3092\u7701\u7565\u3057\u3066\u3044\u307e\u3059\u3002New plugin\u3067\u751f\u6210\u3057\u305fmanifest\u306eid\u3092\u6b8b\u3057\u3001\u8a2d\u5b9a\u9805\u76ee\u3092\u53cd\u6620\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u4f8b\u5168\u4f53\u3067manifest\u3092\u4e0a\u66f8\u304d\u3057\u305f\u308a\u3001id\u3092\u4efb\u610f\u306e\u6587\u5b57\u5217\u306b\u7f6e\u304d\u63db\u3048\u305f\u308a\u3057\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u30023\u30d5\u30a1\u30a4\u30eb\u3092\u540c\u3058\u30d5\u30a9\u30eb\u30c0\u3078\u4fdd\u5b58\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
manifest.json<\/h3>\n\n\n\n{\n "name": "\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u5165\u308c\u66ff\u3048",\n "api": "1.0.0",\n "main": "code.js",\n "ui": "ui.html",\n "editorType": [\n "figma"\n ],\n "documentAccess": "dynamic-page",\n "networkAccess": {\n "allowedDomains": [\n "none"\n ]\n }\n}<\/code><\/pre><\/div>\n\n\n\ncode.js<\/h3>\n\n\n\nfunction isInstance(n){ return n && n.type === "INSTANCE"; }\nfunction isComponent(n){ return n && n.type === "COMPONENT"; }\nfunction isComponentSet(n){ return n && n.type === "COMPONENT_SET"; }\n\nfunction nearestInstance(node){\n var cur = node;\n while (cur) {\n if (isInstance(cur)) return cur;\n cur = cur.parent;\n }\n return null;\n}\n\nasync function getComponentFromNode(node){\n if (!node) return null;\n if (isInstance(node)) return await node.getMainComponentAsync();\n if (isComponent(node)) return node;\n if (isComponentSet(node)) {\n if (node.defaultVariant) return node.defaultVariant;\n var i; for (i=0; i<node.children.length; i++) {\n var c = node.children[i];\n if (c && c.type === "COMPONENT") return c;\n }\n }\n return null;\n}\n\nasync function resolveComponent(componentNodeId, componentKey){\n if (componentNodeId && componentNodeId !== "") {\n try {\n var local = await figma.getNodeByIdAsync(componentNodeId);\n if (local && local.type === "COMPONENT") return local;\n } catch (_) { \/* \u30ad\u30fc\u304b\u3089\u306e\u89e3\u6c7a\u3092\u7d9a\u3051\u308b *\/ }\n }\n if (componentKey && componentKey !== "") {\n try {\n var imported = await figma.importComponentByKeyAsync(componentKey);\n if (imported) return imported;\n } catch (e) {}\n }\n return null;\n}\n\nfigma.showUI(__html__, { width: 280, height: 220 });\n\nvar stored = {\n targets: [], \/\/ {id, name}\n sourceId: "",\n sourceKey: "",\n sourceName: ""\n};\n\nfunction postState(){\n figma.ui.postMessage({\n type: "state",\n payload: {\n targets: stored.targets,\n sourceName: stored.sourceName,\n hasTarget: stored.targets.length > 0,\n hasSource: (stored.sourceId !== "" || stored.sourceKey !== "")\n }\n });\n}\n\nlet busy = false;\nfigma.ui.onmessage = async function(msg){\n if (!msg || busy) return;\n busy = true;\n try {\n if (msg.type === "capture-source") {\n var sel = figma.currentPage.selection;\n if (!sel || sel.length === 0) { figma.notify("source \u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044"); return; }\n var comp = await getComponentFromNode(sel[0]);\n if (!comp) { figma.notify("\u30e1\u30a4\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u53d6\u5f97\u3067\u304d\u307e\u305b\u3093"); return; }\n stored.sourceId = comp.id || "";\n stored.sourceKey = comp.key || "";\n stored.sourceName = comp.name || "(no name)";\n postState();\n return;\n }\n\n if (msg.type === "capture-target") {\n\n var sel = figma.currentPage.selection;\n if (!sel.length) { figma.notify("target \u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044"); return; }\n for (const node of sel) {\n const inst = nearestInstance(node);\n if (inst && !stored.targets.some(t => t.id === inst.id))\n stored.targets.push({ id: inst.id, name: inst.name });\n }\n postState();\n return;\n }\n\n if (msg.type === "clear-targets") {\n stored.targets = [];\n postState();\n return;\n }\n\n if (msg.type === "swap-now") {\n if (stored.targets.length === 0) { figma.notify("target \u672a\u767b\u9332"); return; }\n if (!stored.sourceId && !stored.sourceKey) { figma.notify("source \u672a\u767b\u9332"); return; }\n var dest = await resolveComponent(stored.sourceId, stored.sourceKey);\n if (!dest) { figma.notify("source \u3092\u89e3\u6c7a\u3067\u304d\u307e\u305b\u3093"); return; }\n\n var ok = 0, fail = 0;\n for (var i=0; i<stored.targets.length; i++){\n try {\n var t = await figma.getNodeByIdAsync(stored.targets[i].id);\n if (!t || t.type !== "INSTANCE") { fail++; continue; }\n t.swapComponent(dest);\n ok++;\n } catch(e){ fail++; }\n }\n figma.notify("\u5dee\u3057\u66ff\u3048\u5b8c\u4e86: \u6210\u529f " + ok + " \u4ef6 \/ \u5931\u6557 " + fail + " \u4ef6");\n return;\n }\n\n if (msg.type === "close") figma.closePlugin();\n } catch (_) { figma.notify("\u51e6\u7406\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\u5bfe\u8c61\u3092\u767b\u9332\u3057\u76f4\u3057\u3066\u304f\u3060\u3055\u3044", {error:true}); }\n finally { busy = false; }\n};\n\npostState();<\/code><\/pre><\/div>\n\n\n\nui.html<\/h3>\n\n\n\n<!doctype html>\n<html>\n<head>\n <meta charset="utf-8" \/>\n <title>Swap Multi Target<\/title>\n <style>\n body { font-family: Inter, sans-serif; margin: 12px; font-size: 12px; }\n .row { display: flex; align-items: center; margin-bottom: 8px; }\n .val { flex: 1; padding: 6px 8px; background: #f5f5f5; border-radius: 6px; }\n button { margin-left: 6px; font-size: 12px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; }\n button.primary { background: #18a0fb; color: #fff; border-color: #18a0fb; }\n button:disabled { opacity: 0.6; cursor: not-allowed; }\n ul { margin: 4px 0; padding-left: 16px; }\n <\/style>\n<\/head>\n<body>\n <div class="row">\n <div class="val" id="sourceVal">source \u672a\u767b\u9332<\/div>\n <button id="btnCapSource">\u767b\u9332<\/button>\n <\/div>\n <div class="row">\n <div class="val">target \u8907\u6570\u53ef<\/div>\n <button id="btnCapTarget">\u8ffd\u52a0<\/button>\n <button id="btnClearTargets">\u30af\u30ea\u30a2<\/button>\n <\/div>\n <ul id="targetList"><\/ul>\n <div class="row">\n <button id="btnSwap" class="primary" disabled style="flex:1;">\u5dee\u3057\u66ff\u3048\u5b9f\u884c<\/button>\n <\/div>\n\n <script>\n var $sourceVal = document.getElementById('sourceVal');\n var $targetList = document.getElementById('targetList');\n var $btnSwap = document.getElementById('btnSwap');\n\n function post(type, payload){\n parent.postMessage({ pluginMessage: { type: type, payload: payload||{} } }, '*');\n }\n\n document.getElementById('btnCapSource').onclick = function(){ post('capture-source'); };\n document.getElementById('btnCapTarget').onclick = function(){ post('capture-target'); };\n document.getElementById('btnClearTargets').onclick = function(){ post('clear-targets'); };\n $btnSwap.onclick = function(){ if (confirm('\u767b\u9332\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u5dee\u3057\u66ff\u3048\u307e\u3059\u304b\uff1f')) post('swap-now'); };\n\n onmessage = function(e){\n if (e.source !== parent) return;\n var m = e.data && e.data.pluginMessage;\n if (!m || m.type !== 'state') return;\n $sourceVal.textContent = m.payload.sourceName || "source \u672a\u767b\u9332";\n $btnSwap.disabled = !(m.payload.hasSource && m.payload.hasTarget);\n\n $targetList.innerHTML = "";\n for (var i=0; i<m.payload.targets.length; i++){\n var li = document.createElement("li");\n li.textContent = m.payload.targets[i].name;\n $targetList.appendChild(li);\n }\n };\n <\/script>\n<\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n\n\u5931\u6557\u3059\u308b\u5834\u5408\u3068\u6ce8\u610f\u70b9<\/h2>\n\n\n\n
\u4fdd\u5b58\u3057\u305fID\u304b\u3089\u30ce\u30fc\u30c9\u3092\u53d6\u5f97\u3057\u76f4\u3059\u305f\u3081\u3001\u767b\u9332\u5f8c\u306b\u524a\u9664\u3055\u308c\u305f\u3082\u306e\u306f\u5931\u6557\u3068\u3057\u3066\u6570\u3048\u307e\u3059\u3002\u30ed\u30fc\u30ab\u30eb\u306e\u7f6e\u63db\u5148\u304c\u89e3\u6c7a\u3067\u304d\u306a\u3044\u5834\u5408\u306f\u3001\u30ad\u30fc\u304b\u3089\u516c\u958b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8aad\u307f\u8fbc\u307f\u3092\u8a66\u307f\u307e\u3059\u3002\u516c\u958b\u72b6\u614b\u3068\u6a29\u9650\u306b\u3088\u3063\u3066\u5931\u6557\u3059\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u89aa\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3068\u305d\u306e\u5185\u90e8\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4e21\u65b9\u767b\u9332\u3059\u308b\u3068\u3001\u89aa\u306e\u5dee\u3057\u66ff\u3048\u3067\u5b50\u306e\u69cb\u9020\u304c\u5909\u308f\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u6700\u521d\u306f\u540c\u3058\u968e\u5c64\u306e\u5bfe\u8c61\u306b\u7d5e\u308a\u3001\u5dee\u3057\u66ff\u3048\u5f8c\u306b\u6b8b\u308a\u3092\u767b\u9332\u3057\u76f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u5b9f\u884c\u4e2d\u306e\u5225\u64cd\u4f5c\u306f\u51e6\u7406\u3057\u306a\u3044\u30ac\u30fc\u30c9\u3092\u5165\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u5171\u540c\u7de8\u96c6\u8005\u306e\u5909\u66f4\u307e\u3067\u505c\u6b62\u3059\u308b\u3082\u306e\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\u540d\u524d\u3060\u3051\u3092\u305d\u308d\u3048\u308b\u5834\u5408\u306f\u53c2\u7167\u5143\u3068\u306e\u540d\u524d\u6bd4\u8f03<\/a>\u3092\u4f7f\u3044\u5206\u3051\u307e\u3059\u3002<\/p>\n\n\n\n\u5143\u8a18\u4e8b\u306e\u64cd\u4f5c\u4f8b<\/h2>\n\n\n\n
\u4ee5\u4e0b\u306f\u5143\u8a18\u4e8b\u3067\u63b2\u8f09\u3057\u3066\u3044\u305f\u958b\u767a\u6642\u306e\u753b\u9762\u3067\u3059\u3002\u4eca\u56de\u306e\u30b3\u30fc\u30c9\u6539\u7a3f\u5f8c\u306b\u64ae\u5f71\u3057\u305f\u691c\u8a3c\u753b\u50cf\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u73fe\u884c\u306e\u8868\u793a\u3084\u5909\u66f4\u7d50\u679c\u306f\u3001\u8907\u88fd\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u3067\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n2025\u5e7408\u6708\u306e\u5143\u8a18\u4e8b\u306e\u63b2\u8f09\u4f8b\u3002\u6539\u7a3f\u5f8c\u30b3\u30fc\u30c9\u306e\u691c\u8a3c\u753b\u50cf\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/figcaption><\/figure>\n\n\n\n2025\u5e7408\u6708\u306e\u5143\u8a18\u4e8b\u306e\u63b2\u8f09\u4f8b\u3002\u6539\u7a3f\u5f8c\u30b3\u30fc\u30c9\u306e\u691c\u8a3c\u753b\u50cf\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/figcaption><\/figure>\n\n\n\n\u691c\u8a3c\u7bc4\u56f2\u3068\u95a2\u9023\u30ac\u30a4\u30c9<\/h2>\n\n\n\n
\u4eca\u56de\u78ba\u8a8d\u3057\u305f\u306e\u306f\u63b2\u8f09\u30b3\u30fc\u30c9\u306e\u69cb\u6587\u3068\u3001\u8a72\u5f53\u3059\u308b\u5165\u529b\u30fb\u4f8b\u5916\u51e6\u7406\u306e\u30ed\u30fc\u30ab\u30eb\u6a21\u64ec\u691c\u8a3c\u3067\u3059\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u4e0a\u3067\u306e\u52d5\u4f5c\u78ba\u8a8d\u3068\u306f\u533a\u5225\u3057\u3066\u3044\u307e\u3059\u3002\u6539\u7a3f\u5f8c\u306e\u30b3\u30fc\u30c9\u3068\u3001\u5143\u8a18\u4e8b\u304c\u53c2\u7167\u3057\u3066\u3044\u305fGitHub\u4e0a\u306e\u7248\u304c\u4e00\u81f4\u3059\u308b\u3068\u306f\u9650\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\u958b\u767a\u74b0\u5883\u3068\u767b\u9332\u624b\u9806\u306fFigma\u30d7\u30e9\u30b0\u30a4\u30f3\u958b\u767a\u5165\u9580<\/a>\u3001\u516c\u958b\u306fCommunity\u3078\u306e\u7533\u8acb<\/a>\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\u3088\u304f\u3042\u308b\u8cea\u554f\uff1aFigma\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u4e00\u62ec\u5165\u308c\u66ff\u3048\u30d7\u30e9\u30b0\u30a4\u30f3\u3067\u8ff7\u3063\u305f\u3068\u304d\u306e\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8<\/h2>\n\n\n\n\u3053\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u3001\u4f55\u3092\u3057\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u540c\u3058\u90e8\u54c1\u3078\u8907\u6570\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u5dee\u3057\u66ff\u3048\u308b\u3068\u304d\u306b\u3001\u7f6e\u63db\u5148\u3068\u7f6e\u63db\u5bfe\u8c61\u3092\u5206\u3051\u3066\u767b\u9332\u3057\u3001\u767b\u9332\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306bswapComponent\u3092\u5b9f\u884c\u3057\u3066\u3001\u6210\u529f\u30fb\u5931\u6557\u306e\u4ef6\u6570\u3092\u901a\u77e5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u6a19\u6e96\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5165\u308c\u66ff\u3048\u3068\u3001\u3069\u3046\u4f7f\u3044\u5206\u3051\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u5c11\u6570\u306e\u90e8\u54c1\u306a\u3089Figma\u306e\u6a19\u6e96\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5165\u308c\u66ff\u3048\u3067\u3082\u5bfe\u5fdc\u3067\u304d\u307e\u3059\u3002\u7e70\u308a\u8fd4\u3057\u540c\u3058\u5dee\u3057\u66ff\u3048\u3092\u884c\u3046\u5834\u9762\u3067\u3001\u81ea\u4f5c\u306e\u767b\u9332UI\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u5dee\u3057\u66ff\u3048\u308b\u3068\u3001\u4e0a\u66f8\u304d\u306f\u5f15\u304d\u7d99\u304c\u308c\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
swapComponent\u306f\u6a19\u6e96UI\u3068\u540c\u69d8\u306e\u898f\u5247\u3067\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u3092\u5f15\u304d\u7d99\u304e\u307e\u3059\u304c\u3001\u3059\u3079\u3066\u306e\u5185\u5bb9\u304c\u7121\u6761\u4ef6\u306b\u4fdd\u6301\u3055\u308c\u308b\u4fdd\u8a3c\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u5dee\u3057\u66ff\u3048\u5f8c\u306b\u3001\u6587\u5b57\u3001\u753b\u50cf\u3001\u30b5\u30a4\u30ba\u3001\u30cd\u30b9\u30c8\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306a\u3069\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u7f6e\u63db\u5148\u306b\u306f\u3001\u4f55\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30bb\u30c3\u30c8\u306e\u65e2\u5b9a\u30d0\u30ea\u30a2\u30f3\u30c8\u3001\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u53c2\u7167\u5143\u3092\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u89aa\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3068\u5185\u90e8\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u3001\u4e21\u65b9\u767b\u9332\u3057\u3066\u3082\u3088\u3044\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u89aa\u306e\u5dee\u3057\u66ff\u3048\u3067\u3001\u5b50\u306e\u69cb\u9020\u304c\u5909\u308f\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u6700\u521d\u306f\u540c\u3058\u968e\u5c64\u306e\u5bfe\u8c61\u306b\u7d5e\u308a\u3001\u5dee\u3057\u66ff\u3048\u5f8c\u306b\u6b8b\u308a\u3092\u767b\u9332\u3057\u76f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
\u3053\u306e\u30b3\u30fc\u30c9\u306f\u3001Figma\u3067\u52d5\u4f5c\u78ba\u8a8d\u6e08\u307f\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u4eca\u56de\u78ba\u8a8d\u3057\u305f\u306e\u306f\u3001\u63b2\u8f09\u30b3\u30fc\u30c9\u306e\u69cb\u6587\u3068\u3001\u5165\u529b\u30fb\u4f8b\u5916\u51e6\u7406\u306e\u30ed\u30fc\u30ab\u30eb\u6a21\u64ec\u691c\u8a3c\u3067\u3059\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u4e0a\u3067\u306e\u52d5\u4f5c\u78ba\u8a8d\u3068\u306f\u533a\u5225\u3057\u3066\u3044\u307e\u3059\u3002\u8907\u88fd\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u3067\u3001\u78ba\u8a8d\u3057\u3066\u304b\u3089\u4f7f\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"
\u540c\u3058\u90e8\u54c1\u3078\u8907\u6570\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u5dee\u3057\u66ff\u3048\u308b\u3068\u304d\u306f\u3001\u7f6e\u63db\u5148\u3068\u7f6e\u63db\u5bfe\u8c61\u3092\u5206\u3051\u3066\u767b\u9332\u3057\u307e\u3059\u3002\u3053\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u767b\u9332\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306bswapComponent\u3092\u5b9f\u884c\u3057\u3001\u6210\u529f\u30fb\u5931\u6557\u306e\u4ef6\u6570\u3092\u901a\u77e5\u3057\u307e\u3059\u3002\u9078\u629e\u3059\u308b\u30ce\u30fc\u30c9\u304c\u90e8\u54c1\u5185\u90e8\u306e\u30ec\u30a4\u30e4 […]<\/p>\n","protected":false},"author":1,"featured_media":755,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","book_review_data":"","footnotes":"","ssp_meta_title":"Figma\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4e00\u62ec\u3067\u5165\u308c\u66ff\u3048\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\uff5c\u5bfe\u8c61\u767b\u9332\u3068\u5dee\u3057\u66ff\u3048","ssp_meta_description":"Figma\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u307e\u3068\u3081\u3066\u5165\u308c\u66ff\u3048\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30b3\u30fc\u30c9\u3002\u7f6e\u63db\u5148\u3068\u8907\u6570\u5bfe\u8c61\u306e\u767b\u9332\u3001\u91cd\u8907\u9664\u53bb\u3001\u975e\u540c\u671f\u306e\u30ce\u30fc\u30c9\u53d6\u5f97\u3001swapComponent\u3001\u5931\u6557\u6642\u306e\u78ba\u8a8d\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002"},"categories":[145],"tags":[],"class_list":["post-752","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-figma-tools"],"_links":{"self":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/comments?post=752"}],"version-history":[{"count":13,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/752\/revisions"}],"predecessor-version":[{"id":22867,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/752\/revisions\/22867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/media\/755"}],"wp:attachment":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/media?parent=752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/categories?post=752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/tags?post=752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
{\n "name": "\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u5165\u308c\u66ff\u3048",\n "api": "1.0.0",\n "main": "code.js",\n "ui": "ui.html",\n "editorType": [\n "figma"\n ],\n "documentAccess": "dynamic-page",\n "networkAccess": {\n "allowedDomains": [\n "none"\n ]\n }\n}<\/code><\/pre><\/div>\n\n\n\ncode.js<\/h3>\n\n\n\nfunction isInstance(n){ return n && n.type === "INSTANCE"; }\nfunction isComponent(n){ return n && n.type === "COMPONENT"; }\nfunction isComponentSet(n){ return n && n.type === "COMPONENT_SET"; }\n\nfunction nearestInstance(node){\n var cur = node;\n while (cur) {\n if (isInstance(cur)) return cur;\n cur = cur.parent;\n }\n return null;\n}\n\nasync function getComponentFromNode(node){\n if (!node) return null;\n if (isInstance(node)) return await node.getMainComponentAsync();\n if (isComponent(node)) return node;\n if (isComponentSet(node)) {\n if (node.defaultVariant) return node.defaultVariant;\n var i; for (i=0; i<node.children.length; i++) {\n var c = node.children[i];\n if (c && c.type === "COMPONENT") return c;\n }\n }\n return null;\n}\n\nasync function resolveComponent(componentNodeId, componentKey){\n if (componentNodeId && componentNodeId !== "") {\n try {\n var local = await figma.getNodeByIdAsync(componentNodeId);\n if (local && local.type === "COMPONENT") return local;\n } catch (_) { \/* \u30ad\u30fc\u304b\u3089\u306e\u89e3\u6c7a\u3092\u7d9a\u3051\u308b *\/ }\n }\n if (componentKey && componentKey !== "") {\n try {\n var imported = await figma.importComponentByKeyAsync(componentKey);\n if (imported) return imported;\n } catch (e) {}\n }\n return null;\n}\n\nfigma.showUI(__html__, { width: 280, height: 220 });\n\nvar stored = {\n targets: [], \/\/ {id, name}\n sourceId: "",\n sourceKey: "",\n sourceName: ""\n};\n\nfunction postState(){\n figma.ui.postMessage({\n type: "state",\n payload: {\n targets: stored.targets,\n sourceName: stored.sourceName,\n hasTarget: stored.targets.length > 0,\n hasSource: (stored.sourceId !== "" || stored.sourceKey !== "")\n }\n });\n}\n\nlet busy = false;\nfigma.ui.onmessage = async function(msg){\n if (!msg || busy) return;\n busy = true;\n try {\n if (msg.type === "capture-source") {\n var sel = figma.currentPage.selection;\n if (!sel || sel.length === 0) { figma.notify("source \u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044"); return; }\n var comp = await getComponentFromNode(sel[0]);\n if (!comp) { figma.notify("\u30e1\u30a4\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u53d6\u5f97\u3067\u304d\u307e\u305b\u3093"); return; }\n stored.sourceId = comp.id || "";\n stored.sourceKey = comp.key || "";\n stored.sourceName = comp.name || "(no name)";\n postState();\n return;\n }\n\n if (msg.type === "capture-target") {\n\n var sel = figma.currentPage.selection;\n if (!sel.length) { figma.notify("target \u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044"); return; }\n for (const node of sel) {\n const inst = nearestInstance(node);\n if (inst && !stored.targets.some(t => t.id === inst.id))\n stored.targets.push({ id: inst.id, name: inst.name });\n }\n postState();\n return;\n }\n\n if (msg.type === "clear-targets") {\n stored.targets = [];\n postState();\n return;\n }\n\n if (msg.type === "swap-now") {\n if (stored.targets.length === 0) { figma.notify("target \u672a\u767b\u9332"); return; }\n if (!stored.sourceId && !stored.sourceKey) { figma.notify("source \u672a\u767b\u9332"); return; }\n var dest = await resolveComponent(stored.sourceId, stored.sourceKey);\n if (!dest) { figma.notify("source \u3092\u89e3\u6c7a\u3067\u304d\u307e\u305b\u3093"); return; }\n\n var ok = 0, fail = 0;\n for (var i=0; i<stored.targets.length; i++){\n try {\n var t = await figma.getNodeByIdAsync(stored.targets[i].id);\n if (!t || t.type !== "INSTANCE") { fail++; continue; }\n t.swapComponent(dest);\n ok++;\n } catch(e){ fail++; }\n }\n figma.notify("\u5dee\u3057\u66ff\u3048\u5b8c\u4e86: \u6210\u529f " + ok + " \u4ef6 \/ \u5931\u6557 " + fail + " \u4ef6");\n return;\n }\n\n if (msg.type === "close") figma.closePlugin();\n } catch (_) { figma.notify("\u51e6\u7406\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\u5bfe\u8c61\u3092\u767b\u9332\u3057\u76f4\u3057\u3066\u304f\u3060\u3055\u3044", {error:true}); }\n finally { busy = false; }\n};\n\npostState();<\/code><\/pre><\/div>\n\n\n\nui.html<\/h3>\n\n\n\n<!doctype html>\n<html>\n<head>\n <meta charset="utf-8" \/>\n <title>Swap Multi Target<\/title>\n <style>\n body { font-family: Inter, sans-serif; margin: 12px; font-size: 12px; }\n .row { display: flex; align-items: center; margin-bottom: 8px; }\n .val { flex: 1; padding: 6px 8px; background: #f5f5f5; border-radius: 6px; }\n button { margin-left: 6px; font-size: 12px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; }\n button.primary { background: #18a0fb; color: #fff; border-color: #18a0fb; }\n button:disabled { opacity: 0.6; cursor: not-allowed; }\n ul { margin: 4px 0; padding-left: 16px; }\n <\/style>\n<\/head>\n<body>\n <div class="row">\n <div class="val" id="sourceVal">source \u672a\u767b\u9332<\/div>\n <button id="btnCapSource">\u767b\u9332<\/button>\n <\/div>\n <div class="row">\n <div class="val">target \u8907\u6570\u53ef<\/div>\n <button id="btnCapTarget">\u8ffd\u52a0<\/button>\n <button id="btnClearTargets">\u30af\u30ea\u30a2<\/button>\n <\/div>\n <ul id="targetList"><\/ul>\n <div class="row">\n <button id="btnSwap" class="primary" disabled style="flex:1;">\u5dee\u3057\u66ff\u3048\u5b9f\u884c<\/button>\n <\/div>\n\n <script>\n var $sourceVal = document.getElementById('sourceVal');\n var $targetList = document.getElementById('targetList');\n var $btnSwap = document.getElementById('btnSwap');\n\n function post(type, payload){\n parent.postMessage({ pluginMessage: { type: type, payload: payload||{} } }, '*');\n }\n\n document.getElementById('btnCapSource').onclick = function(){ post('capture-source'); };\n document.getElementById('btnCapTarget').onclick = function(){ post('capture-target'); };\n document.getElementById('btnClearTargets').onclick = function(){ post('clear-targets'); };\n $btnSwap.onclick = function(){ if (confirm('\u767b\u9332\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u5dee\u3057\u66ff\u3048\u307e\u3059\u304b\uff1f')) post('swap-now'); };\n\n onmessage = function(e){\n if (e.source !== parent) return;\n var m = e.data && e.data.pluginMessage;\n if (!m || m.type !== 'state') return;\n $sourceVal.textContent = m.payload.sourceName || "source \u672a\u767b\u9332";\n $btnSwap.disabled = !(m.payload.hasSource && m.payload.hasTarget);\n\n $targetList.innerHTML = "";\n for (var i=0; i<m.payload.targets.length; i++){\n var li = document.createElement("li");\n li.textContent = m.payload.targets[i].name;\n $targetList.appendChild(li);\n }\n };\n <\/script>\n<\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n\n\u5931\u6557\u3059\u308b\u5834\u5408\u3068\u6ce8\u610f\u70b9<\/h2>\n\n\n\n
\u4fdd\u5b58\u3057\u305fID\u304b\u3089\u30ce\u30fc\u30c9\u3092\u53d6\u5f97\u3057\u76f4\u3059\u305f\u3081\u3001\u767b\u9332\u5f8c\u306b\u524a\u9664\u3055\u308c\u305f\u3082\u306e\u306f\u5931\u6557\u3068\u3057\u3066\u6570\u3048\u307e\u3059\u3002\u30ed\u30fc\u30ab\u30eb\u306e\u7f6e\u63db\u5148\u304c\u89e3\u6c7a\u3067\u304d\u306a\u3044\u5834\u5408\u306f\u3001\u30ad\u30fc\u304b\u3089\u516c\u958b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8aad\u307f\u8fbc\u307f\u3092\u8a66\u307f\u307e\u3059\u3002\u516c\u958b\u72b6\u614b\u3068\u6a29\u9650\u306b\u3088\u3063\u3066\u5931\u6557\u3059\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\u89aa\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3068\u305d\u306e\u5185\u90e8\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4e21\u65b9\u767b\u9332\u3059\u308b\u3068\u3001\u89aa\u306e\u5dee\u3057\u66ff\u3048\u3067\u5b50\u306e\u69cb\u9020\u304c\u5909\u308f\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u6700\u521d\u306f\u540c\u3058\u968e\u5c64\u306e\u5bfe\u8c61\u306b\u7d5e\u308a\u3001\u5dee\u3057\u66ff\u3048\u5f8c\u306b\u6b8b\u308a\u3092\u767b\u9332\u3057\u76f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u5b9f\u884c\u4e2d\u306e\u5225\u64cd\u4f5c\u306f\u51e6\u7406\u3057\u306a\u3044\u30ac\u30fc\u30c9\u3092\u5165\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u5171\u540c\u7de8\u96c6\u8005\u306e\u5909\u66f4\u307e\u3067\u505c\u6b62\u3059\u308b\u3082\u306e\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\u540d\u524d\u3060\u3051\u3092\u305d\u308d\u3048\u308b\u5834\u5408\u306f\u53c2\u7167\u5143\u3068\u306e\u540d\u524d\u6bd4\u8f03<\/a>\u3092\u4f7f\u3044\u5206\u3051\u307e\u3059\u3002<\/p>\n\n\n\n\u5143\u8a18\u4e8b\u306e\u64cd\u4f5c\u4f8b<\/h2>\n\n\n\n
\u4ee5\u4e0b\u306f\u5143\u8a18\u4e8b\u3067\u63b2\u8f09\u3057\u3066\u3044\u305f\u958b\u767a\u6642\u306e\u753b\u9762\u3067\u3059\u3002\u4eca\u56de\u306e\u30b3\u30fc\u30c9\u6539\u7a3f\u5f8c\u306b\u64ae\u5f71\u3057\u305f\u691c\u8a3c\u753b\u50cf\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u73fe\u884c\u306e\u8868\u793a\u3084\u5909\u66f4\u7d50\u679c\u306f\u3001\u8907\u88fd\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u3067\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n2025\u5e7408\u6708\u306e\u5143\u8a18\u4e8b\u306e\u63b2\u8f09\u4f8b\u3002\u6539\u7a3f\u5f8c\u30b3\u30fc\u30c9\u306e\u691c\u8a3c\u753b\u50cf\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/figcaption><\/figure>\n\n\n\n2025\u5e7408\u6708\u306e\u5143\u8a18\u4e8b\u306e\u63b2\u8f09\u4f8b\u3002\u6539\u7a3f\u5f8c\u30b3\u30fc\u30c9\u306e\u691c\u8a3c\u753b\u50cf\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/figcaption><\/figure>\n\n\n\n\u691c\u8a3c\u7bc4\u56f2\u3068\u95a2\u9023\u30ac\u30a4\u30c9<\/h2>\n\n\n\n
\u4eca\u56de\u78ba\u8a8d\u3057\u305f\u306e\u306f\u63b2\u8f09\u30b3\u30fc\u30c9\u306e\u69cb\u6587\u3068\u3001\u8a72\u5f53\u3059\u308b\u5165\u529b\u30fb\u4f8b\u5916\u51e6\u7406\u306e\u30ed\u30fc\u30ab\u30eb\u6a21\u64ec\u691c\u8a3c\u3067\u3059\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u4e0a\u3067\u306e\u52d5\u4f5c\u78ba\u8a8d\u3068\u306f\u533a\u5225\u3057\u3066\u3044\u307e\u3059\u3002\u6539\u7a3f\u5f8c\u306e\u30b3\u30fc\u30c9\u3068\u3001\u5143\u8a18\u4e8b\u304c\u53c2\u7167\u3057\u3066\u3044\u305fGitHub\u4e0a\u306e\u7248\u304c\u4e00\u81f4\u3059\u308b\u3068\u306f\u9650\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\u958b\u767a\u74b0\u5883\u3068\u767b\u9332\u624b\u9806\u306fFigma\u30d7\u30e9\u30b0\u30a4\u30f3\u958b\u767a\u5165\u9580<\/a>\u3001\u516c\u958b\u306fCommunity\u3078\u306e\u7533\u8acb<\/a>\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\u3088\u304f\u3042\u308b\u8cea\u554f\uff1aFigma\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u4e00\u62ec\u5165\u308c\u66ff\u3048\u30d7\u30e9\u30b0\u30a4\u30f3\u3067\u8ff7\u3063\u305f\u3068\u304d\u306e\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8<\/h2>\n\n\n\n\u3053\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u3001\u4f55\u3092\u3057\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u540c\u3058\u90e8\u54c1\u3078\u8907\u6570\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u5dee\u3057\u66ff\u3048\u308b\u3068\u304d\u306b\u3001\u7f6e\u63db\u5148\u3068\u7f6e\u63db\u5bfe\u8c61\u3092\u5206\u3051\u3066\u767b\u9332\u3057\u3001\u767b\u9332\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306bswapComponent\u3092\u5b9f\u884c\u3057\u3066\u3001\u6210\u529f\u30fb\u5931\u6557\u306e\u4ef6\u6570\u3092\u901a\u77e5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u6a19\u6e96\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5165\u308c\u66ff\u3048\u3068\u3001\u3069\u3046\u4f7f\u3044\u5206\u3051\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u5c11\u6570\u306e\u90e8\u54c1\u306a\u3089Figma\u306e\u6a19\u6e96\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5165\u308c\u66ff\u3048\u3067\u3082\u5bfe\u5fdc\u3067\u304d\u307e\u3059\u3002\u7e70\u308a\u8fd4\u3057\u540c\u3058\u5dee\u3057\u66ff\u3048\u3092\u884c\u3046\u5834\u9762\u3067\u3001\u81ea\u4f5c\u306e\u767b\u9332UI\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u5dee\u3057\u66ff\u3048\u308b\u3068\u3001\u4e0a\u66f8\u304d\u306f\u5f15\u304d\u7d99\u304c\u308c\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
swapComponent\u306f\u6a19\u6e96UI\u3068\u540c\u69d8\u306e\u898f\u5247\u3067\u30aa\u30fc\u30d0\u30fc\u30e9\u30a4\u30c9\u3092\u5f15\u304d\u7d99\u304e\u307e\u3059\u304c\u3001\u3059\u3079\u3066\u306e\u5185\u5bb9\u304c\u7121\u6761\u4ef6\u306b\u4fdd\u6301\u3055\u308c\u308b\u4fdd\u8a3c\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u5dee\u3057\u66ff\u3048\u5f8c\u306b\u3001\u6587\u5b57\u3001\u753b\u50cf\u3001\u30b5\u30a4\u30ba\u3001\u30cd\u30b9\u30c8\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306a\u3069\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u7f6e\u63db\u5148\u306b\u306f\u3001\u4f55\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30bb\u30c3\u30c8\u306e\u65e2\u5b9a\u30d0\u30ea\u30a2\u30f3\u30c8\u3001\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u53c2\u7167\u5143\u3092\u5229\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u89aa\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3068\u5185\u90e8\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u3001\u4e21\u65b9\u767b\u9332\u3057\u3066\u3082\u3088\u3044\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u89aa\u306e\u5dee\u3057\u66ff\u3048\u3067\u3001\u5b50\u306e\u69cb\u9020\u304c\u5909\u308f\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u6700\u521d\u306f\u540c\u3058\u968e\u5c64\u306e\u5bfe\u8c61\u306b\u7d5e\u308a\u3001\u5dee\u3057\u66ff\u3048\u5f8c\u306b\u6b8b\u308a\u3092\u767b\u9332\u3057\u76f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
\u3053\u306e\u30b3\u30fc\u30c9\u306f\u3001Figma\u3067\u52d5\u4f5c\u78ba\u8a8d\u6e08\u307f\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n
\u4eca\u56de\u78ba\u8a8d\u3057\u305f\u306e\u306f\u3001\u63b2\u8f09\u30b3\u30fc\u30c9\u306e\u69cb\u6587\u3068\u3001\u5165\u529b\u30fb\u4f8b\u5916\u51e6\u7406\u306e\u30ed\u30fc\u30ab\u30eb\u6a21\u64ec\u691c\u8a3c\u3067\u3059\u3002Figma\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u4e0a\u3067\u306e\u52d5\u4f5c\u78ba\u8a8d\u3068\u306f\u533a\u5225\u3057\u3066\u3044\u307e\u3059\u3002\u8907\u88fd\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u3067\u3001\u78ba\u8a8d\u3057\u3066\u304b\u3089\u4f7f\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"
\u540c\u3058\u90e8\u54c1\u3078\u8907\u6570\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u5dee\u3057\u66ff\u3048\u308b\u3068\u304d\u306f\u3001\u7f6e\u63db\u5148\u3068\u7f6e\u63db\u5bfe\u8c61\u3092\u5206\u3051\u3066\u767b\u9332\u3057\u307e\u3059\u3002\u3053\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306f\u767b\u9332\u3057\u305f\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306bswapComponent\u3092\u5b9f\u884c\u3057\u3001\u6210\u529f\u30fb\u5931\u6557\u306e\u4ef6\u6570\u3092\u901a\u77e5\u3057\u307e\u3059\u3002\u9078\u629e\u3059\u308b\u30ce\u30fc\u30c9\u304c\u90e8\u54c1\u5185\u90e8\u306e\u30ec\u30a4\u30e4 […]<\/p>\n","protected":false},"author":1,"featured_media":755,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","book_review_data":"","footnotes":"","ssp_meta_title":"Figma\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4e00\u62ec\u3067\u5165\u308c\u66ff\u3048\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\uff5c\u5bfe\u8c61\u767b\u9332\u3068\u5dee\u3057\u66ff\u3048","ssp_meta_description":"Figma\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u307e\u3068\u3081\u3066\u5165\u308c\u66ff\u3048\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u30b3\u30fc\u30c9\u3002\u7f6e\u63db\u5148\u3068\u8907\u6570\u5bfe\u8c61\u306e\u767b\u9332\u3001\u91cd\u8907\u9664\u53bb\u3001\u975e\u540c\u671f\u306e\u30ce\u30fc\u30c9\u53d6\u5f97\u3001swapComponent\u3001\u5931\u6557\u6642\u306e\u78ba\u8a8d\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002"},"categories":[145],"tags":[],"class_list":["post-752","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-figma-tools"],"_links":{"self":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/comments?post=752"}],"version-history":[{"count":13,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/752\/revisions"}],"predecessor-version":[{"id":22867,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/posts\/752\/revisions\/22867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/media\/755"}],"wp:attachment":[{"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/media?parent=752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/categories?post=752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cg-method.com\/figma\/wp-json\/wp\/v2\/tags?post=752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}