【2023年度版】Figmaのおすすめプラグイン20選!プラグインのインストール方法から使い方まで解説

公開日:2023.5.19

更新日:2025.10.15

本記事では、Figmaのプラグインのインストール方法から使用方法、さらにおすすめのプラグイン20選を紹介します。デザインの効率化、テキストの加工、画像処理など、幅広い分野で活用できるものを厳選していますので、ぜひ参考にしてみてください。

Figmaのプラグイン機能とは?

Figmaのプラグイン機能とは、Figmaの既存の機能を拡張し、Figmaの基本機能ではできない操作を可能にしたり、デザイン作業の効率を上げることができる機能です。

プラグインは、Figmaコミュニティや開発者によって作成され、多くの便利なプラグインが公開されています。ほとんどは無料で利用でき、プラグインの使用により作業効率が大幅に向上するため、Figmaを利用する際には必ずプラグインを活用しましょう。

Figmaのプラグインの入れ方と使い方

プラグインの探し方

プラグインを探す際は、Figmaのコミュニティで検索します。Figmaのホーム画面左上の地球のマークからコミュニティに移動し、「すべてのリソース」のプルダウンメニューから「プラグイン」を選択します。ここで無料・有料の絞り込み機能や、右端のソート機能を利用して、人気順や新着順でプラグインを探すことができます。

Figma  プラグインの探し方

プラグインのインストール方法

方法1:コミュニティからインストールする方法

保存したいプラグインの「使ってみる」ボタンをクリックすると、エディタに移動します。次に、プラグインの3点メニューをクリックして「保存」を選択します。

Figma プラグインのインストール方法①

方法2:プロジェクトのエディタ内からインストールする方法

左上の「リソース」(三角や四角などのシェイプが集まっているアイコン)をクリックし、「プラグイン」を選択します。検索窓にインストールしたいプラグインの名前を入力し、保存したいプラグインをクリックして3点メニューから「保存」を選択します。

Figma プラグインのインストール方法②

プラグインの使い方

Macの場合、トラックパッドの2本指クリック(もしくは右クリック)で、「プラグイン」→「保存済みのプラグイン」を開き、各プラグインを起動しましょう。

Figma プラグインの使い方

おすすめのFigmaプラグイン20選

ここからは、Figmaのおすすめプラグイン20選を紹介します。それぞれの使い方も含めて紹介しています。ぜひ参考にしてください。

1. 高品質なフリー画像プラグイン「Unsplash」

Unsplash

Unsplashは、無料で利用できる高解像度のストックフォトを提供するプラグインです。このプラグインは非常に有名で、利用していないデザイナーはいないと言っても過言ではありません。検索機能が付いており、高品質なフリー画像をFigma上で探し、そのままFigmaに画像をインポートすることができます。

Unsplashの使い方

2. イラストを探すなら「Blush」

Blushは、多数のイラストレーターのオリジナルイラストを利用できるプラグインです。Blushにはイラストのパーツをカスタマイズする機能も付いており、自分のオリジナルデザインに合わせたイラストを作成することが可能です。無料プランでも非常に多くのイラストを利用でき、有料のプロプランにアップグレードすれば、SVG形式でイラストをインポートでき、さらに多くのイラストを利用できます。

Blushの使い方

3. アイコンを探すなら「Iconify」

Iconify

Iconifyは、Material Design IconsやFont Awesomeなどの有名なサービスを含む、複数のアイコンサイトが集約されたアイコンのプラグインです。アイコンの種類が非常に多く、SVG形式で出力することができます。

Iconifyの使い方

4. PCやモバイルなどのモックアップ作成なら「Mockup」

Mockup

Mockupは、モックアップを手軽に作成できるプラグインです。PCやタブレット、モバイルなどのデバイスだけでなく、看板やポスターなど幅広い種類のモックアップを作成することができます。無料プランでも高品質なモックアップが作成できますが、有料プランにすると利用できるモックアップの種類が増え、デザインの幅が広がります。

Mockupの使い方

5. 綺麗なグラデーションを作るなら「Uigradients」

Uigradients

Uigradientsは、さまざまなグラデーションパターンが用意されているプラグインです。グラデーションのパターンは350種類以上用意されており、選択した後にFigma上で色の調整も行うことができます。

Uigradientsの使い方

6. 画像の背景を消すなら「Remove BG」

Remove BG

Remove BGは、画像の背景を透過させるプラグインです。Photoshopを使わずとも、Figma上で背景を透過させることができるのは非常に便利です。切り抜きの精度は高いのですが、プラグインの実行後に画質が粗くなるため、メインビジュアルなど、画質を保つ必要がある画像の背景を切り抜く際には他のツールを利用することをお勧めします。

Remove BGの使い方

7. 画像サイズの大きい画像をアップするときは「Insert Big Image」

Insert Big Image

Insert Big Imageは、大きなサイズの画像を画質を損なわずにFigmaにアップロードするためのプラグインです。サイズの大きすぎる画像は複数のパーツに分割されて読み込まれます。Figmaでは、縦幅または横幅が4096pxを超える画像は、自動で圧縮されて読み込まれるため、このサイズを超える場合は、Insert Big Imageを利用すると良いでしょう。

下記は、Insert Big Imageを使わずにインポートした縦長画像(左)と、Insert Big Imageを使ってインポートした画像(右)の比較画像です。

Insert Big Imageを使った画像と使っていない画像の比較

8. 画像を圧縮するなら「Downsize」

Downsize

