これは何
主に UIデザインにFigmaを使っている私が個人的によく使うプラグインを集めました。
Figmaでプラグインを活用する方法
まず、 Command + / でメニューパネルが開けるので、その状態でプラグイン名を入力すると（おそらく）最速でプラグインが呼び出せます。
キャンバス上で「右クリック」をして「Plugins」を選択するか、上部のツールバーからもプラグイン一覧を表示することができます。
選択系
Similayer
選択しているオブジェクトと「似ている」オブジェクトを一括で選択できるプラグインです。
塗り潰しの色や座標、幅高さ、透明度など細かく絞り込めて痒いところに手が届きます。
Instance Finder
インスタンスかコンポーネントを選択すると、同じマスターコンポーネントのインスタンスを一括選択してくれるプラグインです。
「このデザインのボタンどこで使ってたっけ」とかがすぐ分かって便利です。
アイコン系
Iconify
Material Design Icons、FontAwesome、絵文字など大量のアイコンセットから一括でアイコンを検索・配置できるプラグインです。
それぞれのアイコンセットのライセンスについてはこちらの「利用可能なすべてのコレクションを閲覧する」から飛べます。
とにかく素早くそれっぽいプロトタイプを作りたい時に重宝します。
Feather Icons
同じくアイコン挿入系です。Feather Iconsのアイコンを呼び出すことができます。使用頻度の高いアイコンが過不足なく揃っていて見つけやすく、ミニマルで可愛い。
Material Symbols
こちらはMaterial Symbolsのアイコンを呼び出すことができます。種類が豊富でWeightやFillなどを細かく調整できるため、様々なシーンに適応します。便利。
Icon Resizer
アイコンとバウンディングボックスのサイズを指定した数値に揃えてくれるプラグインです。
「アイコンは24pxでフレームは40pxに」とかができるのでアイコンボタンを作りたい時などに便利です。
文字系
Font Fascia
ファイル内で使用されているフォントファミリーとスタイルを一覧で表示してくれるプラグインです。一部だけフォント間違えてないかとかを確認する時に便利です。
Font Preview
フォントをプレビューを見ながら選べるプラグインです。よく使うフォントをお気に入り登録もできて便利。
Nisa Text Splitter
文字をバラしたり結合したりしてくれるプラグインです。
テキストをシャッフルしたりアルファベット順に並べ替えたり長さでソートしたりもできます。
整理整頓系
LilGrid
選択した要素をグリッドで整列してくれるプラグインです。
グリッドのサイズや列の数を指定できて、レイヤー名でソートもしてくれるのでコンポーネントの整理などに便利です。
Wrapped Layout
こちらはflex-wrap: wrapの見た目を生成してくれます。gapが指定できます。
複数のオブジェクトを内包しているFrameを選択して実行すると、そのFrame内に収まるようにオブジェクトを折り返して整列してくれます。
LilGridとWrapped Layoutの違いはこんな感じです。
Super Tidy
選択した要素を一括で「名前変更」「並べ替え」「整列」してくれるプラグインです。
キャンバス上の並び順に合わせてレイヤー順も整頓してくれます。
「Auto Layout」＋「Rename Selection ( Command + R )」でも大体同じことができるのでお好みで。
Redlines
選択したフレームの大きさを計測して、数値を表示してくれるプラグインです。
Autoflow
みんな大好きAutoflowです。Shiftを押しながらFrameを二つ選択すると矢印で繋いでくれます。しかも、Frame移動に合わせて追従してくれます。
画像系
Unsplash
みんな大好きUnsplashの写真をFigmaに配置できるプラグインです。
全ての写真を商用/非商用問わず帰属なしに無料で使えます。（帰属は大歓迎）
詳しくはこちら
写真を挿入したい箇所を複数選択してランダムで一気に配置することが可能なので、プロトタイプを作成する時に便利です。
Insert Big Image
Figmaでは大きな画像をインサートすると、画像サイズが縮小されてしまいますが、このプラグインを使うとよしなに画像を分割して実寸サイズで貼り付けてくれます。
WebサイトのスクリーンショットをFigmaに貼りたい時などに重宝します。
Freepik
Freepikの無料リソースから写真を選んで配置できるプラグインです。
商用/非商用問わず使えて帰属が必要です。
ライセンスに関してはこちら
挿入したい箇所を複数選択してランダム配置しても、ランダムにピックされた「同じ写真」が全部の箇所に挿入されます。
Remove BG
画像の背景を削除してくれるプラグインです。Photoshopを起動するのが面倒な時にさっと編集できちゃうので便利です。
⚠︎使用するにはremovebgでアカウント取得が必要です。
色系
Stark
コントラストチェッカーです。
選択したコンテンツのコントラストを測定し、適切な明度差の色をサジェストしてくれます。
Image Palette
選択した画像からカラーパレットを生成してくれるプラグインです。
ムーブボードを作ってる時とかに便利です。
データ挿入系
realistic-dummy-text-ja
日本語でダミーテキストを挿入できるプラグインです。名前や住所、メールアドレスの本物っぽいテキストをランダムに生成してくれます。
それっぽいプロトタイプを作りたい時にとても便利です。
Google Sheets Sync
Googleスプレッドシートからデータを一括挿入できるプラグインです。
プロトタイプにリアリティを持たせたい時などに便利です。
⚠︎ スプレッドシートを誰でもアクセスできる状態にしておかないといけません
利用手順はこちらが分かりやすいです :)
CSV Populate
こちらはCSVからデータを一括挿入できるプラグインです。スプレッドシートの権限を変えられない時などはこちらを使用します。
CSVのヘッダーテキストと同じテキストを#をサフィックスに付けてレイヤー名にすることで、データを対応付けすることができます。
＋α系
PDF to Figma
FigmaではPDFファイルをインポートすることができませんが、このプラグインを使用すると画像ファイルとして一括で読み込むことができます。
（本当は編集できる形で読み込みたいのですが、筆者が探した限りその方法は見つけられませんでした...）
html.to.design
サイトのURLを入力するとFigmaデータを生成してくれるプラグインです。
UIトレースをするときの雛形作りに使えるかも
Confetti
名前の通り、紙吹雪が作れるプラグインです。
紙吹雪のパーツになる複数のレイヤーを用意し、実行するとそのパーツを使った紙吹雪を作ってくれます。
透明度や、回転、サイズをランダムにするかを設定できるのと、縦に何個、横に何個複製するかを設定できるので密度も調整できます。
Vectary 3D Elements
フレームから3Dのモックアップを作成できるプラグインです。デザインにちょこっとモックアップを埋め込みたい時に便利です。
Blobs
なんかいい感じのベクターアートを生成してくれるプラグインです。とりあえずそれっぽくしたい時に便利です。
Map Maker
Google Map のキャプチャーを挿入できるプラグインです。
正直利用頻度は低いけど、楽しいです。
uiGradients
いい感じのグラデーションのアセットから好きなグラデーションを選ぶとでフレームを塗りつぶしてくれるプラグインです。
おわりに
他にも便利なプラグインや面白いプラグインがたくさんあるので、是非コミュニティで探してみてください