2020年 FigmaおすすめプラグインランキングBest30

※ 本記事にはプロモーションが含まれています。

こんにちは！　ねこです。

今回は UI/UX デザインツールである Figma のプラグインのダウンロードランキングを一挙 30 位まで大公開します。

簡単な説明と使い方も記載しています。

それではスタート！

[sitecard subtitle=関連記事 url=/about-figma/ target=]

Figmaおすすめプラグインランキング Best 20

1 位 Unsplash

無料で利用できる画像素材サイトである Unsplash 。

100 万点以上の画像素材を商用・非商用問わずに利用できます。

使い方

Plugins -> Unsplash から開き、任意の画像を読み込めます。

シェイプやフレームを選択しながら画像を選ぶと、その中に画像が含まれます。

例えば、複数選択したシェイプ全てに、ランダムで写真を入れるということも可能ですので、カンプ制作ははかどると思います。

2 位 Iconify

およそ 5 万点以上のアイコンを Figma で利用可能になります。

ベクターデータですので、拡大しても画像が荒くなりません。

使い方

Plugins -> Iconify から開き、任意のアイコンセットからアイコンを選んで、Import ボタンを押せば、ページに読み込まれます。

3 位 Content Reel

デザイン制作時に必要な、サンプルってありますよね。

例えば、ユーザー表示時に必要な人物写真、名前、電話番号、住所、アイコン、ダミーテキストなど。

これらを、簡単に表示、使用できるプラグインです。

現在日本語には対応していません。

使い方

Plugins -> Content Reel から開き、該当のテキストレイヤー、イメージレイヤーを選択して、入れたい内容を選ぶだけです。

複数選択して、まとめて挿入することも可能です。

4 位 Material Design Icons

簡単に利用できる、デザインアイコンのライブラリです。

Iconify と比較して、シンプルな UI で探すことができます。

使い方

Plugins -> Material Design Icons から開き、任意のアイコンを選ぶと、画面に挿入されます。

5 位 Figmotion

Figma 内でアニメーションを制作することができるツールです。

使い方

任意のフレームを選択して、Plugins -> Figmotion -> Open Figmotion を開きます。

Figmotion ウインドウが開き、選択したレイヤーオブジェクトが左側に一覧で表示され、右側にタイムラインが表示されます。

オブジェクトを選択すると、プロパティが表示されますので、任意の時間にキーフレームをうち、値を変更することでアニメーションを行うことができます。

6 位 Lorem ipsum

デザイン制作時に必要なダミーテキストを挿入できます。

ちなみに、Content Reel があれば、同様のことができますが、こちらのメリットは、テキストフレームの大きさに合わせて、文字を挿入する機能があります。

使い方

Plugins -> Lorem ipsum から開き、該当のテキストフレームを選択して、Generate か Auto Generate で文字を挿入します。

7 位 Autoflow

任意のシェイプを接続する矢印を自動で生成してくれます。

使い方

Plugins -> Autoflow を開き、接続したい 2 つのシェイプオブジェクトを順番に選択します。

8 位 Charts

デザインサンプル用のグラフ・チャートを簡単に生成できます。

使い方

Plugins -> Charts を開き、Choose Chart Type から、チャートの形を選び、パラメータを設定して Add Chart を押せば、ページ上に生成されます。

9 位 Vectary 3D

3D のデザインモックを簡単に制作できます。

スマホ、ドリンク、シャツなどの様々なマテリアルサンプルに、自分で作ったデザインを貼ることができます。

こちら、VECTARY というブラウザ上で動く 3D モデリングツールと連動しているようで、自分で制作したものも、取り込んで利用できるようです。

使い方

Plugins -> Vectary 3D で開いて、Gallery からサンプルを選びます。

それから、表示させたいフレームを選び、右下の Use Frame を選びます。

モデルの向きを調整して、Save view as image を押すと、ページに表示されます。

YouTube にも、わかりやすい利用法がありますので、こちらもご覧ください。

10 位 Mapsicle

デザインのモック制作用のマップ画像を簡単に挿入します。

使い方

マップを入れるフレームやシェイプを追加し、Plugins -> Mapsicle -> Open Mapsicle を開きます。

そしてマップの表示方法をセットして、Update Map を選択すると、ページに反映されます。

個人的には、Map Maker のほうをおすすめします。

11 位 Image Palette

サンプルイメージから、そのイメージを構成しているカラーを抽出して、カラーパレットとして利用できるようにします。

使い方

イメージを選択して、Plugins -> Image Palette を選択すれば、イメージの下に 5 色のパレットが表示されます。

12 位 Stark

デザインが色盲・色弱の方に、どう見えるかを確認・チェックできるツールになります。

機能としては、以下のものになります。

• 色盲の方にデザインがどう見えるかのシミュレーション
• 2 つのレイヤーの色のコントラストが問題ないかチェック

使い方

Colorblind Simulation（色盲の方にデザインがどう見えるか）

Plugins -> Stark -> Colorblind Simulation を開きます。

画面下部の Colorblind Type から、どのように見えるかを確認します。

Check Contrast（コントラストが問題ないかチェック）

2 つのレイヤー（シェイプ・テキストなど）を選択し、Plugins -> Stark -> Check Contrast を開き、結果を確認します。

13 位 Avatars

選択した要素に、ランダムにアバター画像を入れてくれます。

Content Reel のほうが多くのサンプル（電話番号などのダミーテキスト）を扱えます。

使い方

アバターを入れたい要素を選択して（複数可）、Plugins -> Avatars を選択するだけです。

14 位 Feather Icons

Feather というオープンソースのアイコンを、簡単に挿入できます。

