トクバイアプリのデザインを担当しているデザイナーの鈴木です。
Figma Pluginがついにリリースされたということで、早速デザインの業務効率化を目的としてプラグインを開発することにしました！
今回はプラグインの開発を始めるためのセットアップ方法について紹介します。
公式のドキュメントはこちら https://www.figma.com/plugin-docs/setup/
開発するにあたって必要なもの
・Visual Studio Code
・TypeScript
・Figmaデスクトップアプリ
※ローカルファイルとして保存されたコードを読み取る必要があるためデスクトップアプリを使用しないといけないようです。
Figmaデスクトップアプリインストールはこちら https://www.figma.com/downloads/
全部インストール済みの方は3.プラグインを作成するからやりましょう。
1.Visual Studio Codeをインストール
https://code.visualstudio.com/
ここからダウンロードすることができます。
Visual Studio Codeは高機能なエディタで、TypeScriptでアプリケーション開発をするのに適しているみたいです。
サンプルコードに出てくる型などの定義がとても参照しやすいです。
2.TypeScriptのインストール
ターミナルでsudo npm install -g typescriptを実行します。
TypeScriptからJavaScriptにコンパイルする必要があるので、TypeScriptのコンパイラをnpmコマンドを使ってインストールします。
Node.jsをインストールしてない方は、まず公式サイトからNode.jsをダウンロードし、npmを使えるようにしましょう。
3.プラグインを作成する
メニューのPugins > Development > New Plugin…から新しくプラグインを作成することができます。
今回はサンプルプラグインを動かすところ始めるので、Generate from templateから作りたいプラグイン名を入力し、Continueを押します。
サンプルの内容はユーザの操作を受け取ってオブジェクトを作成するものなので、「With UI & browser APIs」を選択して、適当な場所に保存しましょう。
これでサンプルプラグインが作成されました。
4.サンプルプラグインのコンパイル
Visual Studio Codeで先ほど保存したサンプルプラグインのフォルダーを開きます。

Command + Shift + B (WindowsはCtrl+Shift+B)を押してtsc: watch - tsconfig.jsonを実行します。
これはcode.tsへの変更を監視し、保存するたびにcode.jsにコンパイルしてくれるコマンドです。いちいちコンパイルしなくてすむのでサクサク開発ができます。
これでプラグイン開発の準備が整いました。
5.サンプルプラグインの実行
Figmaのメニューの Plugins> Development > 作成したプラグイン をクリックして実行します。
サンプルコードのレクタングルを作成するUIが表示され、レクタングルが5個生成されたら成功です。
これでセットアップは完了です！
最後に
作成されたサンプルにはあらかじめ、UIの表示、ユーザー入力の受け取りと、それを使ったプラグイン実行の例が揃っているので、これを拡張する形で始めると楽だと思います。
自分のプラグインを開発する準備ができたら、作成したディレクトリを早めにgit管理しておくと楽でしょう。
次回は実際にプラグインを開発してFigma Pluginについて詳しくお届けしたいと思います。お楽しみに!
