🦔

Figma Plugin 「code.ts(処理本体)」と「UIのScriptタグ」でそれぞれ出来ることの整理

2022/07/11に公開

はじめに

初めて、FigmaのPluginを作成して、最初に悩んだのが、処理本体側のJSとUI側のJSどちらでどういった処理を書けば良いか、という点でした。

それぞれのファイルの役割分担を以下にまとめます。

出来ること

code.ts(処理本体)

  • Pluginが実行されているのが、FigmaかFigjamかを判断できる
  • Pluginが実行されたFigmaのデザインファイルの各ノードにアクセス・更新・作成
    • ノード = ページ、フレーム、テキストボックス etc...
  • 表示する画面(html)の、表示・非表示の切り替え
  • pluginDataという、Plugin用のローカルストレージ的なストレージへのアクセス
    • 設定情報等を保存しておいたり出来る。keyValue形式
  • ノードのクリック、ページの変更
    • ノードのクリック、ページの変更とのイベントは、UI側ではなく処理側で取得できる
  • postMessage, messageイベントによるメッセージの取得

UIのScriptタグ

  • DOMの取得
    • 取得できるのは、表示しているUI(Iframe)の中のDOMだけ
  • クリックイベントの取得
    • 取得できるのは、表示しているUI(Iframe)の中のクリックイベントだけ
  • postMessage, messageイベントによるメッセージの取得

ポイント

例えば、選択しているノードの情報を、Pluginで表示したい場合は、以下のような流れで情報を取得していく必要があります。

まとめ

僕は、最初思い込みで、UI側でイベントをとれるものだと思って、無駄に時間を使ってしましたが、落ち着いてどこでどの情報を扱えるかを整理することで、無事Pluginを完成させることが出来ました。

PostMessageもイメージとは違うものだったので、別の記事でまとめ直したいと思います。

関連記事
postMessageについてもまとめました。
https://zenn.dev/takeru0430/articles/e2c0b78f3fb6d5

Discussion