Figmaでよく使うプラグインまとめ

## これは何

主に UIデザインにFigmaを使っている私が個人的によく使うプラグインを集めました。

## Figmaでプラグインを活用する方法

まず、　`Command` + `/`　でメニューパネルが開けるので、その状態でプラグイン名を入力すると（おそらく）最速でプラグインが呼び出せます。

キャンバス上で「右クリック」をして「Plugins」を選択するか、上部のツールバーからもプラグイン一覧を表示することができます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/b2c57a7c-ea0a-5ec1-0ba0-1aa2836b1979.png)


## 選択系

### [Similayer](https://www.figma.com/community/plugin/735733267883397781/Similayer)

選択しているオブジェクトと「似ている」オブジェクトを一括で選択できるプラグインです。
塗り潰しの色や座標、幅高さ、透明度など細かく絞り込めて痒いところに手が届きます。
![スクリーンショット 2021-05-02 12.44.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/3866610d-6322-37fb-4dc5-5bb8e0eece2b.png)


### [Instance Finder](https://www.figma.com/community/plugin/741895659787979282/Instance-Finder)

インスタンスかコンポーネントを選択すると、同じマスターコンポーネントのインスタンスを一括選択してくれるプラグインです。
「このデザインのボタンどこで使ってたっけ」とかがすぐ分かって便利です。

## アイコン系

### [Iconify](https://www.figma.com/community/plugin/735098390272716381/Iconify)

