こんにちは。デザイン事業部でデザイナーをしている野田です。

Config 2025の新機能発表があったばかりですが、Figmaをさらに便利にするためのプラグインは、今も尚日々のデザインワークに欠かせない存在です。数多くある中で、特に「これは入れておくと作業効率が格段に上がった！」と実感した、日頃ヘビーユースしている定番からとてもシンプルなものまで、13種ピックアップしてみました。

以下、4カテゴリに分けてピックアップしていきたいと思います。
◎素材・コンテンツ生成系
◎テキスト・画像編集系
◎作業効率・自動化系
◎品質チェック・改善系

◎素材・コンテンツ生成系

01. Iconify

→ 紹介ページへ

画像引用元：Iconify

王道のプラグインだと思います。
膨大なアイコンライブラリ（Material Design Icons, Font Awesomeなど150種類以上）から、必要なアイコンをFigmaに直接挿入でき、キーワード検索も可能。ライセンス情報も確認できる点が便利です。

使用シーン：

  • UIに使うアイコンを探すとき、ワイヤーフレームの段階で仮のアイコンを置きたいとき。

02. realistic-dummy-text-ja:

→ 紹介ページへ

画像引用元：realistic-dummy-text-ja

日本語のダミーテキストを生成してくれるプラグインです。特に氏名、住所、メールアドレスなど、具体的な項目を選んで生成できる点が便利です。

使用シーン：

  • 日本語UIの画面でリアルなダミーテキストを入れたいとき、テーブル表示などで大量のテキストが必要なとき。

このプラグインは管理テーブルを多用した案件が一段落した後に発見し、氏名やメールアドレスなどで活用したかった、、、と悔いが残ったため備忘録として紹介しています。

◎テキスト・画像編集系

03. Invert Color

→ 紹介ページへ

画像引用元：Invert Color

選択したオブジェクトやフレーム内の色の「明度と色相」を反転 させる、非常にシンプルなプラグインです。例として白は黒に、青は黄色にといった具合に、元の色の補色に近い色に変換してくれます。Photoshopなどの他画像編集アプリを介せずFigma内で完結できる点が便利です。

使用シーン：

  • 画像にcssの filter: invert(); タグを使用したいとき。
  • デザインのコントラストを意図的に反転させて、見た目の効果を検証したいとき。
  • ダークモードの見た目を検証したいとき。

04. Remove BG

→ 紹介ページへ

画像引用元：Remove BG

画像から背景を自動で削除し、透過PNG形式で保存できるシンプルなプラグインです。元画像と比べると多少画質が落ちますが、そこまで気にならないレベルかと思います。このプラグインもまた、Photoshopなどの画像編集アプリを介せずFigma内で完結できる点が非常に便利です。

使用シーン：

  • 人物や物の切り抜き画像を使いたいとき。
  • 複数の画像から背景を素早く削除して、素材を統一感のあるものにしたいとき。
  • モックアップに製品写真などを配置する際に、背景を気にせず配置したいとき。
  • デザインのプレゼンテーション資料で、画像から不必要な要素を取り除き、主題を際立たせたいとき。

05. Skew

→ 紹介ページへ

画像引用元：Skew

一番ヘビーユースしていると断言できるプラグインです。
Figmaのフレームやオブジェクトを、最大±90度の角度で「傾斜」（Skew変形）を適用できるツールです。通常の回転とは異なり、透視図法のような効果や、動きのある表現を作成できます。

使用シーン：

  • 斜めの視点や、奥行きのあるグラフィックを作成したいとき。
  • テキストやオブジェクトに躍動感やスピード感を与えたいとき。
  • ロゴデザインやアイコン、イラストなどでユニークな形状を試したいとき。
  • モックアップに実際のUIを斜めに配置して、よりリアルな表現をしたいとき。

◎作業効率・自動化系

06. Autoflow

→ 紹介ページへ

画像引用元：Autoflow

