![見出し画像](https://assets.st-note.com/production/uploads/images/101438342/rectangle_large_type_2_ac762e7545be3db81d8da4c5267aef44.png?width=800)
ChatGPTを使ってFigmaのプラグインを作った話
デザイナーのavocadonekoです🥑🐈⬛
今回は初めてFigmaのプラグイン作成に挑戦しました。
JavaScriptは苦手だったものの、OpenAIのChatGPTを活用することで、2つのプラグインを開発することができました。
この記事では、その開発過程を共有し、基本的な知識がある方ならば、プラグイン作成が可能であることを伝えたいと思います。プラグインを作成する際の参考になれば嬉しいです。
記事の内容は、今回開発した2つのFigmaプラグイン🇯🇵JP Font Switcher(日本語フォントを一覧表示・検索できるプラグイン)と↕️Auto Resize Height(フレームの下辺を内包コンテンツサイズに合わせて自動でリサイズするプラグイン)の紹介、それぞれのプラグインでのChatGPTとのやりとり内容とプロンプトのコツ、そしてGPT-3.5とGPT-4の違いについて説明します。
作ったプラグインについて
🔗 JP Font Switcher
![](https://assets.st-note.com/img/1680025703053-J21VaqFvLa.png?width=800)
JP Font Switcherは、Figma上で日本語フォントを簡単に切り替えることができるプラグインです。
📌 主な機能
・フォントスタイルの選択と適用(複数テキスト同時適用可)
・日本語フォントの検索
・フォントスタイルの選択と適用(複数テキスト同時適用可)
![](https://assets.st-note.com/production/uploads/images/101420363/picture_pc_a61e24f92823aba57fcfe16ff8649b55.gif)
これまでも日本語フォントを一覧表示できるプラグインはいくつかありましたが、日本語名で表示・フォントウェイトを表示・検索できるという3つの機能を全て備えたプラグインがなかったため開発に至りました。
🔗 Auto Resize Height
![](https://assets.st-note.com/img/1680138978823-ERHQSLWiBt.png?width=800)
Auto Resize Heightは、フレームの下辺を内包コンテンツサイズに合わせて自動でリサイズするプラグインです。
📌 主な機能
選択したすべてのフレームの高さを、中のオブジェクトに合わせてフレームの上端を固定したままリサイズ
FigmaにはFrameサイズを内包コンテンツに合わせる機能(shift + option + command +R)がありますが、アプリやWebのUIを作る時には最外のFrameの横幅までコンテンツサイズに合わせられてしまうと困ります。commandを押しながらFrameの下辺をドラッグすれば内包コンテンツに合わせられますが、それだと面倒です。
そこで、下辺のみをリサイズしてくれるこのプラグイン開発に至りました。
📝 このプラグインを使う際は、Macならシステム環境設定からショートカット(shift + option + command +Tなど)を設定するとより便利になります
ChatGPTとのやりとり内容
0️⃣ まずはChatGPTがひとりでどこまでやってくれるか確認
プロンプト作るのすら面倒だったので(笑)、最初はかなり適当な指示を出しました。
👩💻< figmaのフォントの表示が微妙なので、日本語のフォントを全て日本語で分けて表示できるようにするfigmaのプラグインの作り方を教えて
![](https://assets.st-note.com/img/1680027851656-dY1po91b1T.png?width=800)
するとこんな感じで、プラグインを作る方法・コード(manifest.json・js・html)が出力されたので、最初はこの出力されたコードを元に手元で動かしながら開発を進めました。(ChatGPT駆動開発?笑)
1️⃣ 仕様書を作る
適当にプロンプトを投げるとやはり意図通りに動かない部分が多く、チャットで一つずつ直していくのが大変だったので、最終的にはプロンプトを作り直してどんなプラグイン開発にでも応用できるようにしました。
あなたは、プロのプログラマです。以下の制約条件から最高のFigmaのプラグインのコードを出力してください。
## 制約条件
- 不足している情報は推測で答えないで下さい
- 不足している情報については些細なものでも私に質問して下さい
## プラグインの仕様 (初回の出力では仕様を盛り込みすぎない)
[ここにプラグインの概要説明を入れる]
- [仕様1]
- [仕様2]
- [仕様3]
…
## 見た目(UIが必要なプラグインのみ記入)
---
[どんな見た目になりそうか、テキストや記号を使ってなるべくわかりやすく表現する]
---
## 出力して欲しいもの
- manifest.json
- code.js
- ui.html
JP Font Switcherの場合は以下のようにしました。
👩💻<
あなたは、プロのプログラマです。以下の制約条件から最高のFigmaのプラグインのコードを出力してください。
## 制約条件
- 不足している情報は推測で答えないで下さい
- 不足している情報については些細なものでも私に質問して下さい
## プラグインの仕様
ローカルにある日本語フォントのみをフォントのプレビューと共に日本語で表示したいです。
- プラグイン起動時にフォント一覧を表示させる
- フォント名の文字列から日本語フォントを識別するのではなく、js内にフォントの日本語表記と英語表記の対応表を作って情報を利用して、日本語に対応するフォントを識別する
[…以下仕様の箇条書きが続く]
## 見た目
基本的にはAdobe Photoshopのフォント一覧の見た目に寄せてください。
---
日本語のフォント一覧 // タイトル
ヒラギノ角ゴシックPro 文字もじモジ // 各フォントでプレビュー表示
W3 //フォントスタイル名 文字もじモジ // 各スタイルでプレビュー表示(この場合、W3)
W6 //フォントスタイル名 文字もじモジ // 各スタイルでプレビュー表示(この場合、W6)
---
## 出力して欲しいもの
- code.js
- ui.html
まずはcode.jsのみ出力し、私が指示したらui.htmlも出力して。
上記では、コードが会話の途中で途切れないように分けて出力させています。
プラグイン2個目の開発だったAuto Resize Heightの場合は以下のように書いたら、1回のやり取りで完成しました!
👩💻<
あなたは、プロのプログラマです。以下の制約条件から最高のFigmaのプラグインのコードを出力してください。
# 制約条件
- 不足している情報は推測で答えないで下さい
- 不足している情報については些細なものでも私に質問して下さい
- code.jsとmanifest.json、必要であればui.htmlを出力してください
# プラグインの仕様
プラグインの起動により、選択しているFrameがリサイズできるようにしたいです。
- プラグインを起動すると、選択中のFrameがFrame内の要素に合わせて、高さのみリサイズされる
- 下辺からリサイズされ、上辺からはリサイズされない
# 出力して欲しいもの
- code.js
- manifest.json
- (必要であれば)ui.html
2️⃣ それ以降の開発の流れ
上記のプロンプトでうまく指示ができれば、あとは以下の手順でコードに修正を加えていくだけです。
まずは動くようにする
出力されたコードをそのままコピペしても動かないことが多々あります。正常に動いたら、機能が意図通りでない部分を修正してもらう
正常に動いたら、機能追加をする
正常に動いたら、エラーハンドリングができているか確認し、できていなかったら追加する
例えばJP Font Switcherでは、テキストを選択しないでプラグインを動かした時にエラーが出るようにしています。正常に動いたら、デザインを改善する
これらの手順を実行する上で、具体的にどんな指示を出せばいいかは以下を参考にしてください。
✅ 動作しない時は何がどう動作していないのか詳しく伝えるorコンソールのエラーをコピペして教える
✅ 見当違いな答えが返ってきたらコードの間違ってそうな箇所を指摘する
👩💻<
```
listItem.addEventListener('click', () => { parent.postMessage({ pluginMessage: { type: 'apply-font', fontFamily: font.fontName.family } }, '*'); });
```
多分この部分がおかしい!
✅ 機能追加やUI改善は、箇条書きで伝える
👩💻< 次はフォントの検索機能(フィルタ機能)をつけたいです。
## 仕様
・フォントリストの上部に検索バーがある
・日本語でフォントの日本語名を検索できる
・部分一致で検索できるようにする
・Figmaのデザインシステムに沿った、シンプルなデザインにして
修正を頼む時は「修正箇所のみ出力して」と言うと全てのコードが出力されないので、長すぎて会話が途切れることが少ないです。
また、これまでのチャットの記録を全て保持している訳ではない(一定回数やりとりすると忘れる)ので、回答がよくわからないものになってきたら、最終手段として自分の書いてるコードを入力して、「このコードを元に修正して」と頼めばうまくいくことが多いです。
また、出力されたコードが汚かったからといって雑に「リファクタして」と頼むと、必要な機能まで削ぎ落とされてしまうので注意が必要です。
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が適切な回答や文章を生成してくれています。これにより、文章の構成や表現についてのアイデアを得ることができ、効率的に記事を執筆することができました🙌
この記事が気に入ったらサポートをしてみませんか?