Figmaは、UI/UXデザインをする上で必要不可欠なツールとなってきました。Figmaはそれ自体も非常に便利なツールですが、プラグインを使うことで更に効率的な作業ができるようになります。
そこで今回は、毎日6~8時間ほどFigmaを使う筆者の目線から「Figmaのおすすめプラグイン」をカテゴリ別に紹介します。日々の作業を何倍もスムーズに、より快適にデザインを行えるよう、是非最後までご覧くださいね。
＜更新＞
2023年4月24日 アイコン素材系プラグインを2つ追加しました。
はじめに：Figmaプラグインの使い方
Figmaのプラグインは、Figmaコミュニティ上で検索するのがおすすめです。
具体的な検索方法は以下の通り。
- Figmaホーム画面左上の名前をクリック
- 「コミュニティ」を選択
- プルダウンで「プラグイン」を選択して絞り込み
- 画面上部の検索ボックスでプラグイン名を検索
- 「プラグイン」タブに表示されたプラグインの右側『試す』ボタンをクリック
- 画面が切り替わり、プラグインが実行される
一度実行すれば、次回以降は画面右クリックですぐにプラグインが実行できるようになります。
- Figmaのデザインファイル上で「右クリック」
- プラグイン > 最近使ったプラグインから選択
- プラグインが見つからないときは「保存済みプラグイン」から探す
それでは、次の章からはカテゴリー別に「Figmaのおすすめプラグイン」をご紹介していきます。
モックアップ生成プラグイン
Figmaのおすすめ「モックアップ生成プラグイン」は、以下の通りです。
Artboard Studio Mockups：スマホやPCのモックアップ
Artboard Studio Mockupsでは、背景無しのシンプルなモックアップを簡単に作成できます。
>> Artboard Studio Mockupsの利用はこちら
素材系プラグイン（画像・アイコン・イラストなど）
フリー画像系プラグイン
Unsplash: 商用利用可能な画像が挿入できる
Unsplashは、商用利用が可能な画像を、Figma上で探して挿入できるプラグインです。
- おすすめ一覧から選択
- キーワード検索
- ジャンルを選択してランダム挿入
など、検索方法も豊富なので、パッと画像を挿入したいときはUnsplashがピッタリです。
アイコン素材系プラグイン
Iconify: 全て無料なので探しやすい
Iconifyは、Material Design IconsやFontAwesomeなど、複数のサイトのアイコンをまとめて検索、Figmaに挿入できるプラグインです。
ジャンルで検索、アイコンセットで検索、キーワード（英語のみ）で検索など、自由度高く検索できます。
シンプルなアイコンであれば、Iconifyだけで十分使えるレベルです。
Material Design Icons: 35,000以上のPNG/SVGアイコンが使える神プラグイン
「Material Design Icons」は、GoogleとIcons8というサイトが提供している35,000以上のアイコンが使えるアイコン素材プラグインの決定版です。
無料でじゅうぶん使えるプラグインで、シンプルなアイコンを探すときはMaterial Design Icons」を使っておけば間違いありません。
>> プラグイン「Material Design Icons」の利用はこちら
Font Awesome Icons: 無地のアイコンを探すのにおすすめ
Font Awesome Iconsは、無地のアイコンを探すのにおすすめのアイコン素材系プラグイン。
アイコン素材サイトとして有名な「Font Awesome」に掲載されているアイコンがすぐに使えます。
>> プラグイン「Font Awesome Icons」の利用はこちら
Iconscout: 一部有料だがクオリティー高めのアイコン素材
Iconscoutは、アイコン・イラスト・3DグラフィックなどがFigma上で使えるプラグインです。
一部有料の素材もありますが、先述したIconifyに比べてデザイン性が高いアイコンを使いたい方にはおすすめです。
イラスト素材系プラグイン
フォント系プラグイン
Better Font Picker: 英字フォントをプレビューしながら選べる
Better Font Pickerは、英字フォントをFigma上でプレビューしながら選べるプラグインです。
Figmaではフォント選択時のプレビュー機能がありませんが、このプラグインを実行すると、英字対応フォントが一覧表示され、選択したテキストをプレビューしながらフォントが選べます。
地味なようで、作業効率化につながりやすいプラグインです。
>> プラグイン「Better Font Picker」の利用はこちら
Japanese Font Picker: 日本語フォントをプレビューしながら選べる
Japanese Font Pickerは、上記Better Font Pickerの日本語版のイメージ。対応フォントは随時追加されているようです。
用途にあわせて、Better Font PickerとJapanese Font Pickerを使い分けるのがおすすめです。
Japanese Font Pickerの使い方は、以下の記事で詳しく解説しています。
『デザインツールFigmaで日本語フォントを効率よく探したい！』本記事は、Figmaでの日本語フォント選びに悩むあなたにおすすめの神プラグイン「Japanese Font Picker」についてご紹介します。7Ja[…]
アニメーション系プラグイン
LottieFiles: FigmaにLottieアニメーションを挿入できる
LottieFilesは、Lottieアニメーションと呼ばれるGIFまたはSVG形式のアニメーションが挿入できるプラグインです。利用するためには「LottieFiles」のアカウント登録が必要です。
Figma上でアニメーションは動作しませんが、GIF形式で書き出すことで動作を確認できます。
>> プラグイン「LottieFiles」の利用はこちらから
カラー系プラグイン
色選びがはかどるプラグイン
Image Palette: 選択した画像からカラーパレットを生成
Image Palleteは、選択した画像からカラーパレットを即座に生成してくれるプラグインです。
写真をベースにして配色を考える際には、このプラグインが非常に便利です。
>> プラグイン「Image Pallete」の利用はこちらから
グラデーション生成系
uiGradients: オシャレなグラデーション生成
uiGradientsは、350種類以上のグラデーションテンプレートがFigma上ですぐに使えるプラグインです。
色を塗りたいレイヤー・シェイプを選択し、プラグインを実行するだけでOK。
おしゃれなグラデーションは、自分で作るよりプラグインに任せたほうがいい派です。
>> プラグイン「uiGradients」の利用はこちらから
プレゼンテーション系プラグイン
作業効率化プラグイン
グラフ・データ生成系プラグイン
画像処理、トリミング系プラグイン
Remove BG: 背景を一瞬で削除できる
Remove BGは、画像の背景を自動で削除してくれるプラグインです。利用するためにはRemove BGのアカウント作成が必要ですが、無料ですぐに登録できるので、ぜひ活用してください。
Remove BGの使い方をまとめた記事も用意しているので、使い方は以下の記事をご参照くださいね。
>> プラグイン「Remove BG」の使い方を解説した記事はこちら
Image Tracer: 画像をベクターに変換
Image Tracerは、画像からベクターデータを自動作成してくれるプラグインです。
RemoveBGと違い、ベクターデータとしてパスを触れるようになるので、ロゴ関連の仕事でお世話になることが多いです。
>> プラグイン「Image Tracer」の使い方はこちら
Insert Big Image: 大きな画像を元の解像度のまま使える
Insert Big Imageは、サイズの大きな画像を元の解像度のまま使えるプラグインです。
Figmaに4096px以上の画像を挿入すると、自動で画像が圧縮され、ぼやけた画像になってしまいます。そんなときにInsert Big Imageを使えば、画質を保持したままFigmaに挿入できます。
Insert Big Imageの詳しい使い方は、以下の解説記事をご参照ください。
Downsize: 画像の圧縮やサイズ変更ができる
Downsizeは、画像の圧縮やサイズ変更、PNG→JPG形式への変換ができるプラグインです。
Figma上で画像をたくさん使う場合や、大きすぎる画像を圧縮したいときなど、様々なシーンで時短できるようになるので、ぜひ活用していただきたいプラグインです。
Ando: ぼやけた画像をブラッシュアップできる
AndoはAI自動生成系のプラグインですが、ぼやけた画像をブラッシュアップするプラグインとしても便利です。
画質が荒い画像をどうにかして高画質にしたいときは、Andoを使ってみてください。
詳しい使い方は、以下のページを参考にしてくださいね。
フレーム・レイヤー・シェイプに関するプラグイン
Rename It: レイヤーやフレームの名前を一括置換
Rename Itは、レイヤーやフレームの名前を一括置換してくれるプラグインです。Figmaの基本機能では、テキストレイヤーの名前しか変換できませんが、Rename Itは、様々な条件で名前を一括置換できます。
Split Shape: シェイプやレイヤーを縦横均等に切り分け
Split Shapeは、シェイプやフレームを縦横均等に切り分けてくれるプラグインです。
例えば、縦4列、横3行のテーブルをつくるとき、Split Shapeを使えば一瞬でテーブルが作成できます。
要素間の余白なども指定できるので、自由度高く切り分けが行えます。
Blobs: ふにゃふにゃのシェイプを生成
Blobsは、ふにゃふにゃの有機的デザインシェイプを生成してくれるプラグインです。
Figmaのペンツールに抵抗がある方も多いかと思いますが、Blobsを使えば、一瞬でふにゃふにゃシェイプが生成できます。
シェイプの複雑さやふにゃふにゃレベルを自分で調整でき、わたしもよく使っています。
その他便利な効率化プラグイン
Style Organizer：カラーやテキストのスタイルを整理できる
Style Organizerは、カラーやテキストなどのスタイルを整理できるプラグインです。
「Color」と「Text」のタブがあり、それぞれのスタイルを一覧表示して整理できるので、デザインに一貫性を持たせたい方にはおすすめです。
ダミー画像、ダミーテキスト系プラグイン
ダミー画像系プラグイン
ダミーテキスト系プラグイン
Content Reel: ダミーコンテンツを生成（テキスト、アバター、アイコン）
Content Reelは「テキスト、アバター、アイコン」のダミーコンテンツを自動生成してくれるプラグインです。
その他・未分類
まとめ：Figmaの効率化にはプラグインが必須
今回は、Figmaで本当に使えるプラグインをカテゴリ別にご紹介しました。Figmaを使った日々のデザイン作業を効率化していくには、プラグインの活用が必須レベルです。
本当に簡単に使えるものばかりなので、ぜひ一つずつ試してみてくださいね。
Figmaのスキルアップにおすすめの方法
最後に、Figmaのスキルアップにおすすめの方法をいくつかご紹介しておきます。
方法①：まずはUdemyのオンライン講座を活用
Udemyとは、様々な分野の講座をオンラインで学べるプラットフォームです。
毎月のように割引セールが開催されるので、2000円以内で高品質な講座を受けれます。会員登録は無料で、登録後すぐにセールが開催されるため、ぜひ一度チェックしてみてくださいね。
方法②：副業、フリーランスを目指すならオンラインスクール
デザインを副業にしたい、フリーランスデザイナーになりたいという方には、オンラインスクールもおすすめです。
高いと思われがちなデザインスクールですが、オンラインスクールなど、数万円から始められるものも増えてきました。
ここでは、ジャンル別におすすめのスクールを3つだけご紹介します。
女性におすすめ：SHElikes（シーライクス）
女性だけが参加できるデザインスクール「SHElikes（シーライクス）」は、20～30代の女性におすすめ。
TwitterなどのSNSでも良い口コミが多く、スクール選びで失敗したくない方はSHElikesを選べば間違いなさそうです。
- 未経験から仕事を受けられるようになるレベルのレッスン提供
- モチベーション維持しやすいコーチングやサポート
- コミュニティが活発なので、仲間と切磋琢磨しながらスキルアップできる
- 学習以外にも外部講師やインフルエンサーを招いた特別イベントを開催
- 季節・期間限定キャンペーン随時実施中
- スキルを身につけた方には仕事紹介のサポートもある
高コスパ＆完全オンラインを選ぶなら：デイトラ
次に紹介する「デイトラ」は、実は私自身も受講していたオンラインデザインスクールです。
なんといってもコスパの良さと、Figmaで全ての授業が進められる点がいいですね。
もし心配な方は無料でご相談に乗るので、お問い合わせまたはわたしのTwitterまでDMをお送りください。
- フリーランス/副業を意識したハイレベルなカリキュラム
- 受講生による好意的な口コミ
- 教室を持たないことで実現した圧倒的なコスパ
- 年間受講者数8,000人超の国内最大規模という安心感
未経験からの転職を目指す方におすすめ：ワンダフルクラス
講師陣が全員現役フリーランスエンジニアであり、教育実績も豊富な「ワンダフルクラス」では、低価格なのに就職・面接サポートがかなり充実しています。
ワンダフルクラスがIT業界への独自のパイプを持っているため、面接対策から就職サポートも可能で、未経験からの就職にはもってこいのオンラインスクールかと思います。