使い方

Plugins -> Feather Icons から開き、任意のアイコンを選択するだけです。

15 位 Chart

様々なグラフのサンプルを作成できます。

Charts と比べて、より細かな設定も行うことができますが、線グラフ以外は、Pro アカウント（有料）が必要です。

使い方

含めたいレイヤーを選択して、Plugins -> Chart -> Create Chart を開きます。

諸々の設定を行い、Create chart ボタンを押します。

16 位 Blobs

ランダムな形状のベクターデータを生成します。

使い方

Plugins -> Blobs を選択し、Make blobs ボタンを押せば、画面に生成されます。

17 位 Palette

選択したイメージなどから、おすすめのカラーパレットを AI で作り出してくれます。

使い方

イメージなどを選択（複数可）して、Plugins -> Palette を開きます。

表示されるカラーパレットで問題なければ、save で、ページに表示されます。

クリックで色の固定、ドラッグで色の移動、色の更新を行い、イメージにあったカラーパレットを制作してください。

18 位 Map Maker

Google Map と、MapBox から地図画像を挿入できます。

登録せずに使用できる、Google Map で日本語で表示できる、Map のスタイルデータを利用できるなどの利点があるため、Mapsicle より、個人的におすすめです。

使い方

表示させたいレイヤーを選択し、Plugins -> Map Maker を開きます。

場所や大きさなどを調整して、Make Map で地図を挿入します。

地図のデザインは、SNAZZY MAP などから、スタイルの Json ファイルをコピーすることで、変更可能です。

19 位 Isometric

レイヤーを簡単に上の画像のように、斜めの平行投影にしてくれます。

使い方

レイヤーを選んで、Plugins -> Isometric を選んで開きます。

角度を選んで、画面下部のボタンを押してください。

20 位 Arrow Auto

2 つの要素を簡単に矢印で繋いでくれます。画像の位置を変えても、Update で自動トラッキングをします。

使い方

Plugins -> Arrow Auto を選んでパネルを開きます。

そして、2 つの要素を選択して、Link ボタンを押してください。

21 位 Wireframe

350 種類以上のプロトタイピング用のデザインイメージ（ワイヤーフレーム）が利用できます。

使い方

Plugins -> Wireframe で開き、カテゴリからデザインを選ぶと、ページに挿入されます。

22 位 Google Sheets Sync

Google スプレッドシートの中身を Figma のデザインに同期させます。

使い方

Google スプレッドシートを制作して、上記の画像のように、1 行目は見出し（Title, SubTitle, Price など）を書き、以降は適用させたい内容を書きます。

そして、共有ボタンから、共有可能なリンクを取得を選び、リンクをコピーします。

Figma に移り、データを受け取れるように設定を行います。

例えば、Title 列を受け取りたい場合は、テキストレイヤーの名前を #Title とします。

設定後、Plugins -> Google Sheets Sync を選び、スプレッドシートの共有リンクを入れ、Sync ボタンを押せば、内容がページに適用されます。

23 位 Remove BG

背景を自動で切り抜いてくれるサービス removebg の Figma 用プラグインです。

有料サービスですが、Figma などでの API を介しての利用なら、無料で月 50 枚まで切り抜けるようです。

使い方

Plugins -> Remove BG -> Set API Key を選び、かかれてある URL と説明にそって、API キーを取得し、セットします。

そして、切り抜きたい画像を選び、Plugins -> Remove BG -> Run を選んでください。

24 位 A11y – Color Contrast Checker

選択したフレームのテキストの可読性（コントラスト）のチェックを行えます。

使い方

Plugins -> A11y – Color Contrast Checker から開きます。

そして、チェックしたいフレームを全て選んで Check ボタンを押してください。

25 位 Super Tidy

複数の項目などフレームの並び（高さや間隔）を綺麗にし、名前を一括でセットしてくれます。

使い方

並びを整えたいフレーム（複数）を選択し、Plugins -> Super Tidy -> Run all を開きます。

設定項目を確認して、Apply を押します。

26 位 Color Serch

様々なキーワードから、それにあったカラーを 5 つ表示され利用ができます。

使い方

Plugins -> Color Serch を選んで開きます。

キーワードを英語で入力すると、カラーがカラーパレットに、色が適用されます。

27 位 Humaaans for Figma

ベクターデータの人物イラストのライブラリを利用できます。

使い方

Plugins -> Humaaans for Figma から開き、使いたいデータを選択するとページに表示されます。

28 位 Image tracer

ビットマップの画像データをベクターデータに変換してくれます。

使い方

変換したい画像を選択し、Plugins -> Image tracer を開きます。

それぞれの項目の設定を行い、Place traced vector をクリックすると、ページにベクターデータが生成されます。

29 位 HTML to Figma

Web ページの URL から、サイトデータの HTML を解析してインポートします。

使い方

Plugins -> HTML to Figma から開き、インポートしたいサイトの URL を入れて、IMPORT ボタンを押します。

30 位 Clean Document

ページデータを一括で綺麗に調整してくれます。

処理可能な内容はこちらです。

• 非表示のレイヤーの削除
• 要素が一つしかないグループの解除
• 要素をピクセルパーフェクトにする
• レイヤーのリネーム・ソート
• ページをアルファベット順にソート

使い方

Plugins -> Clean Document -> Clean Layer を開き、必要なオプションにチェックを入れて実行します。

プラグインの追加の方法

該当プラグインページの左上の Install を押せば、すぐに利用可能になります。

最後に

シンプルな機能拡張が多いですが、何かと便利なプラグイン。

ぜひ活用して、あなたのデザインのクオリティアップにご活用ください！