はじめに

みなさんは、Figmaのプラグインを作ろうとしたことがありますか？
私は、デザインテクノロジストとして、デザイナーの業務効率化をしようとFigmaのプラグインの作り方を調べていたら、JavaScriptか、TypeScriptが触れれば、意外と簡単に開発することができるのだとわかりました。
そのため、この記事では、Figmaプラグインの作りの第一歩である、セットアップの方法についてまとめます。

この記事では、以下の公式ドキュメント通りに、できるだけわかりやすく、初心者でもわかりやすくまとめようと思っています。
この記事を読みながら、詰まったところがあれば、コメントで教えていただけたら、記事を更新していきたいと思っているので、ぜひコメントもお願いします。

事前準備

Figmaのプラグインを作るにあたって、まずは、事前準備です！

事前準備で用意するのは以下の通りです。

① Figmaのデスクトップアプリ

Figmaのプラグインを作るには、Figmaのデスクトップアプリ をダウンロードする必要があります。
以下のリンクからお使いのPCに合わせて、ダウンロードしてください。

② エディタ

使い慣れたもので大丈夫ですが、Visual Studio Code か IntelliJ IDEA がおすすめです。
この記事では、Visual Studio Code のスクショを用いて説明します！

以下のリンクからダウンロードしてください。

③ Node.js

Figma 公式から TypeScript を使って開発することが推奨されているいます。
TypeScriptで開発がしたい方は、Node.jsが必要です！

以下のリンクから、Node.jsをインストールしてください。

【インストールされているか確認する】
ターミナルで、以下のコマンドを入力して、インストールしているバージョンが表示されたら、インストールが完了しています！

terminal.

node -v

テンプレートからプラグインを開発する

事前準備の3点が用意できたら、早速プラグインの開発を始めます！

① Figmaのデスクトップアプリからテンプレートをダウンロードする

A. Figmaの新規の Design File を作成する

Figmaのデスクトップアプリを開き、Design Fileを作成します。
Draft で作成して、問題ありません。

B. Figmaのデスクトップアプリからテンプレートをダウンロードする

Plugins > Development > New plugin.. を選択します。

その後、表示されたモーダルが表示されるため、Plugin名を入力し、Pluginを動かす範囲を選択します。

Figma design + FigJam を選ぶ
- Figma の file と FigJam の board 両方で動くプラグインを開発したい場合、こちらを選んでください
Figma design を選ぶ
- Figma の file だけで動くプラグインを開発したい場合、こちらを選んでください

そして、プラグインのタイプを選択します。

Default を選ぶ
- 必要最小限のファイルのみがダウンロードされるため、は、こちらをえらんでください
Run Once を選ぶ
- プラグイン起動時に表示されるWindowを表示しないで起動するプラグインを作る場合、こちらを選んでください
Custom UI を選ぶ
- プラグイン起動時に表示されるWindowを必要とするプラグインを作る場合、こちらを選んでください
- 説明では、こちらを選択して進めます

その後、テンプレートの保存場所を選び、Figmaのテンプレートをダウンロードします。

② 開発環境を整える

テンプレートをダウンロードしたら、開発環境を整えていきましょう！

A. エディタでダウンロードしたテンプレートを開く

エディタを開き、先ほどダウンロードしたフォルダを選択します。

B. 作成したフォルダ配下で TypeScript と Figma の型定義ファイルをインストール

ターミナルを開き、以下のコマンドを入力し、TypeScript と Figma の型定義ファイルをインストールします。

terminal.

npm install -D typescript @figma/plugin-typings

C. TypeScript をインストールされているか確認する

以下のコマンドを入力し、TypeScriptがインストールされているか確認します。
インストールしているバージョンが表示されたら、TypeScriptはインストールされています。

terminal.

tsc -v

【TypeScriptがインストールされていなかったら....】
インストールしているバージョンが表示されなかったら、エディタを再起動してください。

それでも、ダメだったら...
以下のコマンドから、TypeScriptを再インストールしましょう！
npm install -D typescript

④ Plugin を立ち上げる

開発環境が整ったら、早速Pluginを立ち上げてみましょう！

A. TypeScript コンパイルの設定を行う

Figma Pluginsはブラウザで実行されるため、TypeScript を JavaScript にコンパイルする必要があります。
以下のコマンドを入力するか、以下の操作をし、自動コンパイルされるようにします。

【コマンドでやる場合...】

terminal.

npm run build -- --watch

【エディタで操作する場合...】