Figmaのフレームやオブジェクト間に、自動でコネクタ（矢印）を生成し、ユーザーフローやサイトマップ、情報アーキテクチャなどを視覚的に表現できるプラグインです。手動で線を描く手間を省き、要素の移動に合わせて線も追従するのが特徴です。他にも似たようなプラグインが多数ありますが、使い勝手の面で今のところこのプラグインに落ち着いています。

使用シーン：

  • ユーザーフロー図の作成時: ユーザーがアプリやWebサイト内でどのような経路をたどるかを図示する際、画面間の遷移を矢印で分かりやすく繋ぎたいとき。
  • サイトマップ/IA（情報アーキテクチャ）の作成時: Webサイトやアプリの全体構造をツリー形式で表現し、各ページや機能間の繋がりを示したいとき。
  • プロトタイプの画面遷移の可視化時: プロトタイプの画面と画面の間の論理的な繋がりを、デザインファイル上で明確に示したいとき。
  • ブレインストーミングやワイヤーフレーム作成時: アイデアを視覚的に整理し、要素間の関係性を素早く表現したいとき。

07. Chart:

→ 紹介ページへ

画像引用元：Chart

様々な種類のグラフ（棒グラフ、折れ線グラフ、円グラフ、散布図など）をFigma内で直接、データに基づいて生成できるプラグインです。手動でグラフの形や数値を調整する手間を省き、リアルなデータを使ったUIデザインを効率化します。

使用シーン：

  • ダッシュボードやデータ可視化系のUIデザイン時: ユーザーがデータを見るための画面（例：売上分析、活動ログ、健康データなど）を作成する際、実際のデータに基づいたグラフを素早く配置したいとき。
  • プレゼンテーション資料作成時: デザインのコンセプトや成果を説明するために、グラフを使って説得力のあるビジュアルを作成したいとき。
  • インフォグラフィックの作成時: 複雑なデータを視覚的に分かりやすく表現するインフォグラフィックをデザインするとき。
  • データに基づいたコンポーネントのデザイン時: グラフ表示が必要なコンポーネント（例：ミニグラフ、進捗バーなど）をデザインする際に、多様なデータの見せ方を試したいとき。

08. Comment Note

→ 紹介ページへ

画像引用元：Comment Note

Figmaのコメント機能ではできない、特定のオブジェクトに直接関連付けられた「メモ」や「ドキュメント」を残せるプラグインです。コメントは流れていく可能性がありますが、これはオブジェクトと共に存在し続けます。

使用シーン：

  • デザインの意図や背景、特定の機能に関する詳細な説明を、そのデザイン要素のそばに残しておきたいとき。
  • デザインの技術的な制約や、開発者向けの特別な指示を付記したいとき。
  • 特定のコンポーネントの使用ガイドラインや、注意点を直接オブジェクトに紐付けておきたいとき。
  • デザインレビューやフィードバックの際に、具体的な指示を分かりやすく残したいとき。

【Config 2025でも発表があった最新のアップデート】このプラグインの代替になるか（？）
※今まで、Figma Design（有料プラン加入者）にアノテーション機能があり、開発者がデザインをコードに変換するために必要なコンテキストの提供、デザインプロパティの定義、その他の関連情報の伝達を行えていました。Config 2025の最新機能の発表では、このアノテーション機能が更に進化し、カスタマイズ可能なカテゴリとコメントやメモを追加できるようになったため、このプラグインに取って代えられそうです。要素の移動に合わせてアノテーションも追従するため、使い勝手はとても良さそう！

画像引用元：Figma Learn: Add measurements and annotate designs

09. Table Generator:

→ 紹介ページへ

画像引用元：Table Generator

行と列の数を指定するだけで、簡単に表（テーブル）の構造をFigma内に自動生成できるシンプルなプラグインです。手動で各セルや線を配置・調整する手間を省き、表形式のUIデザインを効率化します。

