【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

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

npm run build

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

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

デバッグ

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

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

consoleを使う

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

npm install -D @types/node

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

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

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

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

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

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

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

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

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

Nodeを取得する

figma.ui.getNodeById(id);

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

プラグインを終了する

figma.closePlugin();

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

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

ホットリロードさせる

いちいちプラグイン起動し直すのは面倒なので、ホットリロード(保存すると更新)させるようにします
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'"
    }
}

プラグインのルートに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

nodemonをインストールします

npm i -D nodemon

ターミナルから実行

npm run dev

権限エラーで怒られたら

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

chmod 755 ./applesctipt.sh

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

参考

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