デザインの現場では、画面の命名やフレームの作成、整列、スタイルの整理といった細かい作業が発生します。
一つひとつは単純ですが、積み重なると時間を奪い、ミスやストレスの原因にもなります。

こうした作業を減らすために、社内での AI エージェント検証をきっかけに、Claude Code を使ってFigma 上の作業を効率化するプラグインをいくつか作り始めました。

というわけでこの記事では、作ったプラグインを紹介していきたいと思います。

AI エージェント検証についての記事はこちらです。

01 Frame Bulk Generator

画面一覧をもとに、画面名とサイズをまとめて反映できるプラグインです。

あらかじめ画面一覧がある場合でも、Figma 上では名前の貼り付けとサイズ設定を一つずつ行う必要があり、手間がかかっていました。数が増えると、コピペミスも起きやすくなります。
この作業をまとめて済ませられるようになったことで、初期構成の準備を短時間で進められるようになりました。

使い方

1. スプレッドシートなどから画面一覧をコピー
2. プラグインに貼り付け
3. 画面サイズを指定して実行

02 Frame Labeler

オートレイアウトで整理した画面でも、フレーム名を見える形で管理できるプラグインです。

オートレイアウトで画面をまとめるとフレーム名が表示されなくなり、どの画面なのか分かりづらくなります。せっかく付けた名前も活かせず、確認や共有の手間が増えていました。
そこで、フレーム名をラベルとして画面上に配置し、ラベルと画面をオートレイアウトでまとめることで、見た目を崩さずに名前を表示できるようにしました。フレーム名を変更すればラベルや構造にも反映されるため、個別に修正する必要もありません。

使い方

1. ラベルを付与したいフレームを選択(複数可)
2. プラグインを実行

※フレーム名を変更した場合は再実行するとラベルにも反映されます

03 Variable Exporter

Variables の情報をもとに、スタイルシートをそのまま書き出せるプラグインです。

Variablesでデザインを管理していても、最終的にはスタイルガイドを別途整える必要があり、同じ内容を作り直す手間が発生していました。
そこで、Variablesの内容をそのままスタイルとして書き出すことで、デザインと資料を分けずに管理できるようにしました。スタイルシート作成にかかる時間も短縮されています。

※テキストサイズの反映についてはまだ調整中です

04 まとめ

今回紹介したプラグインは、どれも大きな機能ではありませんが、日々の細かい作業を確実に減らしてくれるものです。
画面の準備や整理、スタイルの書き出しといった工程をまとめて効率化することで、手を動かす時間を減らし、設計や検討に集中できる状態をつくっています。

社内で進めているAIエージェントの検証も含め、こうした取り組みを通して、これまで手作業で行っていた部分を少しずつ置き換えられるようになってきました。結果として、作業負担の軽減だけでなく、ミスの削減にもつながっています。

今回紹介したもの以外にも、まだ試している段階のものや、これから改善していくものもあります。今後も新しく作ったプラグインや運用の変化があれば、この記事に追記していく予定です。

引き続き、デザイン業務の中で「減らせる作業」を見つけながら、より効率的に進められる方法を探っていきます。