win の場合
- Ctrl + Shift + B を押し、 watch-tsconfig.json を選択してください
mac の場合
- Command + Shift + B を押し、 watch-tsconfig.json を選択してください

B. Figmaのデスクトップアプリで Plugin を立ち上げる

Resources > Plugins > Development > 開発中の Plugin を選択し、Plugin を立ち上げる

C. 開発準備完了!

Plugin を立ち上げたら、Plugin の window が表示されたら、開発準備完了です！

Figma Plugins の仕組み

⚪︎ ファイル構成

manifest.json

プラグインのメタ情報を記述する必須ファイル。プラグイン生成すると自動的に簡単な manifest.json が作成されます。

詳しい解説はこちらをご覧ください。

code.ts

メインスクリプトのソースファイルです。
figma APIを利用することでfigma上の操作が可能。

code.js

code.ts をコンパイルしてできた、Figmaが実際に読み込むファイルです。

ui.html

UI の HTML ファイル。
基本的に UI で必要となる CSS と JavaScript はすべてこのファイルに記述する必要があるため、CSS は style タグかインライン CSS、JavaScript はインライン script を使うことになります。

package.json

Plugins開発に必要なパッケージのメタデータ記述されているファイルです。

tsconfig.json

TypeScript の設定ファイルです。

⚪︎ 動作の仕組み

パフォーマンス向上のため、プラグインのメインコードは、最小のJavaScript 環境であるサンドボックス内のメインスレッドで実行されます。
そのため、XMLHttpRequestやDOMなどのブラウザAPIは、サンドボックスからは直接利用できません。

また、ブラウザAPIを使ったり、プラグインのカスタムUIを表示するには、iframeで表示されるHTMLやJavaScriptを書くことでアクセスすることができます。

UIからメインコードへメッセージを送る

UI側 (iframe)からメインコード側へデータを送るには以下のようにします。

ui.html

<script>
    parent.postMessage({ pluginMessage: 'anything here' }, '*')
</script>

上記のように、<script>タグ内に、parent.postMessage({ pluginMessage: { /* 送りたいデータ */ } }, '*') の形にすることで、送ることができます。

また、メインコード側でデータを受け取るには、以下のようにします。

code.ts

figma.ui.onmessage = (message) => {
  console.log("got this from the UI", message)
}

上記のように、figma.ui.onmessage を使い、引数の message に UI側で指定したpluginMessageを受け取り、メインコード側で使うことができます。

メインコードからUIへメッセージを送る

メインコード側からUI側 (iframe)へデータを送るには以下のようにします。

code.ts

figma.ui.postMessage('anything here')

上記のように、 figma.ui.postMessage() を使い、引数にUI側へ送りたいデータを設定します。

また、UI側で、メインコード側からのデータを受け取るには以下のようにします。

ui.html

<script>
    onmessage = (event) => {
        console.log("got this from the Main", event.data.pluginMessage )
    }
</script>

上記のように、onmessage を使い、引数の event.data.pluginMessage にメインコード側でしたいしたデータを受け取ることができます。

まとめ

この記事では、Figmaのプラグイン作成におけるセットアップの方法について紹介しました。
今後、Figmaのプラグインを作成するにあたって、勉強したことをQiitaにアウトプットしていこうと思っているので、よかったら、Qiitaのフォローお願いします

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

はじめに

事前準備

① Figmaのデスクトップ アプリ

② エディタ

③ Node.js

テンプレートからプラグインを開発する

① Figmaのデスクトップ アプリからテンプレートをダウンロードする

A. Figmaの新規の Design File を作成する

B. Figmaのデスクトップ アプリからテンプレートをダウンロードする

② 開発環境を整える

A. エディタでダウンロードしたテンプレートを開く

B. 作成したフォルダ配下で TypeScript と Figma の型定義ファイルをインストール

C. TypeScript をインストールされているか確認する

④ Plugin を立ち上げる

A. TypeScript コンパイルの設定を行う

B. Figmaのデスクトップ アプリで Plugin を立ち上げる

C. 開発準備完了!

Figma Plugins の仕組み

⚪︎ ファイル構成

manifest.json

code.ts

code.js

ui.html

package.json

tsconfig.json

⚪︎ 動作の仕組み

UIからメインコードへメッセージを送る

メインコードからUIへメッセージを送る

まとめ

① Figmaのデスクトップアプリ

① Figmaのデスクトップアプリからテンプレートをダウンロードする

B. Figmaのデスクトップアプリからテンプレートをダウンロードする

B. Figmaのデスクトップアプリで Plugin を立ち上げる