Figmaの面倒を減らすプラグイン6選

こんにちは、尾崎です。

FigmaでWebサイトをデザインしていると、画面をつくる以外の作業が意外と多くあります。
増え続けるレイヤーを整理する。フォントや色の使い方が揃っているか確認する。画像を書き出す。実装者に渡す前に、見落としがないか一つずつ見直す。。。などなど。
どれも必要ですが、ページ数が増えるほど確認に時間がかかり、目視だけでは漏れも起こります。

自分の場合、制作中はまず画面を形にすることを優先し、レイヤー名やスタイルの整理を後回しにしてしまうことがよくあります。
実装前になってまとめて見直すと、使わないフォントや初期名称のレイヤーが残っていて、思った以上に時間がかかります。

そこで今回は、デザインそのものを自動でつくるものではなく、こうした「地味に面倒な作業」を減らしてくれそうなFigmaプラグインを調べてみました。
便利そうなものをたくさん並べるのではなく、Webサイトの制作中や実装前に使う場面が想像できたものに絞って紹介します。

デザインの小さな不揃いを見つける

ページが増えてくると、一部の文字だけテキストスタイルから外れていたり、似ているけれど少し違う色が混ざっていたりします。見た目ではほとんど同じなので、そのまま気づかないこともあります。

「Design Lint」は、選択した範囲を確認し、テキスト、塗り、線、エフェクトなどにスタイルが紐づいていない箇所や、設定した基準から外れた角丸などを一覧で表示してくれるプラグインです。
どのスタイルを適用するべきかまで判断してくれるわけではありませんが、まず「ほかと違う箇所がどこにあるか」を見つけられるだけでも、目視確認の負担はかなり減ります。特に、デザインが完成して実装者へ渡す前の最終確認に向いています。

増えてしまった不要なレイヤーを整理する

制作途中では、比較のためにレイヤーを非表示にしたり、一時的にグループ化したりすることがあります。
そして、作業中は必要でも、完成時には使っていないレイヤーや、中身が一つしかないグループが残りがちです。

「Clean Document」は、非表示レイヤーの削除、一つの要素しか含まないグループの解除、レイヤーの並べ替え、位置やサイズの端数調整などをまとめて実行できるので、一つずつレイヤーパネルを開いて整理するよりも速く、ファイル全体の見通しをよくできます。
（しかし、非表示にしているだけで後から使う予定の要素まで削除される可能性があります。いきなり本番データに使わず、ファイルを複製して結果を確認してから実行したほうが安全です。）

同じ条件のレイヤーをまとめて探す

「この色を使っている箇所だけ確認したい」「特定のフォントウェイトが残っていないか探したい」と思っても、ページ内のすべてのレイヤーを一つずつ選択するのは大変です。

そんな中、「Similayer」は、選択したレイヤーを基準に、色、フォント、レイヤー名、角丸、サイズ、Auto Layoutの設定など、同じ条件を持つレイヤーをまとめて選択でき、自動で内容を書き換えるのではなく、条件に該当するものを選択してくれるところも使いやすそうです。選択された箇所を確認したうえで、変更するか、そのまま残すかを自分で判断できます。

フォントをまとめて置き換える

制作途中で使用フォントが変更になったり、実際には使用できないウェイトが混ざっていたりすると、複数ページをまたいで修正する必要があります。そして、それはテキスト量が多いサイトほど、手作業での置き換えは時間がかかります。

「Smart Font Changer」は、選択範囲、現在のページ、ファイル全体から対象のフォントを探し、ファミリーやウェイトをまとめて変更できるプラグインです。

すべてを同じフォントにするだけでなく、RegularはRegular、BoldはBoldのように、ウェイトを指定して置き換えられる点も実務で使いやすそうです。

画像をWeb向けに圧縮して書き出す

Figmaから画像を書き出したあと、別のサービスで圧縮し、必要に応じてWebPなどへ変換する。この往復も、画像点数が増えると地味に時間がかかります。
「Tinify」は、TinyPNGの公式Figmaプラグインです。Figma上の選択した要素を圧縮し、PNGやJPEGだけでなく、WebPやAVIF形式でも書き出せるので、デザインデータと実装用素材を分けて用意する案件では、Figmaから直接、軽量な画像を用意できるのは便利です。

これからは、自分用のプラグインもつくれる

プラグインを調べていて、もう一つ気になったのが、2026年にFigmaから公開された「Generative Plugins」です。
Figma Agentに「現在のページから初期名称のままのレイヤーを探して」「指定したフォント以外が使われていたら一覧にして」と文章で指示すると、コードを書かずに自分用のプラグインを生成できます。

現在はオープンベータで、Figma Agentへのアクセスや利用できるプランなどの条件がありますが、既存のプラグインを探すだけでなく、自分の作業に合わせてつくる選択肢が出てきました。
たとえば、実装前のデータを確認するために次のようなプラグインが考えられそうです。

• 初期名称のレイヤーを検出する
• 使用可能なフォントとウェイト以外を検出する
• スタイルに紐づいていない文字や色を探す
• PC版とスマートフォン版のフレームが揃っているか確認する
• 問題箇所を一覧表示し、クリックすると該当レイヤーへ移動する

すべてを自動で修正するのではなく、確認が必要な箇所だけを教えてもらう。
そうすれば、意図的に変えている部分まで機械的に揃えてしまうことも避けられます。

[Generative Plugins クイックスタートガイド（Figma公式）](https://help.figma.com/hc/en-us/articles/41147702210071-Quick-start-guide-to-generative-plugins-and-shaders)

プラグインに任せられること、任せられないこと

今回調べたプラグインは、探す、選択する、まとめて置き換える、書き出すといった反復作業に向いています。
一方で、PC版とスマートフォン版のどちらを正とするのか、例外として違う見せ方を残すのか、レイヤーにどんな名前を付ければ実装者に伝わるのかといった判断までは任せられません。

プラグインを使う目的は、Figmaを機械的にきれいにすることではなく、人が考えるべきところに時間を使える状態をつくることなのだと思います。
実際に使い続けられたものがあれば、またあらためて紹介したいと思います。

ほなね。