Material Design Icons、FontAwesome、絵文字など大量のアイコンセットから一括でアイコンを検索・配置できるプラグインです。
それぞれのアイコンセットのライセンスについては[こちら](https://iconify.design/)の「利用可能なすべてのコレクションを閲覧する」から飛べます。
とにかく素早くそれっぽいプロトタイプを作りたい時に重宝します。

### [Feather Icons](https://www.figma.com/community/plugin/744047966581015514/Feather-Icons)

同じくアイコン挿入系です。Feather Iconsのアイコンを呼び出すことができます。使用頻度の高いアイコンが過不足なく揃っていて見つけやすく、ミニマルで可愛い。


### [Material Symbols](https://www.figma.com/community/plugin/1088610476491668236)

こちらはMaterial Symbolsのアイコンを呼び出すことができます。種類が豊富でWeightやFillなどを細かく調整できるため、様々なシーンに適応します。便利。

### [Icon Resizer](https://www.figma.com/community/plugin/739117729229117975/Icon-Resizer)

アイコンとバウンディングボックスのサイズを指定した数値に揃えてくれるプラグインです。
「アイコンは24pxでフレームは40pxに」とかができるのでアイコンボタンを作りたい時などに便利です。

## 文字系

### [Font Fascia](https://www.figma.com/community/plugin/746097413727734148/Font-Fascia)

ファイル内で使用されているフォントファミリーとスタイルを一覧で表示してくれるプラグインです。一部だけフォント間違えてないかとかを確認する時に便利です。

### [Font Preview](https://www.figma.com/community/file/834302905869835373)

フォントをプレビューを見ながら選べるプラグインです。よく使うフォントをお気に入り登録もできて便利。

### [Nisa Text Splitter](https://www.figma.com/community/plugin/739048247603902878/Nisa-Text-Splitter)

文字をバラしたり結合したりしてくれるプラグインです。
テキストをシャッフルしたりアルファベット順に並べ替えたり長さでソートしたりもできます。

## 整理整頓系

### [LilGrid](https://www.figma.com/community/plugin/795397421598343178)

選択した要素をグリッドで整列してくれるプラグインです。
グリッドのサイズや列の数を指定できて、レイヤー名でソートもしてくれるのでコンポーネントの整理などに便利です。

### [Wrapped Layout](https://www.figma.com/community/plugin/1042129478204950669)

こちらは`flex-wrap: wrap`の見た目を生成してくれます。gapが指定できます。
複数のオブジェクトを内包しているFrameを選択して実行すると、そのFrame内に収まるようにオブジェクトを折り返して整列してくれます。

:::note
`LilGrid`と`Wrapped Layout`の違いはこんな感じです。

![LilGridはグリッドに沿って整列、Wrapped Layoutはオブジェクトの大きさに合わせて等間隔に整列します。](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/dd1c34c7-dd36-9471-e233-8b5387511fc6.png)
:::

### [Super Tidy](https://www.figma.com/community/plugin/731260060173130163/Super-Tidy)

選択した要素を一括で「名前変更」「並べ替え」「整列」してくれるプラグインです。
キャンバス上の並び順に合わせてレイヤー順も整頓してくれます。
「Auto Layout」＋「Rename Selection ( `Command` + `R` )」でも大体同じことができるのでお好みで。

### [Redlines](https://www.figma.com/community/plugin/781354942292031141/Redlines)

選択したフレームの大きさを計測して、数値を表示してくれるプラグインです。

### [Autoflow](https://www.figma.com/community/plugin/733902567457592893/Autoflow)

みんな大好きAutoflowです。`Shift`を押しながらFrameを二つ選択すると矢印で繋いでくれます。しかも、Frame移動に合わせて追従してくれます。

## 画像系

### [Unsplash](https://www.figma.com/community/plugin/738454987945972471/Unsplash)

みんな大好きUnsplashの写真をFigmaに配置できるプラグインです。
全ての写真を商用/非商用問わず帰属なしに無料で使えます。（帰属は大歓迎）
[詳しくはこちら](https://unsplash.com/license)

写真を挿入したい箇所を複数選択してランダムで一気に配置することが可能なので、プロトタイプを作成する時に便利です。

### [Insert Big Image](https://www.figma.com/community/plugin/799646392992487942/Insert-Big-Image)

Figmaでは大きな画像をインサートすると、画像サイズが縮小されてしまいますが、このプラグインを使うとよしなに画像を分割して実寸サイズで貼り付けてくれます。
WebサイトのスクリーンショットをFigmaに貼りたい時などに重宝します。

### [Freepik](https://www.figma.com/community/plugin/893426972424060133/Freepik)

Freepikの無料リソースから写真を選んで配置できるプラグインです。
商用/非商用問わず使えて**帰属が必要**です。
[ライセンスに関してはこちら](https://www.freepikcompany.com/legal#nav-freepik)

挿入したい箇所を複数選択してランダム配置しても、ランダムにピックされた「同じ写真」が全部の箇所に挿入されます。

### [Remove BG](https://www.figma.com/community/plugin/738992712906748191/Remove-BG)

画像の背景を削除してくれるプラグインです。Photoshopを起動するのが面倒な時にさっと編集できちゃうので便利です。
⚠︎使用するには[removebg](https://www.remove.bg/ja)でアカウント取得が必要です。

### [icons8](https://www.figma.com/community/plugin/791103617505812222/icons8-icons-illustrations-photos)

様々なテイストのイラストやアイコンが入ったリソースです。
小さいサイズであれば**帰属が必要**ですが、無料で利用できます。

## 色系

### [Stark](https://www.figma.com/community/plugin/732603254453395948/Stark)

コントラストチェッカーです。
選択したコンテンツのコントラストを測定し、適切な明度差の色をサジェストしてくれます。

### [Image Palette](https://www.figma.com/community/plugin/731841207668879837/Image-Palette)

選択した画像からカラーパレットを生成してくれるプラグインです。
ムーブボードを作ってる時とかに便利です。

## データ挿入系

### [realistic-dummy-text-ja](https://www.figma.com/community/plugin/946692694904143875)

日本語でダミーテキストを挿入できるプラグインです。名前や住所、メールアドレスの本物っぽいテキストをランダムに生成してくれます。
それっぽいプロトタイプを作りたい時にとても便利です。

### [Google Sheets Sync](https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync)

Googleスプレッドシートからデータを一括挿入できるプラグインです。
プロトタイプにリアリティを持たせたい時などに便利です。

⚠︎ スプレッドシートを誰でもアクセスできる状態にしておかないといけません

[利用手順はこちら](https://uxbear.me/figma-googlesheetssync/)が分かりやすいです :)

### [CSV Populate](https://www.figma.com/community/plugin/875365065394448755)

こちらはCSVからデータを一括挿入できるプラグインです。スプレッドシートの権限を変えられない時などはこちらを使用します。

CSVのヘッダーテキストと同じテキストを`#`をサフィックスに付けてレイヤー名にすることで、データを対応付けすることができます。

## ＋α系

### [PDF to Figma](https://www.figma.com/community/plugin/1105316927173658462)

FigmaではPDFファイルをインポートすることができませんが、このプラグインを使用すると画像ファイルとして一括で読み込むことができます。
（本当は編集できる形で読み込みたいのですが、筆者が探した限りその方法は見つけられませんでした...）

### [html.to.design](https://www.figma.com/community/plugin/1159123024924461424/html.to.design)

サイトのURLを入力するとFigmaデータを生成してくれるプラグインです。
UIトレースをするときの雛形作りに使えるかも

### [Confetti](https://www.figma.com/community/plugin/732876968584257019)

名前の通り、紙吹雪が作れるプラグインです。
紙吹雪のパーツになる複数のレイヤーを用意し、実行するとそのパーツを使った紙吹雪を作ってくれます。
透明度や、回転、サイズをランダムにするかを設定できるのと、縦に何個、横に何個複製するかを設定できるので密度も調整できます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/232e0d34-7eff-5afb-ba8c-2ba2a48af207.png)

### [Vectary 3D Elements](https://www.figma.com/community/plugin/769588393361258724/Vectary-3D-Elements)

フレームから3Dのモックアップを作成できるプラグインです。デザインにちょこっとモックアップを埋め込みたい時に便利です。


### [Blobs](https://www.figma.com/community/plugin/739208439270091369/Blobs)

なんかいい感じのベクターアートを生成してくれるプラグインです。とりあえずそれっぽくしたい時に便利です。


### [Map Maker](https://www.figma.com/community/plugin/731312569747199418/Map-Maker)

Google Map のキャプチャーを挿入できるプラグインです。
正直利用頻度は低いけど、楽しいです。

### [uiGradients](https://www.figma.com/community/plugin/744909029427810418/uiGradients)

いい感じのグラデーションのアセットから好きなグラデーションを選ぶとでフレームを塗りつぶしてくれるプラグインです。

## おわりに

他にも便利なプラグインや面白いプラグインがたくさんあるので、是非コミュニティで探してみてください

https://www.figma.com/community/plugins