Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選

101
187

ICS MEDIAでは「Figma」の機能紹介記事を多く公開しています。Figmaは標準でも十分な機能が備わっていますがプラグインを利用することでより便利にカスタマイズ可能です。

今回の記事では、プラグインの使い方とオススメのプラグインを紹介します。Figmaは他のデザインツールと比べ、プラグインを利用するまでのハードルが低く、とても使いやすくなっています。まだ使ったことがない人や便利なプラグインをもっと知りたいという方にオススメの記事です。

Figmaプラグインの使い方

Figmaのプラグインを見つけるにはFigmaコミュニティが便利です。Figmaアプリのホーム画面の「コミュニティ」ボタンから、Figmaコミュニティへアクセスしましょう。

ホーム画面のコミュニティボタン

プルダウンから「プラグイン」を選択すると、コミュニティに公開されているプラグインの検索が可能です。

Figmaコミュニティの検索画面

プラグインアイコンの右下のマークで、対応しているファイルが判別できます。「Figmaのみ」、「FigJamのみ」、「Figma + FigJam」対応の3種類があります。

Figmaファイルは通常のデザインファイルで、FigJamファイルはミーティングやワークショップなどに最適な機能を備えたオンラインホワイトボードです。

プラグインの対応マーク

プラグインの詳細画面から「試す」をクリックすると、下書きにファイルが作成されプラグインを試すことができます。気になるプラグインはすぐに試してみましょう。

プラグインを試す

次にFigmaコミュニティから、デザインファイルへ移動しましょう。プラグインはツールバーのリソースパネルから実行できます。

気に入ったプラグインが見つかったら、リソースパネルの詳細画面から「保存」をクリックしてみましょう。すると、「保存済み」一覧に保存されアクセスが容易になります。

プラグインを保存

この時、インストールによる待ち時間や再起動の必要がないことに気付くかと思います。Figmaはプラグインのインストールの必要がなく、気になったプラグインがあれば、リソースパネルからすぐに使うことができるのです。

最近使ったプラグインや保存したプラグインは、「クイック操作」から実行できます。+/ (macOS) / ctrl+/ (Windows)でウィンドウを呼び出して、実行したいプラグイン名を入力し、エンターキーを押下するとプラグインが実行できます。

クイック操作

ここからは筆者がよく使うプラグインやオススメのプラグインを紹介します。

1. Iconify

Iconify

IconifyはMaterial Design IconsやFontAwesome、Twitter EmojiなどのアイコンをFigmaに挿入できるプラグインです。

ジャンルとアイコンセットを選択し、使いたいアイコンをドラッグ&ドロップするだけで挿入ができます。ライブラリにはUIデザインによく使われるアイコンから、大手企業のロゴなども含まれます。このプラグインがあれば、アイコン周りで困ることはほぼないでしょう。

Iconifyの操作デモ

ライセンスについては各アイコンセットに依存しますので確認の上、利用してください。プラグイン上で確認することもできます。

Iconifyのライセンス記載箇所

2. Unsplash

Unsplash

Unsplashは商用利用が可能な画像をFigmaに挿入できるプラグインです。詳しいライセンスについては、Unsplashのライセンスページをご覧ください。

画像はオススメから選択する方法や任意のワードで検索する方法、ジャンルを選択してランダムに挿入する方法などがあります。プラグインに表示された画像をクリックするだけで、すぐに挿入することができます。

Unsplashのデモ

3. Remove BG

Remove BG

Remove BGは画像の背景を自動で検出し、削除してくれるプラグインです。利用にはRemove BGの公式サイトからアカウントを作成し、API keyを取得し設定する必要があります。

画像を選択し、プラグインを実行するだけで背景がシンプルなものであればかなりの精度で切り抜いてくれます。切り抜き後の画像は少し劣化が目立つ印象を受けるので、注意が必要です。

Remove BGのデモ

4. LottieFiles

LottieFiles

LottieFilesは、LottieアニメーションをライブラリからGIFアニメーションかSVG形式でのインポートができるプラグインです。利用には、「LottieFiles」でアカウント作成が必要です。

Lottieアニメーションを検索し、「Insert as SVG」か「Convert to GIF」をクリックするとFigmaに挿入できます。また、アニメーション内で使われている色を編集することもできます。

LottieアニメーションはFigmaでは動作しませんが、「Convert to GIF」でGifアニメーション形式で書き出すとプロトタイプで動作を確認可能です。

LottieFilesのデモ

5. Better Font Picker

Better Font Picker

Better Font Pickerは、英字対応フォントをプレビューしながら選択できるプラグインです。

プラグインを実行すると英字対応フォントが一覧で表示されます。テキストレイヤーを選択した上で、フォントをクリックするとそのフォントが適用されます。

Better Font Pickerのデモ

6. Japanese Font Picker

Japanese Font Picker

Japanese Font Pickerは、日本語対応フォントをプレビューしながら選択できるプラグインです。

前述のBetter Font Pickerと同じような動作をしますが、こちらは日本語対応フォントが一覧で表示されます。両方合わせて使うことをオススメします。

