UIデザインの作業を加速するFigmaプラグイン10選
今回は、WebサービスやアプリのUI/UXのデザインFigmaを利用する中で、冗長な作業を効率化する上で特に便利だったプラグインを厳選して紹介したいと思います。プラグインの使い方が知りたい方は、プラグインの探し方とインストール方法も紹介していますので、参考にしてください。
Figmaのプラグインのインストール方法と使い方
今回はFigmaでプラグインをインストールする方法と使い方を解説します。あわせて、当サイトで紹介している便利なプラグインと使い方を解説したプラグイン集もまとめていますので、参考にしてみてください。 ...
この記事のターゲット
Figma初心者〜中級者
Figmaの便利な定番プラグインが知りたい方
Figmaでプラグインを使う方法が知りたい方
Instance Finder
ボタンやリストなど、共通化して使いまわしているコンポーネントが使われている箇所を検索しリスト化できるプラグインです。デザインシステムの更新やコンポーネントの改善を定期的に見直すのに便利なプラグインで、個人的に使用率No.1です。
使い方は、検索したいコンポーネントを選択した状態で、「Find」をクリックします。その際、「Entire Docment」で現在開いているファイルの全てを検索し、「Current Page」で現在開かれているページ内のみ検索します。
検索中はファイル内で他の操作ができなくなるので注意が必要です。非常に大きなファイルでデザインを管理している場合、検索にやや時間がかかるのが難点です。
そういう時は、ブラウザの別タブでFigmaを開くことで、裏で検索を回しつつ別のタブで作業を並行して行うのがおすすめです。
用途の一例
コンポーネントを削除する前に、ファイル内で使用されている場所がないか確認したいとき
特定のコンポーネントを別のコンポーネントに一括で置き換えたいとき
また、以下の記事で不要なコンポーネントの削除の仕方と合わせて使い方を紹介していますので、参考にしてみてください。
Figmaのコンポーネント化を解除・削除する方法
この記事では、Figmaファイルで作成されたオブジェクトのコンポーネント状態やヴァリアントなどを解除・削除する方法を紹介します。不要になったコンポーネントを処分したり、間違えてコンポーネント化してしまった場合などに参考にしてください。 ...
Find and Replace
特定のテキストを削除したり、別のワードに一括で置換できるプラグインです。
プロダクトの開発などをしていると、大人の事情である日突然「メンバー」というワードが「ユーザー」に変更なったりと、テキストを置き換える必要が出てきますよね。そういうときに一括で変更するのに便利なプラグインです。
使い方は、「Find」に検索したいキーワードを入力すると、該当する箇所をテキスト中から引き当ててくれます。その状態で「Replace with」に置き換えたいキーワードを入力し、「Replace」を押すと置換されます。
該当箇所が複数ある場合は、「Replace All」をクリックすると該当箇所が全て置換されます。
置換をしたくない箇所がある場合は、Findの右側にある上下のカーソルを押すと該当箇所を順番に表示してくれるので、1件ずつ確認しながら置換 することができます。
用途の一例
特定のワードが使われている場所を確認したい時
特定のワードを一括で別のワードに置き換えたい時
特定のワードを一括削除したい時
HTML ↔︎ Figma
任意のウェブサイト（html）をFigmaのファイルの中に編集できる形でインポートしてくれる神プラグインです。
複雑な構造のサイトは完全に再現されることはまれですが、ランディングページなどのシンプルな構造のウェブサイトは高い精度でインポートされます。
マーケティング担当者など非デザイナーがサイトを素早くアーカイブしたり、デザインデータが存在しないウェブサイトのデザインデータを作り直す時などに活用できます。
なお、自身で公開しているものではないサイトをインポートする場合は、画像なども含めてそのままインポートされてしまいますので、くれぐれも無断転用などはないように、あくまで参考としての常識の範囲での利用にとどめましょう。
用途の一例
公開したサイトのアーカイブを取りたい時
任意のウェブサイトのデザインデ ータをFigmaに起こしたい時
Sort Layers
ページの中のアートボードを名前順や座標順にソートできるプラグインです。
よくあるのが、継ぎ足しながら画面パターンを設計していった結果、アートボードが増えすぎて左のレイヤーのリストから特定の画面を探すのに苦労したりしますよね。
そんな時にアートボードに番号や命名規則に従って名前をつけてソートすれば、探しやすくなります。
用途の一例
画面の名前や座標ごとにレイヤーをソートしたい時
すでにソートされたレイヤーの昇順・降順を入れ替えたい時
Image Tracer
pngやjpegなどの画像から線画パスをトレースしてくれるプラグインです。
複雑な画像のトレースは得意ではありませんが、色数の少ないイラスト画像や、シンプルな矩形などは比較的綺麗にトレースしてくれます。
用途の一例
元データのない矩形画像をパスデータに変換したい時
解像度の低い画像をパスデータに変換して色やサイズを編集して再利用したい時
Content Reel
あらかじめプリセットしておいたテキストや画像のコレクションをまとめて適用できるプラグインです。
氏名や電話番号といったリスト系データやアバター画像など、共通のカンプデータを使ってより実際の利用状況に近い画面を再現したい時などに便利です。
用途の一例
共通で使用している独自のリスト系データやアバター画像をまとめて適用したい時
特定の文字数のテキストデータをUIに適用してレイアウトを検証したい時
Map Maker
指定した住所のGoogle Mapの画像を生成してくれるプラグインです。
コーポレートサイトや店舗の地図情報を組み込んだデザインなど、手っ取り早くカンプデータを用意することができます。
用途の一例
デザインにGoogle Mapのパーツを手っ取り早く組み込みたい時
チラシや記事などで手っ取り早く道案内用の地図画像がほしい時
Unsplash
クオリティの高い写真素材をインポートしたり、複数のアートボードにまとめてランダムな画像を配置するなど、レイアウトを検証するためのカンプデータが必要な時に便利なプラグインです。
Unsplashのウェブサイトに行かなくても、Figma上で直接画像を検索したり、特定のカテゴリ（例えば「動物」など）の画像からランダムにカンプデータを生成することができるので、大変便利です。
用途の一例
任意の写真画像をデザインに挿入したい時
カードビューなどのレイアウトで、異なる画像を一括で適用したい時
Iconify
欲しいアイコン名をキーワードで検索し、SVG形式のデータとして挿入できるプラグインです。
ウェブサイトをデザインする上で利用頻度の高いアイコン素材は一通り揃っており、FacebookやTwitterなどのロゴのほか、Material DesignやCarbonといったオープンソースのデザインシステムのアイコンも利用できます。
用途の一例
アイコンをデザインに挿入したい時
独自アイコンを設計する上でのパターンの参考が欲しい時
QR Code Generator
任意のURLからQRコードをSVGで生成してくれるプラグインです。
商談用の資料やチラシなどに手っ取り早くQRコードを挿入したい時などに便利です。
用途の一例
QRコードをデザインに挿入したい時
Morph
Shape Toolsで作成した図形オブジェクトに対して、多様でハイクオリティなエフェクトを適用してくれるお便利プラグインです。
対応しているエフェクトは以下の通りです。
Skeuo（スキューモーフィズム）：立体的な質感のエフェクト
Neon（ネオン）：ネオンライトのようなエフェクト
Glitch（グリッチ）：バグって壊れたようなエフェクト
Reflect（反射）：床に反射したようなエフェクト
Glassy（ガラス）：ガラスのような質感のエフェクト
Gradient（グラデーション）：単色の濃淡や色の混ざったグラデーションのエフェクト
用途の一例
バナーやウェブサイトで使用する図形などにエフェクトを付けたい時
立体的なエフェクトの作り方がわからない時の参考に
また、以下の記事で使用方法を詳しく解説しています。
Figmaでネオンやガラスの 質感を手軽に使えるプラグイン「Morph」の紹介
今回は、Figmaで簡単にハイクオリティなエフェクトを適用できるプラグイン「Morph」の紹介です。サムネイルのような様々な種類のエフェクトが、たった一つのプラグインで再現できるので、ちょっとした素材を作るのに大変便利ですのでおすすめです。 ...
Mockup
スマホやPCの画面に、キャプチャやスクリーンショットなどの画像を簡単にはめ込み加工できるモックアップ画像作成に特化したプラグインです。
操作は非常に簡単で、傾いていたりしていても対応しており、自分で用意した好きな画像にはめ込むことができます。
用途の一例
ウェブサイトやバナーでスマホやPCの画面にサービス画面をはめ込んだモックアップを作りたい時
正方形や台形などの矩形に画像をはめ込みたい時
こちらも、以下の記事で使い方を詳しく解説しています。
Figmaで簡単にスマホやPCのモックアップに画像をはめ込む方法
今回は、Figmaのプラグイン「Mockup」を使って、スマートフォン やPCなどのデバイスの画面に、スクリーンショットなどの画像を簡単にはめ込む方法を紹介します。 はめ込みたいデバイスの画面が斜めになっている場合でも対応できますので、サービス紹介用の素材作りにおすすめです。 ...
最後に、本記事が少しでもあなたの作業効率化の助けになればと思います。
figmaでは日々様々なプラグインが開発され続けていますので、随時更新していこうと思います。
この記事を読んだ方におすすめの記事
Figma初心者が使い方に困った時に試してほしいTips
今回は、納品されたり引き継いだFigmaのデザインデータを、修正・変更して再利用しようとした時によく発生するトラブルと、その対応方法をいくつか紹介したいと思います。 ...
