非エンジニアでも自分専用のFigmaプラグインを作る
Figma のプラグイン
Figma にはプラグインがかなり多く存在しており、世の Figma 使いの手助けになっています。
Figma のプラグインを自作するという選択肢
Figma のプラグインを探して便利だなと思うものもあれば、痒いところにもう少し手が届けばいいのにというプラグインもあったりします。
自分専用にローカル環境で動かすものも作れたりするので、たとえば公開はできないけれども自分だけのものとして使いたいなどがあったときも使えたりします。
（そのままもちろん公開自体も可能です）
環境構築が割と楽でハードル低く作れるのと、非エンジニアでも ChatGPT と格闘してコード自体は書いてもらえれば、非エンジニアでもとっつきやすいかなと思います。
割と面倒だけどやらなきゃ、なんか自動化しておきたいな。くらいの時にもささっと作れるので、Google App Script でちょっとコード書いて楽しよう、くらいのノリで作れます。
プラグイン環境構築の記事は割とたくさんあるので他記事を見ていただければ良いと思いますが、非エンジニアが実際に Figma のプラグインを作る流れを今回は書いてみたいと思います。
実際に自分用の Figma プラグインを作ってみる
今回は ChatGPT を使って Figma のプラグインを作ってみます
今回作るプラグイン
試しに今回は WF のリネームをするプラグインを作ってみます。
WF のリネームだけであれば標準機能でも一括編集で問題なくできますが、制作段階である程度まとまってきたタイミングである程度直感的にリネームをまとめて一括でやりたいことがあるので、各 Section でページのカテゴリを設定してそれぞれのフレームを Section に合わせてリネームする形にしたいと思います。
たとえば、以下の WF だと、TOP の Section のものは「TOP_1」仮想ページの Section は「Sub_1」「Sub_2」のような形でリネームされるようにしたいと思います。
Figma にインストールする
プラグインの作成方法は他の方が書いた記事などでもまとまっていますが、簡単にまとめていきます。
① プラグインを新規作成する
メニューから「プラグイン」->「開発」->「プラグインの新規作成」を選択します。
名前を入力します。今回は Figma アプリになるので「Figma デザイン」を選択します。
とりあえず「デフォルト」を選択します。
プラグイン用のフォルダが作成されるので、場所を指定して保存します。
保存をすると以下のよう画面が出てくるので「完了」を選択します。
このようにフォルダが作成されました。VSCode で開きます。
②ChatGPT でコードを作成する。
コードを作成していきます。
以下のような形で ChatGPT に聞いてみました。
## 前提
Figmaのプラグインを作成したいです。コードを作成してください。
## やりたいこと
Sectionの中に入っている各Frame名を変えたいです。
各Frame名を以下のようにリネームしてください
Frame名 :
#{Section名}_${num}
例 :
$TOP_1
（Section名がTOPの場合）
## 条件
・${num}は数字を入れてください。1枚目のframeなら1、2枚目のframeなら2など。
・${num}には左のフレームほど若い数字にしてください。
すると以下のような形で出力してくれました。
VSCode の Code.js に転記して保存します。
③ 修正する
Figma で動かしてみましょう
「プラグイン」->「開発」-> 自分で作ったプラグインを選択します。
ただ、動かしても何も反応がなさそうですので、修正していきます。
修正も ChatGPT にお願いしますが、とりあえずエラーの内容を確認したいので
「プラグイン」->「開発」-> 「コンソールを表示/非表示」を選択します。
コンソールが表示されます。エラーが出ているようなのでそのままコピーして ChatGPT に改めて確認してみます。
改めて、code.js に反映してもう一度 Figma で動かしてみると無事に以下のような形で動きました。
まとめ
このように割と思ったよりサクッと Figma のプラグイン自体は作ることができます。
チームで使いたい場合には都度 Git などで共有しながらチーム全員のローカル環境で共通で動かしたりすることも可能かなと思います。
（昨今は ChatGPT 先生にコードを書いてもらえるので大変助かります・・・）
エンジニアの方向けに自分でコードを書きたい時などは 公式のドキュメントやサンプルのプラグインが参考になると思いますし他の方が書いた記事も結構たくさん出ていますのでググってみると良さそうです。
申請したいなーとなった場合は Figma アプリの Community =>「Publish」するとそのまま公開することもできます。
ぜひ、自作の Figma プラグインで Figma ライフをもっと楽しんでみてください。
Discussion