Figmaの選択レイヤーURLを一括取得するプラグイン｜fileKeyとノードID

2025年6月8日2026年10月3日

複数のFigmaレイヤーへのリンクをまとめる場合、ファイルキーとノードIDからURLを作れます。この自作プラグインは選択中のレイヤーの名前とURLをタブ区切りで表示し、一覧へコピーするためのものです。URLを生成しても、閲覧権限が追加されるわけではありません。

1件の標準コピーと一括生成の違い

1件だけならFigmaの選択範囲へのリンクをコピーする機能が使えます。同じファイルの多数のレイヤーを一覧化する場合に、このプラグインを使います。作成したリンクを開く人には、元のファイルのアクセス権限が必要です。

fileKeyは対象ファイルのURLから取得する

https://www.figma.com/design/FILE_KEY/ファイル名のFILE_KEYがファイルキーです。旧形式の/file/でも、次の部分がキーになります。入力するのはキーだけです。

figma.fileKeyはprivate pluginなどに限定されたAPIです。無料・有料の区分だけで利用可否を説明せず、この例では利用者がキーを入力します。誤ったキーを入力すると、ほかのファイルへのURLになるため、生成前に現在のファイルと照合してください。

node-idには選択ノードのIDをURLエンコードして入れます。pやtなどの追加パラメーターを付ける必要がある例としては扱いません。元記事のtを期限付きアクセスキーと断定する説明は採用していません。

出典：figma.fileKeyの利用条件、ファイルURLとID。

作成・利用する手順

以下の3ファイルを作り、デスクトップアプリでmanifestを読み込みます。
対象ファイルでレイヤーを複数選択し、プラグインを起動します。
fileKeyを入力してリンクを生成します。
生成した最初のリンクを開き、対象と権限を確認します。
一覧をコピーします。コピーできない場合は出力欄を選んで手動でコピーします。

これはローカルプラグインの開発手順で、有料Dev Modeを有効にする手順ではありません。外部サーバーへの通信や、ファイル内容の変更はしません。

ファイルを作成する

FigmaのNew pluginで生成したmanifestを基に、次の設定を使います。掲載例ではidを省略しています。自分のmanifestに割り当てられたidがある場合はその値を保ち、サンプルの任意文字列に置き換えません。3ファイルを同じフォルダへ保存してください。

manifest.json

{
  "name": "選択レイヤーURL出力",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": [
    "figma"
  ],
  "documentAccess": "dynamic-page",
  "networkAccess": {
    "allowedDomains": [
      "none"
    ]
  }
}

code.js

figma.showUI(__html__, { width: 400, height: 400 });
function linkRows(fileKey, nodes) {
  if (!/^[A-Za-z0-9]+$/.test(fileKey)) throw new Error("ファイルキーを確認してください");
  return nodes.map(node => ({ name: node.name, url: "https://www.figma.com/design/" +
    encodeURIComponent(fileKey) + "?node-id=" + encodeURIComponent(node.id) }));
}
figma.ui.onmessage = msg => {
  if (!msg || typeof msg.fileKey !== "string") return;
  try {
    const selection = figma.currentPage.selection;
    if (!selection.length) throw new Error("レイヤーを選択してください");
    figma.ui.postMessage({ urls: linkRows(msg.fileKey.trim(), selection) });
  } catch (e) { figma.ui.postMessage({ error: e.message }); }
};

ui.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        font-family: sans-serif;
        padding: 16px;
      }
      textarea {
        width: 100%;
        height: 150px;
        white-space: pre;
        margin-top: 8px;
      }
      input,
      button {
        margin: 8px 0;
        padding: 4px;
      }
    </style>
  </head>
  <body>
    <h3>fileKey を入力（デスクトップ用）</h3>
    <input
      type="text"
      id="fileKeyInput"
      placeholder="例: FoijeBRjomQCWZ4rLFxnSv"
    />

    <button id="send">リンクを生成</button>

    <h3>選択ノードのURL一覧（タブ区切り）</h3>
    <textarea id="output" readonly></textarea>
    <button id="copy">コピー</button>

    <script>
      // 送信ボタン押下 → fileKeyを送る
      document.getElementById("send").onclick = () => {
        const fileKey = document.getElementById("fileKeyInput").value.trim();
        parent.postMessage({ pluginMessage: { fileKey } }, "*");
      };

      // プラグインから受信
      window.onmessage = (event) => {
        if (event.source !== parent || !event.data || !event.data.pluginMessage) return;
        const { urls, error } = event.data.pluginMessage;
        const output = document.getElementById("output");

        if (error) {
          output.value = error;
          return;
        }

        const text = urls.map((u) => `${String(u.name).replace(/[\t\r\n]/g, " ")}\t${u.url}`).join("\n");
        output.value = text;
      };

      // コピー処理
      document.getElementById("copy").onclick = () => {
        const textarea = document.getElementById("output");
        textarea.select();
        if (!document.execCommand("copy")) alert("選択した文字を手動でコピーしてください");
      };
    </script>
  </body>
</html>