「コードが書けなくてもFigmaプラグインって作れるの？」そんな疑問を持つデザイナーの方へ。
実際にAIを使ってFigmaプラグインを作った体験をまとめました。
INDEX
きっかけ
案件で毎回、グラフを綺麗に整える作業が発生していました。
デザイナーに共有されるグラフ画像は、グラフと文字が重なっていたり、文字が潰れていたり。
そのままでは使えないので、Photoshopでちまちま手作業で直していました。
「さすがにこれ、なんとかならないかな……」と思い続けて早数ヶ月。
Illustratorという選択肢は早々に消えた
社内のデザイナーから「イラレでグラフ作れるよ、それでやってみたら？」とアドバイスをもらいました。
イラレにグラフ機能があるんです。知っていましたか？
確かにそんな機能があったような……（聞くまでは忘れていた）。
よしやってみよう、と思って実際にやってみると、折れ線グラフと棒グラフを組み合わせた複合グラフは作れないことが判明。
さらに、2つのグラフを別オブジェクトで重ねる方法だと、Y軸のスケールを手動で合わせる必要があって……
これ、今の作業と大差ないかも……
今回も急ぎだし、Photoshopで手動でやった方が早いか……と思って、結局手動でちまちま作業していました。
Figmaプラグインという、なんか難しそうな選択肢
次に浮かんだのが「Figmaプラグインを自作する」という案です。
周りでプラグインを自作している方がいるのは知っていたし、一度作ってしまえば今後の運用・更新もFigmaのほうが効率よくできそうという直感もありました。
ただ、正直に言うと「プラグインって、コードとか書くやつでしょ。難しそう」という気持ちが8割くらいを占めていました。
GMO AI DAYという、ありがたい圧
そんな私を動かしたのが、会社の取り組みでした。
GMOインターネットグループでは毎月第4木曜日を GMO AI DAY と定めており、8,000人の社員全員が「仕事はAIのみ」で取り組む日があります。
会社全体でAI活用に本気で向き合っている雰囲気の中で、「じゃあ、あの件もAIに聞いてみるか……」と、ようやく重い腰が上がりました。
Claudeに聞いて作ってみた
まずClaudeにこのように聞いてみました。
「はい、可能です！」
その回答を見て、「そうだよな、今はAIで何でもできるもんな。でも難しいコードがよくわからない私でも作れる？ 話はそれからだ！」と思い、初心者にもわかるように手順を説明してもらいました。
Claudeとのやりとり①｜フォルダを作る
まず言われた通り、my-chart-plugin/のフォルダをデスクトップに作って、Claudeが用意してくれた3つのファイルを保存します。
Claudeとのやりとり②｜Figmaに登録する
できたプラグインを実際にFigmaで使う手順も聞いてみました。
この手順通りに進めたら、あっさり登録完了。
それからは「できたグラフを画像で保存できたらいいな」「PC・SP用でそれぞれ最適なレイアウトでできたらいいな」などと要望を伝えていきました。
完成したFigmaプラグインでできること
最終的に完成したのがこちらです👇
グラフを画像として書き出すこともできます👇
完成したプラグインでできること👇
- CSVでデータを自由に編集・追加・削除
- 棒グラフ・折れ線の色をカラーピッカーで変更
- グラフタイトルを自由に編集
- 「グラフを更新」で反映
- 画像としてダウンロード可能
- PC・SPそれぞれに合わせたレイアウトでグラフ作成が可能
やってみた感想
ざっくりAIに聞いてみたら思いのほかあっさりできてしまった、というのが正直な感想です。
コードの中身を完全に理解していなくても、やりたいことを言葉で伝えれば動くものができる。この体験は、自分にとってかなり新鮮でした。
GMO AI DAYの流れがなければ、いまだにPhotoshopでちまちまやっていたと思います（笑）。
今回プラグインを作ったことで、グラフ作成の工程をFigma上で自動化し、効率化の仕組みを整えることができました。
毎回発生していた手作業がなくなり、その分のリソースを別の作業に充てられるようになったのは、大きな変化だと感じています。
今回の教訓、一言でまとめると——
「難しそう」と思って放置してた時間が、一番もったいなかった。
