ブラウザ上でサクッとデザインを作成したり共同作業をしたい時に便利なFigma（フィグマ）。

そんなFigmaでは便利なプラグインを入れることで、あらゆる作業がさらに爆速・快適にできてしまうんです！

今回はWebデザイナー目線で、実際に使って本当に良かったおすすめのプラグインだけを用途別にピックアップしてみました。

使い方が簡単なものを中心にセレクトしているので、Figma初心者の方もぜひ参考にしていただけると嬉しいです。

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

Figmaにはデザイン制作に役立つプラグインが豊富に登録されており、その多くは無料で利用が可能で、検索もインストールも簡単。

まずは簡単に、プラグインの入れ方と使い方をおさらいしましょう。

プラグインの入れ方①エディタ内から直接インストール

インストールしたいFigmaのプラグインがすでに決まっている場合は、エディタ内からの直接インストールをおすすめします。

もしくは、画面内のFigmaアイコンをクリックし、出てきたメニュー内で「プラグイン→プラグインを管理」を選択しても検索ボックスにアクセスが可能です。

プラグインの入れ方②Figmaコミュニティからもインストール可

使用したいプラグインが決まっていない場合やFigmaを起動していない場合は、Figmaコミュニティからのインストールもできます。

また、Figmaコミュニティではカテゴリ別におすすめのプラグインが紹介されているので、新たに便利なプラグインを見つけたい時にも最適です。

Figmaプラグインの使い方

Figmaのプラグインの使い方は、使いたいプラグインを選んで起動するだけ。

プラグインによって起動した瞬間に反映されるものもあれば、表示されたプラグインパネルから操作するもの、またインストールすれば自動で適用されるものなどがあります。

Figmaのおすすめプラグイン【素材編】

デザインの品質や仕上がりを大きく左右する素材選び。

でも制作中に毎回素材サイトを開き、使いたい素材を保存してツール上にアップロードを繰り返すのは地味に面倒ですよね……

ですが、Figmaには人気のフリー素材サイトのプラグインが登録されているため、プラグイン上から直接素材を検索して使用することが可能なんです！

プラグインを導入して、豊富で高品質な素材を手軽に使用してみましょう。

１．高品質でおしゃれなフリー写真素材サイト「Unsplash」

最初に紹介するのは、フリー写真素材サイト「Unsplash」のプラグインです。

プロクラスの高品質な写真素材が豊富かつ無料で使えることから、世界中の多くのデザイナーに愛用されています。

「Unsplash」のプラグインを使用すればFigma内で検索からデザインへの挿入までを完結できるため、手間なくサクサク使うことができます。

２．種類豊富な写真やイラスト素材を検索「PixaBay」

こちらの「PixaBay」も高品質で人気のフリー素材サイト。

写真だけでなくイラスト素材も含まれており、写真素材も「Unsplash」とは異なる雰囲気のものが多数登録されています。

どちらもFigmaにインストールしておき、デザインの用途や雰囲気によっての使い分けがおすすめです。

３．10万個以上のアイコン素材を無料で利用可「Iconify」

Figmaでアイコン素材を使用したい場合は「Iconify」がおすすめです。

マテリアルデザインアイコンやFontAwesome、Twitter絵文字など20万個を超えるアイコンをベクター形式で導入可能。

同じテーマで異なる形のアイコンが豊富に登録されているため、検索やカテゴリーで種類を絞って好きなデザインを選ぶことができます。

４．Googleが提供するシンプルなアイコン素材「Material Design Icons」

「Material Design Icons」はGoogleやIcons8が提供する人気のアイコン素材セットです。

アウトライン、塗りつぶし、シャープ、丸み、ツートンなどの形状が選択でき、スタイル、サイズ、色の変更などのカスタマイズも可能。

定番のアイコンが一覧でシンプルにまとめられているため、使いたいアイコンが決まっている時はこちらの「Material Design Icons」がおすすめです。

５．プロ仕様のイラストを手軽に利用「Blush」

世界中のアーティストが作成したカスタマイズ可能なイラスト素材を使用できる「Blush」。

プラグインをインストールすることで、ユニークで高品質なイラストをFigma内で手軽に使用できます。

アーティストやカテゴリごとに様々なイラストが検索できるため、お気に入りのものを見つけてみてください。

Figmaのおすすめプラグイン【デザイン編】

続いて紹介するのは、デザイン制作に役立つFigmaプラグインです。

グラデーションやアーチ型テキスト、おしゃれな流形シェイプなど……

ひとつひとつ作成すれば時間やセンスが必要な美しいデザインも、プラグインを導入することで誰でも簡単に作り上げることができます。

６．美しいグラデーションを簡単に作成「Uigradients」

「uiGradient」は美しいグラデーションを自動で生成してくれるプラグインです。

オブジェクトを選択した状態でプラグインを起動すると、様々なグラデーションのパレットが表示されます。

好きなグラデーションを選ぶことでオブジェクトに反映され、カラーの調整やカスタマイズも可能です。

７．テキストをアーチ型に変形「Arc」

ツールによってはパスを作成したり文字をばらしたり、面倒な操作が必要になるアーチ型のテキスト。

「Arc」のプラグインを使用すれば、とても簡単にアーチ型のテキストを作成できます。

テキストを選択しプラグインを起動するだけで、パネル上で直感的に綺麗なアーチ型への変形が可能です。

８．ユニークな変形シェイプを生成「Blobs」

「Blobs」のプラグインを使えば、ワンクリックでランダムな流体シェイプを作成できます。

シェイプはベクターとして出力されるので、拡大・縮小やカスタマイズも自在です。

９．画像からカラーパレットを自動作成「Image Palette」