Better Font Pickerのデモ

7. Insert Big Image

Insert Big Image

Insert Big Imageは、大きな画像を元の解像度を保持したまま挿入できるプラグインです。

Figmaで4096px以上の大きな画像を挿入する際に、自動的に縮小されることを回避するプラグインです。ファイルが重くなってしまうので多用は危険ですが、メインビジュアルなどに大きな画像が必要な場合には便利です。

Insert Big Imageのデモ

8. Downsize

Downsize

Downsizeは、画像の圧縮やサイズ変更が行えるプラグインです。

画像の圧縮やPNG形式からJPG形式への変換が行えます。大きすぎる画像の容量を小さくし、メモリ使用量の削減が行えます。巨大なプロジェクトを開発している際など、Figmaの動作が重く感じた時は試してみると良いでしょう。

Downsizeのデモ

9. Blobs

Blobs

Blobsは、有機的なシェイプを生成してくれるプラグインです。

ペンツールで描画するのが難しいシェイプを、複雑さやポイント数をコントロールした上で生成できます。ベクターレイヤーとして出力されるため、再編集も可能です。デザイン上のあしらいなど、意外と活躍する場面の多いプラグインです。

Blobsのデモ

  • 利用はこちらから Blobs

10. Rename It

Rename It

Rename Itは、レイヤーやフレーム名の一括置換を行なってくれるプラグインです。

Figmaの基本機能にも置換機能はありますが、基本機能で置換できるのはテキストレイヤーのテキストに限られます。Rename Itを使うことで、フレームやコンポーネント名などを一括置換が可能です。また、単純な置換だけでなく、レイヤー名に連番を付けたり、縦幅や横幅といったデザインを元にした名前を付けることも可能です。

Rename Itのデモ

11. Batch Styler

Batch Styler

Batch Stylerは、テキストスタイルや色スタイルの一括置換を行なってくれるプラグインです。

基本機能ではテキストスタイルや色スタイルの変更は1つずつしか行えませんが、Batch Stylerを使うことで一括置換が行えます。デモでは「Roboto」と「Comic Sans」を設定しているテキストスタイルのフォントファミリーを「Noto Sans」に変更しています。

Batch Stylerのデモ

12. Color Styleguide

Color Styleguide

Color Styleguideは、色スタイルのガイドページを作成してくれるプラグインです。

色スタイルに登録した名前、HEX値、RGB値、HSL値、説明を一覧でまとめて表示してくれます。デザインデータをエンジニアに共有する際など、手動でガイドページを作る必要が無くなる便利なプラグインです。

Color Styleguideのデモ

13. Colors to Code

Colors to Code

Colors to Codeは、色スタイルをコードに一括変換してくれるプラグインです。

インスペクトタグからカラーコードを取得することはできますが、Colors to Codeを使うことで利用コードに合わせた形式で一括出力が行えます。デザインからカラートークンをコードに反映する作業がとても楽になる、エンジニア向けのプラグインです。

Colors to Codeのデモ

14. LilGrid

LilGrid

LilGridは、グリッド整列が簡単に行えるプラグインです。

Figmaの整列機能では、水平方向や垂直方向の均等配列が可能ですがそれらを同時に行うことでグリッド整列が行えます。それに加え、レイヤー名をアルファベット順に並べ直すソート機能も搭載しています。

LilGridのデモ

15. Stark

Stark

Starkは、アクセシビリティのチェックを行なってくれるプラグインです。利用には、「Stark」でアカウント作成が必要です。

無料版では主に、コントラストチェックとビジュアルシミュレーションが行えます。コントラストチェックは、WCAG 2.1に準じたテキストの可読性チェックを行います。ビジュアルシミュレーションは、色弱や色盲の方にデザインがどう見えるかをシミュレーションが行えます。

Starkのデモ

  • 利用はこちらから Stark

理想のプラグインがない時は

ここまで、オススメのプラグインを紹介してきました。しかし、Figmaコミュニティでいくら探しても自分が実現したいことができる、理想のプラグインがないと困っている方もいるかと思います。

Figmaプラグインは個人で作成することが可能です。Figma Plugin APIのドキュメントからプラグイン作成を始め、理想のプラグインを自作してみましょう。

今回、紹介したプラグインの中にも企業が開発したものではなく、個人ユーザーが作成したプラグインも数多くあります。理想のプラグインが完成したらFigmaコミュニティに公開してみましょう。他ユーザーの役に立つのはもちろん、感謝のコメントや不具合の報告などが受け取れるかもしれません。

ちなみに、ICSでもFigmaプラグインを公開していますので、ぜひ活用してください。

まとめ

プラグインの使い方から始め、オススメのプラグインを15個紹介しました。

Figmaのプラグインはインストールが必要なく、少し触って試すことがとても簡単です。気に入ったものがあれば、すぐに取り入れて作業を効率化していきましょう。

プラグインで実現していた動きがFigmaの標準機能になる例もありました。 プラグインで新機能の先取りができることもありますので、まだ触ったことがないという方はこれを機に使い始めてみてください。

編集部

ICS MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。

この担当の記事一覧