JavaScriptなんて書けないけどChatGPTでFigmaのプラグインを作ってみた

あったらいいなと思うFigmaのプラグインがありました。
選択したテキストレイヤーに任意のテキストを改行単位で順番に反映するというものです。

内容が決まっていないものを、あとからチャットやメールでもらうことってよくあると思います。

あるある

一度にテキストを流し込みたいとき、Google Sheets Syncなどスプレッドシートからテキストを流し込む便利なプラグインもありますが、シートの共有設定を公開にする必要があったり、公開したくない場合は毎回アップロードしなくてはならないので手間がかかります。
なので、高度なことはできなくていいけどなんかプラグイン上でさくっと流し込めたらなーと思っていました。

さっと流し込みたい

JavaScriptの知識はないけど、どうやらChatGPTでプラグインが作れるようなので、こちらの記事を参考に作ってみました。

準備

さっそくFigmaのプラグインを作っていきます。
Figmaメニューバーのプラグイン>開発>プラグインの新規作成を選択します。
プラグインの名前をつけ、「Figmaデザイン+FigJam」または「Figmaデザイン」を選択して次へ進みます。今回はFigmaデザインを選択しました。

続いてプラグインのテンプレートを選ぶ画面が表示されるので、今回は「カスタムUI」を選択し、名前をつけて任意の場所に保存します。

するとフォルダに次のようなファイルが作成されます。

主にこの中のcode.jsとui.htmlをいじっていきます。

作成開始

まずは以下のようなプロンプトを書いてみます。

💬プロンプト
Figmaのプラグインを作りたいのでjsを書いて欲しい。

要件
・選択したテキストレイヤーに該当テキストを流し込む
・該当テキストはプラグインのモーダル内で入力する
・テキスト1、テキスト2、テキスト3を選択して「テキストA（改行）テキストB（改行）テキストC」を流し込んだら順番に挿入される

どういう手順でプラグインを使うかをイメージしながら要件に落とし込んでいきます。
あまりスマートな指示ではないですが、このくらいゆるくても汲み取って形にしてくれました。

ui.htmlとcode.jsのコードが生成されたので、それを差し替えて保存します。
メニューバーのプラグイン>開発から作成したプラグインを実行します。
するとこんな感じのプラグインができていました。

もう半分は完成しているのではないでしょうか。
ここから微調整を繰り返して理想系に近づけていきます。
気になる点はプロンプトで指示をし、生成されたui.htmlやcode.jsを差し替えてプラグインを再実行ということを繰り返していきます。

まずはプラグインを実行するごとにモーダルが閉じてしまい使いにくいので、閉じないようにしました。

💬プロンプト
毎回モーダルを閉じないようにしたい

閉じないようになりました。

続いてUIを調整していきます。
FigmaでざっとUIをつくりPNGで書き出してプロンプトと共に送ります。

💬プロンプト
UIをこんなかんじにしたい（PNG添付）

なんか背景がグレーになってしまったので、PNGではなくSVGで書き出したものを添付してみます。

💬プロンプト
もっとこういうかんじで（SVG添付）

背景のグレーは直りましたが、ボタンやテキストエリアの角丸の再現度が低くなってしまいました。
このときは雑なプロンプトを書いてしまいましたが、気をつける点を具体的に指示すればまた違った結果になっていたかもしれません。
細かいところはあとで直すとして、これをベースにさらに改善していきます。

💬プロンプト
選択したテキストと流し込むテキストの数が一致しなかった場合アラートをだしたい

項目数が多いときにいちいち入力テキストと選択テキストの数が合ってるか確認するのは大変なので、アラートを出すようにします。

アラートは出るようになりましたが、流し込み自体ができなくなってしまったので再調整します。

💬プロンプト
数が一致しなかった場合も流し込み自体はできるようにしたい

さらに調整を重ねる中で、ふと選択中のレイヤー数と流し込むテキスト数が出せれば作業しやすいのではと思い追加してみます。

💬プロンプト
モーダルに選択テキスト数と入力テキスト数入れることできる？
選択テキスト数はリアルタイムで計測したい。

実行する前にレイヤー数を取得することはできないんじゃないかという思い込みがありましたが意外とできました。

完成

なんやかんやで色々調整して、最終的にこのように落ち着きましました。

入力したテキスト数と選択したテキスト数を比べて、少ない場合は赤文字で不足レイヤー数を表示、多い場合は緑文字で余ったレイヤー数を表示しました。
また、数が一致しない場合は、アラートメッセージにも記載を追加しました。アラートUIは気づいたらなぜか黒背景になってました。

作ってみた感想

大枠の作成はかなりスムーズにいきました。30分もかからなかったと思います。初手でいきなり完成度60%くらいのものができました。恐ろしいです。
ただ、細かい調整を重ねていくと、思った通りにならなかったり、変更してほしくない部分まで変わってしまったりして手こずりました。

今まではFigmaに限らずPhotoshop等のAdobe製品でも、プラグインを作るためにはJavaScriptが使えることや、独自のガイドラインを読み込むことが必須でした。
アイディアはあるんだけど、実装スキルがないので実現することができないというもどかしさがありました。
そこのハードルが生成AIとタッグを組むことで解消しました。

こんなプラグインがあれば便利なのに！と思っている方も、ChatGPTの力を借りれば案外スムーズにできるかもしれません。
よければ参考にしてみてください。