写真やイラストからカラーパレットを自動生成してくれるのが、この「Image Palette」です。

アートボードに画像を追加し、「Image Palette」のプラグインを起動すれば一瞬でカラーパレットが生成されます。

写真のカラーをデザインに取り入れたい場合、参考にしたい画像がある場合など非常に便利なツールです。

10．画像をベクター化しカスタマイズ「Image Tracer」

画像を簡単にベクターレイヤーに変換してくれるプラグインが、こちらの「Image Tracer」です。

ベクター化することで拡大・縮小や色の変更などのカスタマイズが可能になるため、特にアイコンやロゴ画像の使用時には非常に役立ちます。

自動生成の他、オプション設定から詳細な調整も可能です。

11．様々なワイヤーフレームパーツが選べる「WireFrame」

「Wireframe」のプラグインでは、様々なデバイスのワイヤーフレームのテンプレートが使用できます。

プラグインを起動し、使いたい形のテンプレートをドラッグ＆ドロップすれば、Figma上にワイヤーフレームが表示されます。

実際に使えるデザインが豊富なため、Webデザイン時に活用すれば圧倒的な時短に繋がります。

Figmaのおすすめプラグイン【作業効率化編】

デザイン制作の現場は時間との戦いです。

そのため、作業効率化のために必ず入れておきたいおすすめのFigmaプラグインを紹介します。

12．画像の背景を自動で消去「Icons8 Background Remover」

せっかくFigmaを使っているのに、使用する画像の背景を切り抜くために他のツールを起動して書き出しというのは面倒ですよね。

そこで役立つのが、AIが画像の背景を自動的に切り抜いて消去してくれるプラグイン「Icons8 Background Remover」

単体画像はもちろん、複数画像の一括での切り抜きも可能。

「Icons8 Background Remover」のプラグインさえあれば、面倒な画像の切り抜き作業もFigma上で完結できるため非常に便利です。

13．フォントを選択しやすくする「Better Font Picker」

デザイン制作時、地味に時間を取られがちなのがフォント選びの作業。

特に初期状態のFigmaではフォント一覧が全て同じフォントで表示されてしまうため、デザインに適したフォントを選ぶのに苦労してしまうという欠点があります。

「Better Font Picker」のプラグインを使えば、フォント一覧にそれぞれのフォントが反映されて表示されるため、フォント選びがとてもスムーズになります。

14．日本語フォントを選択しやすくする「Japanese Font Picker」

先ほど紹介した「Better Font Picker」では日本語フォントを検索することはできません。

日本語フォントを使用する場合は「Japanese Font Picker」がおすすめです。

Figmaは日本語フォントも英語表記になっていて探しづらいのですが、「Japanese Font Picker」のプラグインを使用すれば日本語フォントも非常に使いやすくなります。

15．ダミーテキストや画像を生成「Content Reel」

「Content Reel」は、デザイン上にダミーのテキストや画像を自動で追加してくれるプラグインです。

仮テキストや仮画像を入れたい箇所を選択し、プラグインのパネルから入れたい内容を選択すればダミーが追加されます。

ダミーは高品質でスタイリッシュなものが揃えられているため、時短になるだけでなくサンプル自体の品質を上げることにも役立ちます。

16．オブジェクトを一括で均等に分割「Split Shape」

等間隔に並んだ同サイズのオブジェクトを作成したい時、とても便利なプラグインがこちらの「Split Shape」です。

分割したいオブジェクトを選択した状態でプラグインを起動し、分割する列数や行数を入力。

そのまま実行すれば、設定した内容で瞬時にオブジェクトを分割してくれます。

分割数のほかマージンや間隔などの設定も簡単にできるため、必ず入れておきたいプラグインのひとつです。

17．アイコンのサイズを一括でリサイズ「Icon Resizer」

序盤で紹介したIconifyなどのプラグインや手持ちのアイコン素材を使用した場合、バラバラに挿入されたアイコンのサイズを揃える作業が必要になります。

そんなアイコン素材のサイズを一括で揃えてくれる便利なプラグインが、この「Icon Resizer」です。

変更するサイズはpxで設定ができるため、デザインの変更時にも大変役立ちます。

Figmaのおすすめプラグイン【その他編】

ここでは、用途によってはあると非常に便利なプラグインを選びました。

Figmaのプラグインは細かいニーズにあったものも数多く存在するため、状況によって使えそうなものをリサーチして用意しておくのがおすすめです。

18．サイズの大きい画像をそのままの画質でインポート「Insert Big Image」

Figmaでは長辺が4096pxより大きい画像は自動で圧縮されてしまいます。

しかしこの「Insert Big Image」のプラグインがあれば、4096px以上の画像も解像度やサイズを維持したままFigma内に取り込むことが可能です。

大きな画像を使用しても画質を劣化させたくない場合などは導入をおすすめします。

19．要素間のサイズを測定し表示「Measure」

「Measure」はオブジェクトのサイズや間隔を測定し表示してくれるプラグインです。

値の表示／非表示はプラグインのパネルから細かく設定が可能で、複数のオブジェクトを一括で測定することも可能です。

デザインに関する情報を視覚化したり、コーディング用に共有する際にとても便利です。

Figmaのおすすめプラグイン【おまけ編】

最後に、デザイン作業に直接に役立つものではありませんが、お気に入りのFigmaプラグインを紹介します。

20．デザインにランダムな猫が現れる「Hidden Kittens」

最後に紹介するのは、デザイン上にランダムな猫を表示できる「Hidden Kittens」です。

プラグインを起動するたびにFigmaの画面上に様々なかわいい猫が現れます。

癒し効果は抜群ですが、使いすぎには注意しましょう。