🦔
Figma Plugin 「code.ts（処理本体）」と「UIのScriptタグ」でそれぞれ出来ることの整理
はじめに
初めて、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についてもまとめました。
Discussion