使用シーン：

  • データ一覧画面のデザイン時: ユーザーのリスト、製品のリスト、注文履歴など、表形式で情報を表示するUIを作成するとき。
  • 設定画面や管理画面のデザイン時: 各項目を並べて表示する際に、整理された表のレイアウトを使いたいとき。
  • コンポーネントライブラリの作成時: 表形式のコンポーネント（例：テーブルヘッダー、テーブル行）の構造を効率的に作成・管理したいとき。
  • データ入力フォームのデザイン時: ユーザーが情報を入力する際のグリッド状のレイアウトを構築したいとき。

◎品質チェック・改善系

10. Clean Document

→ 紹介ページへ

画像引用元：Clean Document

Figmaファイル内の不要な要素（非表示レイヤー、空のグループ、使われていないスタイル、アウトライン化されていないテキストなど）を整理し、ファイルを軽量化・クリーンアップできるプラグインです。

使用シーン：

  • 共同作業後など、他のデザイナーが残した不要なレイヤーやグループを整理したいとき。
  • ファイルサイズが大きくなり、動作が重くなってきたと感じるとき。
  • デザインハンドオフの前に、開発者が見やすいようにファイルを整理したいとき。
  • デザインシステムやコンポーネントライブラリを管理していて、使われていないスタイルやコンポーネントを削除してきれいに保ちたいとき。

11. Contrast

→ 紹介ページへ

画像引用元：Contrast

テキストと背景色のコントラスト比をチェックし、アクセシビリティ基準（WCAG）を満たしているか確認できるプラグインです。

使用シーン：

  • デザインの可読性を確保したいとき。特に、視覚に障がいを持つ方や高齢者の方にも情報が伝わるようにしたい場合。
  • 色の組み合わせに迷ったとき、適切なコントラスト比でテキストが見やすいかを確認したいとき。
  • WCAG（Web Content Accessibility Guidelines）など、アクセシビリティのガイドラインに沿ってデザインを作成するとき。
  • ブランドガイドラインでカラーパレットが定められているが、その組み合わせがアクセシビリティ上問題ないか検証したいとき。

【Config 2025でも発表があった最新のアップデート】このプラグインの代替になるか（？）
コントラスト比と指定した色がアクセシビリティ基準（WCAG）を満たしているか確認できるツールが新たにFigmaのカラーピッカーに追加されましたが、カラースタイルが適用されている場合は、ツールが使えないため現状ではまだContrastのお世話になりそうです。

12. Design Lint:

→ 紹介ページへ

画像引用元：Design Lint

Figmaファイル内のデザイン要素が、あらかじめ設定されたデザインシステムや一貫性のルールに沿っているかを自動でチェックし、問題点（Lint）を洗い出せるプラグインです。具体的には、定義されていない色やフォント、シャドウ、角丸などが使われていないかなどを検出してくれます。

使用シーン：

  • デザインシステムを運用しているチームのツールとして: 定義されたデザインスタイル（カラー、タイポグラフィ、シャドウなど）以外の値が使われていないかを確認し、デザインの一貫性を保ちたいとき。
  • 複数人でデザイン作業を進めているとき: 各メンバーがそれぞれのルールで作業してしまい、デザインがバラバラになるのを防ぎたいとき。
  • デザインハンドオフの前に: 開発者に渡す前に、デザインが整っているか、余分なスタイルが残っていないかなどを最終チェックしたいとき。
  • 既存のデザインファイルをクリーンアップしたいとき: 長期間運用されているファイルで、使われなくなったスタイルや不整合なスタイルを特定し、修正したいとき。

13. Instance Finder

→ 紹介ページへ

画像引用元：Instance Finder

Figma コンポーネントに紐づく全てのインスタンスを高速に検索し、選択できるプラグインです。例えば、破棄したいコンポーネントがあるが、どの画面やレイヤーで使用しているか把握できない際に便利です。

使用シーン：

  • 大規模なFigmaファイルで作業していて、特定の要素（例：特定のボタンコンポーネント、ある画面のヘッダー）をすぐに見つけたいとき。
  • デザインシステムにおいて、特定のコンポーネントのインスタンスをすべて選択して変更を加えたいとき。

最後に

既に愛用しているよ、というプラグインもあったかと思いますが、
一つでもこれは便利かも！と思えるものがあったら嬉しいです。