Figmaの便利プラグインをChatGPTでつくってみた

この記事はポート株式会社 Advent Calendar 2024 その２の25日目の記事です🤶
その1はこちら🎄

はじめに

就活会議のデザイナーのkonです。
今回は業務効率化のため、サービスに特化したダミーテキストプラグインを作ってみました。
コードが書けないデザイナーが、ChatGPTを使ってFigmaのプラグインを作成した過程をまとめました。

基本スキル

UIデザイン：★★★★★ できる
html、CSS：★★☆☆☆ ちょっとわかる
JavaScript：☆☆☆☆☆ わからない

こんな人におすすめ🤶

• コードが書けないけどFigmaのプラグインを作りたい
• プラグイン作成の手順がわからない
• どんなプラグインが作れるのかアイディアが欲しい

きっかけ

日頃業務でよく使うダミーテキスト（兼項目マスタ）は、個人的にGoogleスプレッドシートで管理していましたが、不便に感じることがありました。

• アクセスするのが手間
• 複数のテキストレイヤーにコピペするのが煩わしい
• csvに対応したプラグインもあるが、毎回アップロードしなきゃいけない
• スプレッドシート連携できるプラグインもあるが、社内のセキュリティルール上使えない

一方、既存のダミーテキストプラグインについても不便に感じる点がありました。
便利ではあるものの、大学名や企業名など、自分が業務でよく使用する項目はなかなかカバーされていません。

これらの課題を解決するため、よりサービスに特化した💪つよつよのダミーテキストプラグイン💪を作ることにしました。

制作開始

プラグインを新規作成

まずはFigmaのプラグインメニューの「開発」>「プラグインの新規作成」からプラグインを作ります。
カスタムUIを選択し、任意の場所に保存します。
フォルダが作成されるので、その中のcode.jsとui.htmlを変更していきます。

UIを考える

続いてUIを考えてみます。
Content Reelというダミーテキストプラグインの構造を参考につくっていきます。

一覧には大学名や名前の項目があり、クリックすると詳細ページに遷移。
テキストの挿入はランダムか順番に挿入するか選べる贅沢仕様を考えました。

プロンプトを考える

続いてChatGPTのプロンプトを書いていきます。
画面の説明や動作の指示を考え、書き起こしていきます。

Figmaのプラグインのjsを書いて欲しい

要件
- 一覧には大学名や名前の項目名がのっている
- 一覧の大学名をクリックすると大学名詳細、名前をクリックすると名前詳細に遷移する
- 詳細にはそれぞれ20件ほど大学名と名前が載っている
- テキストレイヤーを選択した状態で適用ボタンを押すとテキストが挿入される
- テキストはランダムか順番かラジオボタンで選べる
- テキストレイヤーを選択した状態で詳細の大学名をクリックすると、適用される
- 添付画像は1枚目が一覧、2枚目が詳細画面（画像添付）

生成を行うと、code.jsとui.htmlのコードが生成されました。
先ほど作ったフォルダ内のcode.jsとui.htmlを上書き保存し、Figmaメニューの「プラグイン」>「開発」からプラグインを実行します。

生成結果1

最初のプロンプトでこのようなものが生成されました。
なんか思ってたのと違うものができたので、１個ずつ修正していきます。

修正指示ダイジェスト

uiの一覧には大学名、名前の項目があり、クリックするとそれぞれ大学名詳細、名前詳細ページに遷移するようにしたい

詳細画面に適用ボタンとランダムか順番か選べるラジオボタンがほしい

テキストレイヤーを選択した状態で詳細の大学名をクリックすると、適用されるようにしたい

詳細画面の適用ボタンとランダムか順番か選べるラジオボタンは残したままにしたい

詳細画面に一覧に戻るボタンがほしい

生成結果2

途中で先祖返りしてしまうタイミングもありましたが、大枠ができあがってきました。
見た目の崩れはありますが、ほぼ思っていた通りに動きます。
さらに調整していきます。

適用ボタンとラジオボタンのUIは詳細画面の下固定にしたい

h3の一覧詳細はなくしたい

生成結果3

いったんそれっぽいところまで完成しました。
これをベースに項目を増やしたり、UIの調整を行なったりしていきます。

挿入する項目はスプレッドシートにまとめ、csvで書き出し添付しました。
コードをみてプロパティ名を確認し、指示を出します。

titleとitemsを添付のcsvの項目にかきかえてほしい

さらにスタイルを調整していきます。
細かい調整は指示を出すよりも直接変更してしまった方が効率がよかったので、CSSを直接編集して対応しました。

完成

欲しかった機能を詰め込んだ業務に最適なプラグインが誕生しました🎉
大学名や企業名のダミーテキストを入力できるだけでなく、項目マスタとしても活用できるのでとても便利です💪

まとめ

コードが書けなくてもChatGPTを活用すればFigmaのプラグインを作ることができました！
唯一残念なのは、一覧の下部に詳細項目の表示を適用できなかったことです。
いろいろと試してみたのですがうまくいかなかったので今回は断念しました。
また再チャレンジしたいと思います。