Downsizeは、Figma上で画像を圧縮するプラグインです。pngからjpegへの変換やリサイズも行えます。多数の画像を使用するプロジェクトでは、Figmaが重くなることがあります。作業効率が低下するのを防ぐためにも、このプラグインを使用してプロジェクトの容量を軽減しましょう。複数の画像を選択して一度に圧縮することも可能です。

9. 画像をベクター化するなら「Image Tracer」

Image Tracer

Image Tracerは、ビットマップ画像(pngやjpg)をベクター画像(svg)に変換するプラグインです。例えば、フリーイラストの特定の色を変更したい場合などに非常に便利です。このプラグインは色をそれぞれ別々のベクターとして認識するため、下記のように、服の色だけを変更するといったことも可能です。

Image Tracerの使い方

10. フォント選びには「Better Font Picker」

Better Font Picker

Better Font Pickerは、どのようなフォントかを見ながら選択できるプラグインです。通常のFigmaのエディタでは、フォント名が全て同じフォントで表示されてしまうため、選択したフォントがどのようなものになるのかイメージしにくいです。Better Font Pickerを使用すれば、選択するフォントがどのような形状かを見ながら選べるため、効率的にフォントを選定することが可能になります。

Better Font Pickerの使い方

11. 日本語のフォント選びには「Japanese Font Picker」

Japanese Font Picker

Japanese Font Pickerは、上記のBetter Font Pickerの日本語版です。こちらもぜひ使用してみてください。

12. シェイプを均等に作るなら「Split Shape」

Split Shape

Split Shapeは、図形を均等に分割するプラグインです。Columns(横の列数)、Rows(縦の行数)、Gutter(シェイプ間の余白)、Margin(元の図形からの左右のマージン)を設定できます。

Split Shapeの使い方

13. ユニークなシェイプを出すなら「Blobs」

Blobs

Blobsは、形状が一定でないユニークなシェイプをランダムに生成するプラグインです。UniqunessとComplexityを調整して、自分のイメージに合ったシェイプを作成することができます。生成した後には、パスの調整も行えます。

Blobsの使い方

14. フローや画面遷移図を作るなら「Autoflow」

Autoflow

Autoflowは、フロー図や画面の遷移図を作成する際に便利なプラグインです。Figjamでもフロー図を作成できますが、Figmaのエディタ上で画面遷移などを視覚化したい場合には、このプラグインを使用すると便利です。

Shiftキーを押しながら、矢印で接続したいオブジェクトを選択するだけで矢印が描かれます。矢印の色や太さも調整可能で、矢印にテキストを追加することもできます。

Autoflowの使い方

15. WebサイトをFigmaに取り込むなら「html.to.design」

html.to.design

html.to.designは、指定したWebサイトのURLを入力すると、そのWebサイトをFigmaにインポートできるプラグインです。単にサイトが画像としてインポートされるのではなく、テキストはFigma上でもテキストとして認識され、ボタンやBOXなどはシェイプとして認識されます。サイトがFigmaのオブジェクトとして編集可能な形でインポートされるのが特徴です。

html.to.designの使い方

16. 傾きを表現したいなら「Skewdat」

Skewdat

Skewdatは、図形やテキストを斜めにするプラグインです。Skewdatを使用すれば、平行四辺形などのシェイプも簡単に作成できます。また、テキストに適用すれば、勢いや躍動感を演出することが可能です。

Skewdatの使い方

17. テキストでアーチを作るなら「Arc」

Arc

Arcは、テキストをアーチ状に変形するプラグインです。円周に沿ってテキストを配置したい場合などに便利なツールです。Arcを使用すると、テキストが1文字ずつに分割されます。

Arcの使い方

18. 波形を作るなら「Wave & Curve」

Wave & Curve

Wave & Curveは、簡単に波形のパスを作成できるプラグインです。振幅や波長などのパラメータを調整し、オリジナルの波線・波形を作成できます。

Wave & Curveの使い方

19. ノイズをつけるなら「Noise & Texture」

Noise & Texture

Noise & Textureは、ノイズテクスチャ画像を簡単に作成できるプラグインです。ノイズを構成する一つ一つの形状、サイズ、カラーなどを細かくカスタマイズできます。

Noise & Textureの使い方

20. ニューモフィズムを作るなら「Neumorphism」

Neumorphism

Neumorphismは、ワンクリックでニューモフィズムのエフェクトを作成できるプラグインです。シャドウの調整や、表面のパターンを4つの中から選択できます。作成後も、Figmaのエフェクト設定で調整が可能なので、オリジナルのニューモフィズムを簡単に作成できます。

Neumorphismの使い方

まとめ

Figmaのプラグインを活用することで、デザインの可能性が広がり、作業効率も向上します。今後もさまざまなプラグインが登場するはずなので、定期的に情報収集を行い、最新のプラグインを取り入れていくことをお勧めします。

簡単1分で資料をダウンロード

ご支援事例集

サービス説明資料
サービス説明資料

資料の概要

NOROSHIがこれまでご支援してきた企業様の事例を、支援内容やデザインアウトプットとともにご紹介しています。

この記事を書いた人

株式会社NOROSHI 編集部

株式会社NOROSHIが運営するデザインパートナー事業の編集部です。

NOROSHIとは?

open_in_new

NOROSHIの情報配信を見る

Recommend

おすすめの記事

Contact

ご相談・資料のダウンロードはこちらから

まずはフォームよりお気軽にご相談ください。支援プロセスや事例についてまとめたサービス資料もご用意しています。

おすすめの記事

ビジネス×デザインのお悩みならNOROSHIへ