デザイナーのavocadonekoです🥑🐈‍⬛
今回は初めてFigmaのプラグイン作成に挑戦しました。
JavaScriptは苦手だったものの、OpenAIのChatGPTを活用することで、2つのプラグインを開発することができました。
この記事では、その開発過程を共有し、基本的な知識がある方ならば、プラグイン作成が可能であることを伝えたいと思います。プラグインを作成する際の参考になれば嬉しいです。

記事の内容は、今回開発した2つのFigmaプラグイン🇯🇵JP Font Switcher（日本語フォントを一覧表示・検索できるプラグイン）と↕️Auto Resize Height（フレームの下辺を内包コンテンツサイズに合わせて自動でリサイズするプラグイン）の紹介、それぞれのプラグインでのChatGPTとのやりとり内容とプロンプトのコツ、そしてGPT-3.5とGPT-4の違いについて説明します。

作ったプラグインについて

🔗 JP Font Switcher

JP Font Switcherは、Figma上で日本語フォントを簡単に切り替えることができるプラグインです。

これまでも日本語フォントを一覧表示できるプラグインはいくつかありましたが、日本語名で表示・フォントウェイトを表示・検索できるという3つの機能を全て備えたプラグインがなかったため開発に至りました。

🔗 Auto Resize Height

Auto Resize Heightは、フレームの下辺を内包コンテンツサイズに合わせて自動でリサイズするプラグインです。

FigmaにはFrameサイズを内包コンテンツに合わせる機能（shift + option + command +R）がありますが、アプリやWebのUIを作る時には最外のFrameの横幅までコンテンツサイズに合わせられてしまうと困ります。commandを押しながらFrameの下辺をドラッグすれば内包コンテンツに合わせられますが、それだと面倒です。
そこで、下辺のみをリサイズしてくれるこのプラグイン開発に至りました。

📝 このプラグインを使う際は、Macならシステム環境設定からショートカット（shift + option + command +Tなど）を設定するとより便利になります

ChatGPTとのやりとり内容

0️⃣ まずはChatGPTがひとりでどこまでやってくれるか確認

プロンプト作るのすら面倒だったので(笑)、最初はかなり適当な指示を出しました。

するとこんな感じで、プラグインを作る方法・コード(manifest.json・js・html)が出力されたので、最初はこの出力されたコードを元に手元で動かしながら開発を進めました。（ChatGPT駆動開発？笑）

1️⃣ 仕様書を作る

適当にプロンプトを投げるとやはり意図通りに動かない部分が多く、チャットで一つずつ直していくのが大変だったので、最終的にはプロンプトを作り直してどんなプラグイン開発にでも応用できるようにしました。

JP Font Switcherの場合は以下のようにしました。

上記では、コードが会話の途中で途切れないように分けて出力させています。

プラグイン2個目の開発だったAuto Resize Heightの場合は以下のように書いたら、1回のやり取りで完成しました！

2️⃣ それ以降の開発の流れ

上記のプロンプトでうまく指示ができれば、あとは以下の手順でコードに修正を加えていくだけです。

1. まずは動くようにする
   出力されたコードをそのままコピペしても動かないことが多々あります。

2. 正常に動いたら、機能が意図通りでない部分を修正してもらう

3. 正常に動いたら、機能追加をする

4. 正常に動いたら、エラーハンドリングができているか確認し、できていなかったら追加する
   例えばJP Font Switcherでは、テキストを選択しないでプラグインを動かした時にエラーが出るようにしています。

5. 正常に動いたら、デザインを改善する

これらの手順を実行する上で、具体的にどんな指示を出せばいいかは以下を参考にしてください。

✅ 動作しない時は何がどう動作していないのか詳しく伝えるorコンソールのエラーをコピペして教える

✅ 見当違いな答えが返ってきたらコードの間違ってそうな箇所を指摘する

✅ 機能追加やUI改善は、箇条書きで伝える

修正を頼む時は「修正箇所のみ出力して」と言うと全てのコードが出力されないので、長すぎて会話が途切れることが少ないです。

また、これまでのチャットの記録を全て保持している訳ではない（一定回数やりとりすると忘れる）ので、回答がよくわからないものになってきたら、最終手段として自分の書いてるコードを入力して、「このコードを元に修正して」と頼めばうまくいくことが多いです。

また、出力されたコードが汚かったからといって雑に「リファクタして」と頼むと、必要な機能まで削ぎ落とされてしまうので注意が必要です。

3️⃣ プラグインリリースまで

Figmaプラグインをリリースするには、プラグイン名・アイコン・カバー画像・プラグインの説明などが必要です。

面倒くさがりな私は、これらも全てChatGPTに考えてもらいました！（英語で出力してもらって、それを日本語に自動翻訳してるのでところどころ日本語に違和感があると思います😉）
アイコンやカバー画像は出力してもらえないのでアイデア出しだけだしてもらって、自分で形にしています。

🐙🐈‍⬛ ソースコードはこちら

🔗 Auto Resize Height
🔗 JP Font Switcher

GPT-3.5とGPT-4の挙動の違い

ここまでに書いた出力は全てChatGPTのGPT-4を使ったものです。試しにGPT-3.5で同じようなプロンプトで試しましたが、存在しないプロパティを使って無理やり実装させようとしてくることがGPT-4よりも明らかに多くて、あまり使い物になりませんでした…

しっかりした指示書を作り、間違っていることを指摘できるくらいの知識がこちらにあればGPT-3.5でも問題ないと思いますが、今回のようにあまり詳しくないことを出力してもらう際は特に、GPT-4に課金することをおすすめします。

感想

私はFigmaのプラグインを作成について、どこから始めるべきかわからなかったし、勝手に難しそうと思い込んで調べようともしませんでした。そんな時、ChatGPTを知り、これを利用してプラグイン開発を試みることにしました。（ChatGPTに聞いてすぐに、なんだただのDOM操作だったんだとわかる🤖）

ChatGPTとのコミュニケーションを通じて、私は具体的なプラグインの機能や実装方法についてのアドバイスを得ることができました。また、プロンプトの書き方に工夫を凝らすことで、より適切な回答を得られることがわかりました。これにより、プラグイン開発がスムーズに進んでいくことができました。
開発を進めるだけでなく、機能を少しづつ追加していくことで、どんな仕組みで動いているのかわかるのも良いなと思いました。

この経験を通じて、私はChatGPTがプラグイン開発において非常に有用であることを実感しました。JavaScriptが苦手だった私でも、ChatGPTのサポートを受けながらプラグインを開発できたので、プログラミングが苦手だけど作りたいものがある人はみんな試してみる価値があると感じています。

また、ChatGPTを使ったプラグイン開発は、短期間で効率的に作業を進められることが印象的でした（Auto Resize Heightは作るものを決めてから審査に出すまでなんと2.5時間しかかかりませんでした）。今後も、ChatGPTを活用してさまざまなプロジェクトに取り組んでいきたいと思っています。このようなAI技術がデザイナーやエンジニアの仕事を助ける可能性に、大いに期待を寄せています。

Figmaのプラグイン以外でも、簡単なアプリケーションとかChrome拡張とか、コードが複雑すぎないものはなんでも作れると思います。この記事を読んで何かを作ることに挑戦し始めた方がいらっしゃったら、本当に嬉しく思います。

そして最後に、もちろんこの記事もChatGPTを使って書いていることを伝えておきます。
私が投げる質問や要望に基づいて、ChatGPTが適切な回答や文章を生成してくれています。これにより、文章の構成や表現についてのアイデアを得ることができ、効率的に記事を執筆することができました🙌