【2023年度版】Figmaのおすすめプラグイン20選!プラグインのインストール方法から使い方まで解説
公開日:
更新日:
本記事では、Figmaのプラグインのインストール方法から使用方法、さらにおすすめのプラグイン20選を紹介します。デザインの効率化、テキストの加工、画像処理など、幅広い分野で活用できるものを厳選していますので、ぜひ参考にしてみてください。
- Figmaのプラグイン機能とは?
- Figmaのプラグインの入れ方と使い方
- プラグインの探し方
- プラグインのインストール方法
- おすすめのFigmaプラグイン20選
- 1. 高品質なフリー画像プラグイン「Unsplash」
- 2. イラストを探すなら「Blush」
- 3. アイコンを探すなら「Iconify」
- 4. PCやモバイルなどのモックアップ作成なら「Mockup」
- 5. 綺麗なグラデーションを作るなら「Uigradients」
- 6. 画像の背景を消すなら「Remove BG」
- 7. 画像サイズの大きい画像をアップするときは「Insert Big Image」
- 8. 画像を圧縮するなら「Downsize」
- 9. 画像をベクター化するなら「Image Tracer」
- 10. フォント選びには「Better Font Picker」
- 11. 日本語のフォント選びには「Japanese Font Picker」
- 12. シェイプを均等に作るなら「Split Shape」
- 13. ユニークなシェイプを出すなら「Blobs」
- 14. フローや画面遷移図を作るなら「Autoflow」
- 15. WebサイトをFigmaに取り込むなら「html.to.design」
- 16. 傾きを表現したいなら「Skewdat」
- 17. テキストでアーチを作るなら「Arc」
- 18. 波形を作るなら「Wave & Curve」
- 19. ノイズをつけるなら「Noise & Texture」
- 20. ニューモフィズムを作るなら「Neumorphism」
- まとめ
Figmaのプラグイン機能とは?
Figmaのプラグイン機能とは、Figmaの既存の機能を拡張し、Figmaの基本機能ではできない操作を可能にしたり、デザイン作業の効率を上げることができる機能です。
プラグインは、Figmaコミュニティや開発者によって作成され、多くの便利なプラグインが公開されています。ほとんどは無料で利用でき、プラグインの使用により作業効率が大幅に向上するため、Figmaを利用する際には必ずプラグインを活用しましょう。
Figmaのプラグインの入れ方と使い方
プラグインの探し方
プラグインを探す際は、Figmaのコミュニティで検索します。Figmaのホーム画面左上の地球のマークからコミュニティに移動し、「すべてのリソース」のプルダウンメニューから「プラグイン」を選択します。ここで無料・有料の絞り込み機能や、右端のソート機能を利用して、人気順や新着順でプラグインを探すことができます。

プラグインのインストール方法
方法1:コミュニティからインストールする方法
保存したいプラグインの「使ってみる」ボタンをクリックすると、エディタに移動します。次に、プラグインの3点メニューをクリックして「保存」を選択します。

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

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

おすすめのFigmaプラグイン20選
ここからは、Figmaのおすすめプラグイン20選を紹介します。それぞれの使い方も含めて紹介しています。ぜひ参考にしてください。
1. 高品質なフリー画像プラグイン「Unsplash」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Japanese Font Pickerは、上記のBetter Font Pickerの日本語版です。こちらもぜひ使用してみてください。
12. シェイプを均等に作るなら「Split Shape」

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

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

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

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

Autoflowは、フロー図や画面の遷移図を作成する際に便利なプラグインです。Figjamでもフロー図を作成できますが、Figmaのエディタ上で画面遷移などを視覚化したい場合には、このプラグインを使用すると便利です。
Shiftキーを押しながら、矢印で接続したいオブジェクトを選択するだけで矢印が描かれます。矢印の色や太さも調整可能で、矢印にテキストを追加することもできます。

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

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

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

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

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

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

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

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

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

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

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

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

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

簡単1分で資料をダウンロード
ご支援事例集


資料の概要
NOROSHIがこれまでご支援してきた企業様の事例を、支援内容やデザインアウトプットとともにご紹介しています。
この記事を書いた人
株式会社NOROSHI 編集部
株式会社NOROSHIが運営するデザインパートナー事業の編集部です。
NOROSHIとは?
NOROSHIの情報配信を見る






