見出し画像

（AIに頼んで）Figmaプラグインを作って公開してみた

Japan Digital Design, Inc.

こんにちは！Japan Digital Design（以下JDD）の小野村です！！
Experience Design Div.という部署で日々Figmaと戯れながらデザイナーをしております。

今回はFigmaのプラグインを作ってみた話を紹介したいと思います。実際に作ったものはこちら！
ShuffleLayers – Figma

自作のFigmaプラグイン、Shaffle Layersのイメージ画像
お寿司みたいなアイコンでかわいい

選択したオブジェクトの子オブジェクトのレイヤー順をシャッフルするというシンプルなものです。

たのしい自己紹介のために

まず、そもそもなぜプラグインを作ろうとしたのかというと、JDDのデザインチームでメンバーが増えた時に使用する自己紹介Figmaファイルがきっかけとなりました。

メンバー分のプロフィールカードがグリッド状に並んでいる
簡単なプロフィールを書いたカードがFigmaに並ぶ

ここに載っているカードを見ながら各自自己紹介をしていくのですが、ついつい毎回同じように上から順に紹介することになるので、マンネリ化をなんとかしたいねーなんてことを話していました。

そこでプラグインでサクッとシャッフルしたいなと検索したのですが、すぐには希望のものが見つかりませんでした（AutoLayout大好き太郎なので位置ではなくレイヤー順を入れ替えたい）（とはいえちゃんと探せばあると思います）

作ってみた

という訳で、とりあえず作ってみることにしました。

ヘルメットを被った作業服姿の人がパソコンに向かっている。画面にはものすごいメカの図面のようなもの。
開発イメージ

「はなすけ」とのやりとり

ふむふむ。FigmaのプラグインはJavaScriptで作れるようです。…よく分からないのですぐにAIに頼ってみることにしました。

JDDには「はなすけ」というSlack上で気軽に相談できるAI妖怪が住んでいます。
（え？）

生成系AIを利用したSlackアプリ「はなすけ」へ早速Figmaのプラグイン作成について相談してみました。

slackのキャプチャ。onomがAI botである「はなすけ」にfigmaのプラグインの作り方を聞いている様子。アドバイスをしながら一緒に作っていこうと提案されている。
「一緒に頑張ろうね！」

一緒に考えてくれるはなすけ。やさしいですね。
ですが面倒なのですぐ答えを聞くことにしました。

slackキャプチャ。onom「上手くできないからお手本のコードを見せて！」
すぐに答えを知りたがる人間の様子

嫌な顔ひとつせず、出来上がったコードを教えてくれるはなすけ。サンキュー。
せっかくなのでちょっとだけ追加でお願いをして、コードを直してもらいます。

slackのキャプチャ。onomからの複数の指示が羅列されている
後出しであれこれ言ってくる人間の様子

動かしながら思いつきで仕様を追加し、コードを修正していってもらいます。助かるー。

slackキャプチャ。最終的なプラグインのコードがはなすけから提示されている。
最終的なコードはこんな感じ

動くものができました！いえい！

公開（パブリッシュ）

せっかくなので誰でも使えるようにしようと思い、パブリッシュすることにしました。

Figmaのプラグイン申請画面
こんな感じで申請。ドキドキ
4匹の猿が帽子とサングラスをつけてこちらを見ている。パーティー中ぽい。
わくわく

特に問題もなく、Figjamでも使える設定になってるけどOK？とだけ確認メールがきました。

公開したShuffle Layers▼
ShuffleLayers – Figma

公開されたFigmaプラグインのページ
無事に公開されるとちょっと感動

無事に公開され、自己紹介会でも使えて脱マンネリ化となりました。めでたし。

作例

こんな感じで色々遊んだりもできるので、ぜひぜひ試してみてください！

プラグイン実行サンプル１。赤と白のブロックがランダムに並んでいる
プラグイン実行サンプル２。四角や三角の図形がランダムに並んでいる
プラグイン実行サンプル３。カラフルで色々な長さの線がランダムに並んでいる

最後に

Japan Digital Designではデザイナー募集中です！！
Figmaのプラグインを作る案件はほぼ無いです（勝手に作りましょう）が、JDDでは一緒に金融の未来を作るデザイナーを募集しています！

Japan Digital Designは三菱UFJフィナンシャル・グループの戦略子会社です。