Figmaのコメントをブラウザから簡単にコピーする

こんばんは、今日は一日寒くて死にそうです…雪降ってました…

Figmaをチームや顧客と運用する際に、Figmaのコメントの一覧を文字列としてコピーしたいことありますよね。slackやスプシに貼ったり。

Figmaでコメントのビューを表示した状態で、Chrome DevToolsのconsoleを開き以下のスクリプトを実行するとでクリップボードにコピーすることができました、

setTimeout(() => {
  window.navigator.clipboard.writeText(
    Array.from(document.querySelectorAll("[data-testid='comment-message']"))
      .map((v) => v.innerText)
      .join("\n-------------------------------------------------\n")
  );
}, 3000);

ただ、1回の実行につき最大15件ほどしか取得できないので、コメントの表示部分ををスクロールさせる必要があるんですよね。いちいちスクロールしてdevtoolsで実行するのはめんどくさいのでsetIntervalさせると楽でした

const commentSet = new Set()
setInterval(() => {
    Array.from(document.querySelectorAll("[data-testid='comment-message']"))
      .forEach((v) => {
        commentSet.add(v.innerText)
      })
  );

  window.navigator.clipboard.writeText(Array.from(commentSet).join("\n-------------------------------------------------\n"))
}, 100);

あと、window.navigator.clipboard.writeText() は画面にフォーカス当たってないと実行できないんですね、地味に知らなかったです。セキュリティ上そうなってるんですかね

tech Figma

See also