2022年、Figmaで特にお勧めしたいプラグインのまとめ
Post on:2022年2月16日
sponsors
Figmaにはプラグインがたくさんあります、その中から特に便利なプラグインを紹介します。WebサイトやスマホアプリのUIを作成するワークフローに役立つ便利なプラグインばかりです。
20 Awesome Figma Plugins to improve your Workflow
by Marc Andrew
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
私はここ数年の間、Figmaの多くのプラグインを実際に試し、定期的に使用してきました。Figmaコミュニティで提供されるプラグインは改善され続け、その勢いは衰える気配がありません。
私がこれまでに使用してきたプラグインの中で、特にお勧めできる20個のプラグインと、現在も更新されているプラグインをまとめるのに良い時期だと思いました。この記事では、「このプラグインはもう動作しません！」という文言はありません。
本当に価値のあるFigmaプラグインを探す必要は、なくなります。
特にお勧めしたいFigmaのプラグイン
Lottieは、オープンソースのアニメーションの有力なリソースになりました。その小さなファイルサイズとクロスプラットフォームの機能を見れば、その理由は簡単にわかります。そして、FigmaでLottieを利用できるようになったことで、デザイナーやデベロッパーにとってさらに良い状況になります。
このプラグインを使用すると、何千もの無料のLottieアニメーションのライブラリにアクセスでき、ドラッグアンドドロップで自分の.lottieファイルを追加したり、プレビューされたすべてのアニメーションに簡単にアクセスできます。
このプラグインを使用すると、アニメーションで困ることはなくなります。
Design System Organiserは、Figmaで大規模なデザインシステムを扱う人にとって必須のアイテムです。Figmaに不足している、スタイルやコンポーネントを素早く一括管理することができます。
このプラグインの機能セットは素晴らしく、あらゆるデザインシステムを扱うときに大いに役立ちます。
アクセシビリティは「あったらいいな」ではなく、今日では「必須」です。Contrastプラグインを使用すると、作業中にデザインのカラーのコントラスト比を簡単にチェックできるので、現在取り組んでいるプロジェクトがWCAGに準拠しているかどうかを確認できます。
このプラグインは非常に便利で、ページ全体をスキャンして、テキストベースのコントラストの問題をすべてレポートにまとめ、修正することもできます。
「あると便利な」プラグインではなく、ワークフローに「不可欠な」プラグインです。
画像を直接圧縮したいと思ったことはありませんか？
Downsizeを使用すると、それが可能になります。Sketchなどと比較すると、多くの画像を含むFigmaのファイルサイズはかなり小さくなっていますが、このプラグインを使えば、さらに改善されます。
圧縮は満足するまでさまざまなレベルを試すことができ、必要に応じて、大きなPNGをJPEGに変換することもできます。素晴らしいですね。これはチェックする価値のある素晴らしいプラグインです。
Blushは、Pablo Stanleyと一流のイラストレーターによって作成された素晴らしいFigmaプラグインです。私はこれまで、UIのためのイラストを探すのに苦労してきました。優れたイラストは数が少なく、Web上に広く分散しています。本当に素晴らしいイラストを見つけるのはとても大変なことです。しかし、それはBlushが登場するまででした。
今では、FigmaでBlushプラグインを使用し、膨大な数のアーティストやコレクションから選択し、自分の好みに合わせてイラストをカスタマイズして、プロジェクトに直接ドロップすることができるようになりました。
Blushのイラストを試してみてください。あなたのデザインは、きっとあなたに感謝するでしょう。
Unsplashプラグインはシンプルで実用的、不必要な飾りはありません。
もう手作業で写真をダウンロードしてFigmaに挿入する必要はありません。はい、私は過去に手作業でやっていました。
Figma内でUnsplashの完全な画像ライブラリにアクセスできるのは信じられないことで、プロジェクトに理想的な画像を追加する際の時間は大幅に節約されます。
Rename Itはたくさんのレイヤーやフレームの名前を変更するという面倒な作業を自動化することで、時間を大幅に節約できます。
大規模なデザインシステムで作業していて、最後の最後にコンポーネントの名前を変更することになったとき、そのコンポーネントが古い名前で複数の場所で使用されていることに気付いたとき、Rename Itはその真価を発揮します。Rename Itでは問題ありません。以前の名前で使われていたコンポーネントを探して、一度更新すればいいのです。それだけで完了です。
Rename Itはとても時間の節約になるプラグインで、私も頻繁に使用しています。
新しいプロジェクトを開始して、複数の場所でフォントをRobotoからInterに切り替えたいとします。これをFigmaで素早く実現することは可能でしょうか？
答えは、ノーです。Figmaでは現在、一度に1つのスタイルを手動で更新することしかできません。ええ、本当に苦痛です。
しかし、JanSixがBatchStylerプラグインを提供してくれたことに感謝します。この超便利なプラグインを使用すると、すべてのフォントのウェイトやスタイルを維持したまま、多数のテキストスタイルを同時に変更することができ、面倒な作業に別れを告げることができます。
Batch Stylerは、Figmaの現在のテキストのスタイル処理の不足を補う素晴らしいプラグインです。
デザインシステムはどこにでもあります、はい、それは当たり前ですね。汎用性の高いシステムが導入されたことで、忠実度の高いデザインを迅速かつ効率的に行うことができるようになりました。しかし、フルカラーの原始的なデザインをローファイなワイヤーフレームに戻す必要がある場合もあるでしょう。そんなときに役立つのが、Wire Boxプラグインです。
Wire Boxプラグインを使用すると、1クリックでハイファイなデザインを素早くワイヤーフレームに戻すことができ、初期段階でスキップしてしまったワイヤーを再作成する必要もありません。これであなたとあなたのチームは、UIではなくUXに集中して、必要な作業を行うことができます。
限られた用途かもしれませんが、とても便利なプラグインです。
モックアップ用のアバター、そうです私のように、過去にX、Y、ZのWebサイトから手動でダウンロードしたことがある人もいるでしょう。しかし、それはUI FacesがFigmaプラグインとして利用可能になるまでです。
私は数年前からこのプラグインを使用していますが、Figmaに永久にインストールしておかなければならないプラグインの一つです。UI Facesは、何千ものアバターを収集し、年齢、性別、感情、その他の要素によってフィルタリングすることもできます。
Figmaでアバターを使用する時に、これほど簡単なものはありません。
Content Reelはテキスト、アイコン、さらには画像などのダミーコンテンツを使用する際の時間を大幅に節約してくれるプラグインです。
Content Reelの素晴らしい点、そして他の同等のプラグインとの違いは、他のFigmaユーザーが共有したカスタムコンテンツを使用したり、自分で作成してコミュニティと共有することができることです。
テキスト、アイコン、画像など、複数の種類のコンテンツを1つのプラグインで利用できるのは、ワークフローの面でも優れていますので、ぜひチェックしてみてください。
Sketchでこのプラグインを使用していましたが、Figmaに移植されたときはとても嬉しかったです。折れ線グラフ、円グラフ、面グラフなど、何でも揃っているので、簡単に選択してプロジェクトにドロップすることができ、カスタマイズも可能です。
ExcelやGoogle Sheetsなどのソースから実際のデータやランダムなデータを使用してチャートを作成するオプションもあり、Figmaコミュニティで利用可能なすべてのチャートプラグインの中で最も強力なものだと思います。
この超多機能なプラグインで、美しいチャートを作成してください。お勧めです。
SketchはPrincipleのようなサードパーティのアニメーションツール（私も過去に使用していました）との統合がうまくいっていましたが、Figmaはどうでしょうか？ 最近まではそうではありませんでした。
サードパーティのアニメーションツールの統合は、Figmaが成熟するにつれて改善されていますが、Figmaで作成されたユニークなアニメーションについてはどうでしょうか？ それを変えようとしているのが、Figmotionです。
Figma内で複雑なアニメーションを作成することで時間を節約でき、Figmotionの機能に非常に感銘を受けました。
Autoflowは、ユーザーフローのプラグインの中で最初のツールではありません。しかし、今だからこそ言えることですが、最も印象的なプラグインの一つです。
以前はFlowkitのようなプラグインを使用していました。Autoflowよりも機能が充実していましたが、アイテムを手動で動かして接続線をつなぎ、フローを構築する必要がありました。
Autoflowではフローを構築したいオブジェクトを選択すると、魔法のように接続線を描いてくれます。手動で接続線を挿入したり移動したりする必要はありません。
Mockuuups Studioは、基本的にFigmaデザインのためのモックアップジェネレーターです。
スマホアプリのデザインをiPhone 13 Proを持っている人の手に持たせて見せたいですか？ 簡単です、Figmaでフレームを選択すれば、あとはMockuuups Studioがやってくれます。
私はいくつかのシーンを利用しただけですが、現在1000以上のシーンが用意されており、さまざまな背景やデバイスなどがあるので、プロダクトに適したシーンに困ることはないでしょう。
私は昔も今もアイコンをデザインツールで作業するときは、IconJarやNucleoを使用して、デザインにアイコンを配置していました。しかし、Figmaでは少し違ったやり方をしています。
Figmaで動作するIconifyプラグインがあれば、アイコンを作業する際のワークフローがよりシンプルになります。
Iconifyには、Font Awesome、Material Design、Jam Iconsなどの有名なセットから50,000以上のアイコンが含まれているので、選択肢に困ることはありません。
ダミーテキストの支持者？ そうではありません。私は可能な限り実際のテキストを使用することを提唱していますが、初期のコンセプトやワイヤーフレームを作成する際にはダミーテキストでギャップを埋めることがあります。
この便利なプラグインを使用すると、テキストレイヤーをダミーテキストで素早く埋めることができ、選択したフレームを埋めるのに必要なダミーテキストの量だけを入れることができます。
簡単でお手軽です。確実に仕事をして、それをうまくこなします。
背景除去ツール、便利なツールですが、（多くのツールを試しましたが）必ずしも最高の結果が得られるわけではありませんでした。
しかし、Remove BGが登場したことで、状況は大幅に改善され、満足のいく結果が得られるようになりました。FigmaのプラグインとしてRemove BGがあると、プロジェクトに取り組む際にさらに便利になります。
無料プランでは出力する解像度はプロの使用にはあまり適していませんので、高解像度の画像が必要な場合は有料プランを検討する必要があります。
Feather Iconsはさまざまなプロジェクトに使用できる汎用性の高い軽量アイコンのセットで、私はこれまでに何度も使用してきました。
これまではIconJarを使用してアイコンをプロジェクトにドラッグアンドドロップしていましたが、今は違います。
FigmaにFeather Iconsプラグインがインストールされていると、異なるツール間で切り替える必要がないので、時間の節約になります。シンプルですが、持っていると便利です。
Pablo StanleyはいつもFigmaコミュニティに全力で取り組んでいます。前述のBlushや、Humaaansなどです。
このシンプルだけど非常に価値のあるプラグインを使用すると、Pabloの素晴らしいイラストライブラリ「Humaaans」をFigmaで簡単に利用できます。
このプラグインを使用すると、提供されているプリセットのイラストをそのまま使用したり、組み合わせたりして、自分のプロジェクトにより適したイラストを簡単に使用することができます。
終わりに
この便利なプラグインの中に、あなたの日々のワークフローに役立つものがあることを願っています。
Figmaのコミュニティは、ここ数年で大きく成長しました。それは今も続いていて、時間を節約したり、非常に便利なプラグインが毎日のようにリリースされています。
2022年にFigmaのコミュニティが何をもたらすのか楽しみです。
sponsors
