ノードを選択して、右クリックからコピー/貼り付けオプション > 選択範囲へのリンクをコピーからURLが取得できます。
これを複数まとめて取得するに自作プラグインを作成してみました。
コピーの内容をスプレッドシートに貼り付けると以下の通りです。
その備忘録です。
目次
Figmaで複数選択したノード（レイヤー）からまとめてURLを取得する方法
プラグイン自体は簡単なものですが、無料版で使うには少し手間がかかります。
fileKeyの取得
事前に取得したいデザインをブラウザで開きましょう。
そしてURLをコピーしましょう。
/design/の次に記載されているのが、fileKey（例：a0YyvIhOQR8k7jyINgW6tZ）なので、これをメモしておきます。
知識│FigmaのURL構造
https://www.figma.com/design/a0YyvIhOQR8k7jyINgW6tZ/無題?node-id=0-1&p=f&t=QVAwDELJPjhOP4oE-0| 部分 | 例 | 意味 |
|---|---|---|
https://www.figma.com/design/ | 固定 | 閲覧用共有リンク（file/より視覚的に親しみやすい） |
a0YyvIhOQR8k7jyINgW6tZ | ファイルキー（fileKey） | Figmaファイルを一意に識別するID |
/無題 | ファイル名 | 表示用のファイル名（URLに日本語可） エンコード済 |
?node-id=0-1 | ノードID | 選択されたレイヤーやフレームのID（例：Page1 → Frame） |
&p=f | パラメータ（省略可） | 現在は「開いているのが design ページ」などを示す（内部用） |
&t=QVAwDELJPjhOP4oE-0 | トークン（省略可） | 共有時の一時的なアクセスキー（期限付きの可能性あり） |
デスクトップアプリの用意
自作プラグインの場合、無料で使うにはFigmaのデスクトップアプリからの実行になります。
まずはデスクトップアプリを導入しましょう。
自作プラグインの作り方･使い方
以下の3つのファイルを作成。
- manifest.json
- ui.html
- code.js
あとは、メニュー > プラグイン >開発 >マニフェストからプラグインをインポートからmanifest.jsonを選択すればプラグインが読み込まれます。
あとは選択URLコピーを選べばUIが表示されます。
URLを出力したいノード（レイヤー）を選択。
あとは先程のメモしたfileKeyキーを入れてリンクを生成ボタンを押すとURLが生成されます。
コピーを押して、例えばスプレッドシートなどに貼り付けると良いでしょう。
以上が使い方です。
それでは3つのコードを消化いたします。
- manifest.json
- ui.html
- code.js
以下、コードの中身です。
