Figma は、あらゆるスキルレベルのデザイナーにとって強力なツールです。すでに、美しく、インタラクティブなデザインを作成するための便利な機能が豊富に備わっていますが、デザイナーはプラグインを使うことでワークフローをさらに次のレベルへ引き上げることができます。
この投稿では、あなたのようなデザイナーがデザインプロセスのあらゆる段階で時間と労力を節約するのに役立つ、Figma の人気プラグインを紹介します。各プラグインの機能と利点の要約、使い方の手順、そしてデザインワークフローのどの段階で最も活用できるかについてのおすすめも含めます。
時間がないですか？以下のプラグイン一覧をご覧ください。
要点
WireFrame - ワイヤーフレームを素早く作成するのに最適
Illustrations - 無料のイラストに最適
ProtoPie - Figma のデザインを高精細なプロトタイプに変換するのに最適
PitchDeck Presentation Studio - ピッチデッキの作成に最適
Autoflow - シンプルなユーザーフローの構築に最適
ProtoPie Genie - Figma 内でリアルなインタラクションを直接追加するのに最適
UIHUT - デザイン素材の発見に最適
Draw Connector - レイヤーの接続に最適
TinyImage Compressor - 圧縮済み画像ファイルの書き出しに最適
Blush - イラストの作成とカスタマイズに最適
TokensStudio - 複雑なデザインシステムの管理に最適
ColorWell - デザイン内の色の調整に最適
Mockuuups Studio - デバイスモックアップでデザインを確認するのに最適
LottieFiles - Figma デザインにアニメーションを追加するのに最適
LoremIpsum - Figma デザインにサンプルテキストを追加するのに最適
Unsplash - Figma デザインに画像を追加するのに最適
Icons8 - Figma デザインにグラフィックを追加するのに最適
Image Tracer - 画像をベクターレイヤーに変換するのに最適
Iconscout - Figma デザインに幅広いデザイン素材を追加するのに最適
Flaticon - Figma デザインにアイコンを追加するのに最適
RemoveBG - Figma 上の写真から背景を削除するのに最適
Figma プラグインとは？
Figma プラグインは、Figma と FigJam の機能を拡張するアプリケーションです。Figma の基本機能を超えた、さまざまな操作をユーザーが行えるようにします。
要するに、これらのプラグインは追加のツール、自動化、カスタマイズオプションを提供し、デザインプロセスを強化して生産性を高めます。
デザイナー向け Figma プラグイン ベスト20
Figma のプラグインライブラリには、デザインシステム、デザイントークン、ワイヤーフレーム作成、素材コレクションなど、さまざまな用途に対応する幅広いプラグインが揃っています。ここでは、特に人気が高く、強力なプラグインをいくつか紹介します。
なお、掲載しているプラグインに順序はありません。
1. Wireframe - ワイヤーフレームを素早く作成するのに最適
Wireframe
Figma 用の Wireframe プラグインを使うと、ゼロから始めなくても、ワイヤーフレーム、ユーザーフロー、プロトタイプ、その他の基本構造をデザインに素早く作成できます。Web とモバイル向けにカスタム制作された 350 点以上のグラフィックを収録した無料ライブラリも付属しているため、時間に追われるデザイナーに最適です。さらに、同僚とリアルタイムで共同作業しながらプラグインを使えるのも利点です。
使い方:
Figma Community のこちら、からプラグインをインストールし、Figma のデザインプロジェクトで実行します。
Figma 上でワイヤーフレームをドラッグ＆ドロップし始めるだけです。
価格:
無料。
2. Illustrations - 無料のイラストに最適
Illustrations
Illustration Libraries for Figma は、デザインに高品質なイラストを挿入できる無料プラグインです。これらはすべて Creative Commons ライセンスの下で自由に使用できます。見栄えの良いデザインを作るためにイラストをゼロから作成する必要はなく、ライブラリから好きなものを選ぶだけです。
使い方:
Figma Community のこちら、からプラグインをインストールし、Figma プロジェクトで実行します。
ライブラリをスクロールするか、イラストを検索して気に入ったものを見つけたら、プロジェクトにドラッグ＆ドロップします。
価格:
無料。
3. ProtoPie - Figma のデザインを高精細なプロトタイプに変換するのに最適
ProtoPie Figma plugin
Figma 用のProtoPie プラグインを使えば、実際の製品のように動作し、見た目もそっくりな、インタラクティブで高精細なプロトタイプを簡単に書き出せます。これは Figma だけでは実現が難しいことです。
Figma があなたの主要な UI デザインツールなら、ProtoPie は条件分岐、数式、変数などの動的なインタラクションで、プロトタイプを次のレベルへ引き上げるのに役立ちます。テキスト入力、カメラ、音声、メディア再生を追加したり、互いに通信するプロトタイプを作成したりすることもできます。すべて可能です。
使い方:
まず、ProtoPie がインストールされていることを確認します。
ProtoPie と Figma 用 ProtoPie プラグインの両方を開きます（プラグインのインストールはこちら）。
任意のフレームまたはオブジェクトを選択して、［Export］をクリックします。
ProtoPie で強力なインタラクションを追加します。
ProtoPie と Figma を一緒に使う方法を学びましょう！
価格:
無料（有料の pro および enterprise プランあり）。
4. Pitchdeck Presentation Studio - ピッチデッキの作成に最適
Pitchdeck Presentation Studio
Figma 用の Pitchdeck Presentation Studio プラグインを使うと、Figma 上で簡単にプレゼンテーションを作成でき、アニメーションやリアルタイムのプレビューを Figma 内でサポートします。PowerPoint、Keynote、Google スライド、PDF などさまざまなファイル形式に書き出せるほか、Loom、Canva、Lottie、Spotify などのアセットを埋め込むこともできます。
使い方:
価格:
無料（有料の pro 版あり）。
5. Autoflow - シンプルなユーザーフローの構築に最適
Autoflow figma plugin
Autoflow は Figma 用のプラグインで、手描き風またはミニマルなスタイルのユーザーフロー、図、グラフィックを素早く簡単に作成できます。障害物の自動検出、テキスト注釈、カスタムパスルーティングなどの機能を備え、洗練されたフローチャートを手早く作成できます。
使い方:
Figma Community のこちら、からプラグインをインストールし、Figma プロジェクトで実行します。
Shift キーを押しながら 2 つのオブジェクトを選択すると、Autoflow がそれらをつなぐ矢印を描画します。
価格:
無料（最大 50 フローまで）。個人向け生涯アクセスは 29 ドルの一回払い。
6. ProtoPie Genie - Figma 内でリアルなインタラクションを直接追加するのに最適
ProtoPie Genie plugin for Figma
With the ProtoPie Genie プラグイン を使えば、数秒で Figma のプロトタイプにリアルなインタラクションを直接追加できます。
このプラグインのインタラクションは、Figma プロトタイプを新たな高みへと引き上げ、コミュニケーションを豊かにし、比類のない品質でユーザーテストを強化します。
ベータ版では、現在プロトタイプにインタラクティブな入力フィールドを追加できます。近日公開予定のさらなる機能にもご期待ください！
使い方:
Figma プロジェクトで ProtoPie Genie プラグインを開きます。
インタラクションを追加する Figma オブジェクトを選択し、インタラクションを追加します。
インタラクションが含まれている Figma のフローを選択し、プレビュー/公開ボタンをクリックします。
インタラクションを追加した Figma プロトタイプを試してみましょう！
価格:
無料
7. UIHUT - デザイン素材の発見に最適
UIHUT
UIHUT は Figma プラグインで、個人デザイナーやデザインチーム向けに膨大な素材ライブラリを提供します。数千もの UI キット、Web テンプレート、イラスト、3D アセット、アイコンにアクセスできます。このプラグインを使えば、ワークフローを強化し、あらゆるデザインニーズに対応するコンポーネントを見つけられます。
使い方:
Figma Community のこちら、からプラグインをインストールし、Figma プロジェクトで実行します。
UIHUT でアカウントを作成し、サインインします。
カテゴリや検索機能を使って気に入ったデザインを見つけ、ファイルをコピーして Figma のデザインボードに貼り付けます。
価格:
無料（pro および team 版あり）。
8. Draw Connector - レイヤーの接続に最適
Draw Connector
Draw Connector はプレミアムな Figma プラグインで、レイヤー間に完璧な直交コネクタを描画でき、エッジ、コネクタ端点、線の色、幅、スタイルなどをカスタマイズできます。インテリジェントな経路探索により、接続されたレイヤーが変更されるとこのプラグインは自動で更新されるため、正確な図を簡単に作成・維持できます。
使い方:
Figma Community のこちら、からプラグインをインストールし、Figma のデザインプロジェクトで実行します。
接続したい 2 つのレイヤーを選択します。
価格:
ユーザーは Figma のデザインファイルごとに 5 回まで無料で実行でき、1 人あたり 39 ドルの一回払いで Draw Connector を永久に利用できるようになります。
9. TinyImage Compressor - 圧縮済み画像ファイルの書き出しに最適
TinyImage Compressor
TinyImage Compressor は強力な Figma プラグインで、データをプライベートに保ちながら、Figma のデフォルト書き出しより最大 95% 小さい画像を書き出せます。画像圧縮レベル、書き出し形式、ファイルサイズをカスタマイズできるため、Web やモバイルデザイン向けに画像を簡単に最適化できます。
使い方:
価格:
無料（pro 版あり）。無料版には TinyImage Pro の 15 回分の無料トライアルが含まれています。
10. Blush - イラストの作成とカスタマイズに最適
Blush Figma plugin
Blush は、イラストのカスタマイズに使える Figma プラグインです。組み合わせ可能なさまざまなデザイン要素、アーティストコレクション、ランダムな構成生成オプションにより、ブランドの美学に合ったユニークなイラストを簡単に作成でき、既存のイラストを探したり、ゼロからデザインしたりする手間を省けます。
使い方:
プラグインをこちらからインストールし、Figma プロジェクトで実行します。
コレクションを選び、構成を選択してキャンバスに配置し、気に入るものができるまで調整を続けます。
価格:
無料（pro 版は月額 20 ドルで利用可能）。
11. Tokens Studio - 複雑なデザインシステムの管理に最適
Tokens Studio
Tokens Studio は便利なプラグインで、Figma でデザインのさまざまな項目にデザイントークンを使えます。角丸半径やスペーサー単位から、意味的な色やタイポグラフィのスタイルまで対応し、選択したスタイルの変更が文書全体に適用されるのを確認できます。さらに Pro プランでは、トークンを Figma Styles に接続する機能、マルチファイル同期、高度なテーマ管理などの機能も利用できます。
使い方:
価格:
無料（pro 版あり）。
12. ColorWell - デザイン内の色の調整に最適
Colorwell plugin
ColorWell は、ペイントのような感覚で色を簡単に混ぜて保存したり、新しいカラーパレットを作成したり、Figma デザインに塗りや線として色を適用したりできる Figma プラグインです。
使い方:
プラグインをこちらからインストールし、Figma プロジェクトで実行します。
色を選択してミキサーを回して混ぜます。その後、混ぜた色をパレットや Figma デザインで使用または保存できます。
価格:
無料（1 回限り 5 ドル）。
13. Mockuuups Studio - デバイスのネイティブモックアップでデザインを確認するのに最適
Mockuuups Studio
Mockuuups Studio は、1 つのプラグインから 2,400 以上の高品質なシーン、さまざまなデバイスタイプ、異なる背景にアクセスできる包括的な Figma モックアッププラグインです。フレームを 1 つ選ぶだけで、Web サイトやアプリのプロダクトデザインモックアップを驚くほど簡単に作成でき、プラグインが自動的に何百ものプレビューに配置します。
使い方:
価格:
無料版あり（pro および team プランあり）。
14. LottieFiles - Figma デザインにアニメーションを追加するのに最適
LottieFiles plugin
LottieFiles は、独自の Lottie JSON（.json）または dotLottie（.lottie）ファイルをドラッグ＆ドロップして、デザインに Lottie アニメーションを挿入できる Figma プラグインです。数千もの無料 Lottie アニメーションのライブラリにもアクセスできます。
使い方:
プラグインをこちらからインストールし、Figma プロジェクトで実行します。
アニメーションを検索して、デザインボードに挿入します。
価格:
無料（pro および team プランあり）。
高精細プロトタイプでLottie アニメーションを使う方法をご覧ください。
15. Lorem Ipsum - サンプルテキストの追加に最適
Lorem Ipsum Figma plugin
Web サイトやアプリを作成しているけれど、コピーがまだ確定していませんか？ Lorem Ipsum は、その名のとおり、デザイン内の複数のテキストレイヤーを埋めるための Lorem Ipsum のダミーテキストを生成する Figma プラグインです。このプラグインは Figma の Quick Actions にも対応しており、プラグインウィンドウを開かなくてもすばやくテキストを生成でき、Pirate Ipsum や Pizza Ipsum など 8 種類の生成ライブラリから選べます。
使い方:
プラグインをこちらからインストールし、Figma プロジェクトで実行します。
テキストレイヤーを選択して［Generate］をクリックします。これだけです！
価格:
無料。
16. Unsplash - 画像の追加に最適
Unsplash Figma plugin
Unsplash は、300 万点以上の無料高解像度画像にアクセスでき、それらを直接デザインに挿入できる Figma プラグインです。Unsplash ライセンスにより、画像は商用・個人用の両方のプロジェクトで自由に使用できます。デザインプロジェクトにぴったり合う画像を選べるのなら、もう適当な画像を追加する必要はありません。
使い方:
プラグインをこちらからインストールし、Figma プロジェクトで実行します。
気に入った画像を見つけて、クリックしてファイルに挿入します。
価格:
無料。
17. Icons8 - グラフィックの追加に最適
Icons8
Icons8 は、トップデザイナーやアーティストによって作成された 300 万点以上のアイコン、イラスト、写真を一貫して利用できる Figma プラグインです。キーワード検索、スタイルやカテゴリでの並べ替え、Figma を離れずにグラフィックへ簡単にアクセスできる機能を備えています。無料プランでは数千点のグラフィックが利用でき、pro プランではリンクバック不要の編集可能なグラフィックや高解像度グラフィックが利用できます。
使い方:
プラグインをこちらからインストールし、Figma プロジェクトで実行します。
必要なアイコンや写真を見つけて、クリックしてファイルに挿入します。
価格:
無料（pro プランあり）。
18. Image Tracer - 画像をベクターレイヤーに変換するのに最適
Image Tracer
Image Tracer は、Figma 内で画像をベクターレイヤーに簡単に変換できる Figma プラグインです。無限に拡大縮小できる画像、カラーのベクターレイヤーへの変換、マスクとしての素早いトレース、画像の再スタイル化などの機能を備えています。
使い方:
プラグインをこちらからインストールし、Figma プロジェクトで実行します。
ファイル内の写真をクリックし、手順に従って数ステップでベクターファイルを生成します。
価格:
無料。
19. Iconscout - さまざまなデザイン素材の追加に最適
Icon Scout plugin
IconScout は、カスタマイズ性の高い SVG、ベクターアイコン、イラスト、3D グラフィック、Lottie アニメーションなど、560 万点以上のデザイン素材にアクセスできる Figma プラグインです。Color Editor による全素材への即時カラーパレット適用、簡単なライセンス管理、毎週 41,000 点以上の新しい素材追加も提供しています。
使い方:
プラグインをこちらからインストールし、Figma プロジェクトで実行します。
検索またはカテゴリ機能を使って必要な素材を見つけます（pro プランがない場合は、無料のものだけに絞り込むようにしてください）。
価格:
無料（pro 版あり）
20. Flaticon - シンプルなアイコンの追加に最適
Flaticon
Flaticon は、検索・絞り込みができる数百万のアイコンを備えた、最も充実したアイコンライブラリにアクセスできる Figma プラグインです。コンポーネントとして追加したり、デザインシステム全体に変更を適用したりできます。SVG に対応しており、アイコンをコンポーネントとしてインポートし、コンポーネント内のアイコンを差し替えることもできます。
使い方:
プラグインをこちらからインストールし、Figma プロジェクトで実行します。
アイコンを見つけて、クリックしてファイルに追加します。
価格:
無料（pro 版あり）。
21. RemoveBG - 写真から背景を削除するのに最適
RemoveBG Figma plugin
Remove BG は、ワンクリックで画像の背景を自動的に削除する Figma プラグインです。背景を透明（PNG）にしたり、写真に白い背景を簡単に追加したりできます。手作業や繰り返し作業をせずに画像から背景を削除したいデザイナーに最適です。
使い方:
価格:
有料（画像 1 枚につき 1 クレジット）。
今すぐ ProtoPie を無料で試す
ProtoPie は、使いやすく高精細なプロトタイピングツールで、Figma と連携して、あなたの素晴らしいデザインをインタラクティブでリアルなプロトタイプに変換します。無料で始めるなら、今すぐ ProtoPie をお試しください！
