【Figma】プラグインの作り方

2021-8-9

meko

必要なもの

Node 今回はv16.6.1を使用しています

プラグインをテンプレートから選択する

デスクトップアプリをダウンロードする

Figma Daownload

テンプレートを選ぶ

Pluginsを選択する

Create new pluginを選択

プラグインのディレクトリの名前を書く

言語切り替えなどはRun once、画像書き出しなどの操作はWith UI & Browser APIを使用する

表示テストする

ソースコードはテンプレート作成の時に開いたプラグインから開けます Indevelopmentの中にあるはずです

Typescriptで書かれたコードがコンパイルされて使えるようになる前なので、そのまま開くとコンパイルしてくれとエラーがでます

コンパイルする

pacakage.jsonをみるとscriptsにbuildがあるので、これを使ってコンパイルします

まず、ライブラリのインストールが必要です
以下のコマンドをターミナルで叩くことでインストールします

npm i
npm install -D typescript @figma/plugin-typings
Copy

ターミナルから以下のコマンドを叩きます

npm run build
Copy

これで先ほどと同じようにプラグインを開きます

テンプレートにもともと入っていた正方形作成用のウィンドウが開くはずです

デバッグ

アプリにコンソールを出すことができます

表示されたコンソールにfigma.currentPageなどと入力すると中身が見られます

consoleを使う

consoleを使うには@types/nodeが必要です
インストールしておきましょう

npm install -D @types/node
Copy

UIからコードにイベントを送る

UI(ui.html)からプラグインコード(code.ts)にイベントを送ることができます

<!-- ui.html -->
<script>
parent.postMessage({ pluginMessage: { type: "メッセージの名前" } }, "*");
</script>
Copy

メッセージの名前を使って、プラグインコード(code.ts)で呼び出せます

figma.ui.onmessage = (message) => {
  if (message.type === "メッセージの名前") {
      // anything
  }
}
Copy

コードからUIにイベントを送る

プラグインコード(code.ts)からUI(ui.html)にイベントを送ることができます

// code.ts
figma.ui.postMessage({ name: "from-code" });
Copy

<!-- ui.html -->
<script>
onmessage = (event) => {
  console.log(event.data.pluginMessage);
  // { name: "from-code" }   
}
</script>
Copy

Nodeを取得する

figma.ui.getNodeById(id);
Copy

idはfigma.currentPage.selectionなどで取得できるIDです

プラグインを終了する

figma.closePlugin();
Copy

実際に使うときはmsg.typeにcancelなど設定したら良さそう

if (msg.type == "cancel") {
    figma.closePlugin();
}
Copy

ホットリロードさせる

いちいちプラグイン起動し直すのは面倒なので、ホットリロード(保存すると更新)させるようにします
nodemonを使いました

package.jsonのscriptsにdevを足します

{
    "scripts": {
        "build": "tsc -p tsconfig.json",
        "dev": "nodemon --watch code.ts --watch ui.html --exec 'tsc -p tsconfig.json && ./applescript.sh'"
    }
}
Copy

プラグインのルートにapplescript.shを作成して

#!/usr/bin/env bash

osascript <<'EOF'
tell application "Figma" to activate
tell application "System Events" to tell process "Figma"
    keystroke "p" using {command down, option down}
end tell
EOF
Copy

nodemonをインストールします

npm i -D nodemon
Copy

ターミナルから実行

npm run dev
Copy

権限エラーで怒られたら

./applescript.shで権限エラーを吐くかもしれないので、権限を変更しておくと良いかも

chmod 755 ./applesctipt.sh
Copy

Macの権限で、アプリに変更を加えるのに失敗したら、
apple > システム環境設定 > セキュリティとプライバシーのアクセシビリティで
VSCodeなどにチェックを入れてあげれば実行できるはず
ここら辺は個人の責任で

参考

Figma Components
Figma Plugin API Reference
Writing a figma plugin with hot reload, react and graphql