超便利なおすすめFigmaプラグイン19選【UXデザイナーが厳選！】

Figmaは、Adobe XDやSketchなどに引けを取らない、優秀なデザインツールです。そのままでも便利なFigmaですが、プラグインを使えばさらに機能が充実します。

今回は、UXデザイナーである筆者が選んだ、おすすめのFigmaのプラグイン19選をご紹介します。

コンテンツ生成に関するFigmaプラグイン

1. Unsplash

▲出典：Unsplash

使いやすい検索機能を搭載した、ストックフォトのライブラリ。

写真コンテンツを簡単にFigmaに追加できます。

Unsplash

2. Icons8 Icons

▲出典：Icons8 Icons

Figmaでアイコンを扱うなら、このプラグインがおすすめ。38種類のスタイルに分類される、19万点のアイコンを自由に活用できます。

アイコンはすべて手作りで、形式はPNGとSVG。ピクセルサイズも完璧です。

Icons8 Icons

3. Streamline Icons

▲出典：Streamline Icons

3万点以上のアイコンを提供しているプラグインです。

アイコンはすべて、線の太さを3段階から選べます。

Streamline Icons

4. User Profile

▲出典：User Profile

プロトタイプデザインで役に立つ、ユーザープロフィール用の写真を提供しています。

User Profile

5. Content Reel

▲出典：UX Planet

Figmaで写真や文章をたくさん使うデザインを構築するなら、Content Reelを使ってみましょう。

テキストライブラリにはビジネス、健康、テクノロジーなどのジャンル別に文章、フレーズ、引用文などが、画像ライブラリにもジャンル別にストックフォト、グラフィック、アイコンなどのハイクオリティな画像が保存されています。

Content Reel

6. Easometric

▲出典：UX Planet

アイソメトリックなグラフィックを活用することが多いなら、Easometricプラグインが役に立つはずです。

アイソメトリックなイラストの制作には知識が必要ですが、プラグインを使えばFigma内で2Dのアイデアを簡単にアイソメトリックに変換できます。

Easometric

7. Typescales

▲出典：UX Planet

Figmaを使ったプロジェクトでプロポーショナルなフォントスケールを活用したいなら、Typescalesプラグインが役に立ちます。

基本のテキストサイズを設定し、さまざまなスケールファクターを選択することで、レスポンシブレイアウトのプロトタイプを簡単に構築できます。

Typescales

グラフィック・レイアウトに関するFigmaプラグイン

8. Color Kit

▲出典：Color Kit

色のシェードを作るためのプラグインです。緑色だけでも45種類用意されており、自身のイメージに近い色を探す用途でも役立ちます。

プロジェクトのUIキットを作る際にも活躍するはずです。

Color Kit

9. Image Palette

▲出典：Image Palette

アップロードした画像をもとに、カラーパレットを作成してくれます。

Image Palette

10. Content Buddy

▲出典：Content Buddy

複数のレイアウトで、同じテキストを一度に置き換える必要がある場合、このプラグインを使って時短しましょう。

各レイアウトを個別に開くことなく、最大50種類のレイアウトを自動で変更できます。

Content Buddy

11. Remove BG

▲出典：Remove BG

写真の背景を簡単に消し、オブジェクトを切り抜ける便利なプラグインです。

Remove BG

12. Icons8 Background Remover

▲出典：UX Planet

Icons8 Background Removerは、写真の背景を切り抜いてくれるプラグイン。AIが背景を認識し、Figma内で自動的に背景を切り抜きます。

Icons8 Background Remover

13. Mockup

▲出典：UX Planet

Figmaでモックアップを作りたいなら、Mockupプラグインを活用しましょう。

モックアップはクライアントへのプレゼンや作品のプロモーションなど、デザインが実際にはどのように見えるのかを表現したい際にぴったりです。

Mockup

14. Contrast

▲出典：UX Planet

視覚障害者を含むすべてのユーザーのアクセシビリティを重視するなら、Contrastプラグインがおすすめです。アクセシビリティに関する懸念を払拭し、レイヤーのコントラストを簡単に評価できます。

Contrast

15. Breakpoints

▲出典：UX Planet

このプラグインを使えば、さまざまな画面サイズやデバイス向けにFigmaでデザインを制作できます。PC、タブレット、スマートフォンなどのバリエーションが提供されているため、あらゆるデバイスでのデザインが確認できます。

Breakpoints

プロジェクト管理に関するFigmaプラグイン

16. Autoflow

▲出典：Autoflow

オブジェクトやアートボード間を接続する矢印を2クリックで作成できます。

スクリーンやオブジェクト間のリンクを表現したり、ページやコンポーネント間の遷移をビジュアライズしたりするのにぴったりです。

Autoflow

17. Google Sheets Sync

▲出典：Google Sheets Sync

Googleスプレッドシートのデータを、Figmaと連携して自動挿入できるプラグインです。

たとえば、表形式のデータをプレゼンテーションやレポートにして、クライアントにPDFで渡すことができます。

Google Sheets Sync

18. Notepad

▲出典：Notepad

Figma上でもメモを取りたい人におすすめ。

このプラグインを使えば、Figmaにメモ帳を導入できます。

Notepad

19. Design System Organized

▲出典：Design System Organized

コンポーネントを整理するためのプラグイン。

コンポーネントをグループ化・グループ解除したり、自分のライブラリ内でコンポーネントを移動したりできます。

Design System Organized

プラグインでFimgaをもっと便利に

Figmaのプラグインは、かゆいところに手がとどく存在です。プラグインを上手に活用して、Figmaでの作業を賢く効率化しましょう。

（執筆：DΞNYS SΞRGUSHKIN　翻訳：Asuka Nakajima　編集：泉　提供元：UX Planet）