FigmaのOrganizationプランで未使用Componentを撲滅しよう

## この記事の概要

Figmaを使っていて、こんな場面に遭遇した経験はありませんか？

「このComponentってどこで使っているんだろう？あまり見た覚えが無いけど、もしかして削除しても大丈夫なのかな？」

Componentは便利ですが、増えすぎては管理が行き届かなくなります。
もし未使用なComponentがあれば削除しておく方がベター。

Organizationプランであれば安心してComponentを削除できるので、その機能ややり方を紹介します。

## 伝えたいこと

Library Analyticsの存在と使い方、これに尽きます。

## よくあるしんどい状況

みなさん、以下のような話をしたことはありませんか？

> 「似たような見た目のComponentがいくつかあるぞ。」
>
> 「こっちのパターンはどこで使ってるんだ？あまり見覚えがない……。」
>
> 「ほぼ同じ内容だし1つのComponentにまとめちゃいたいな。」
>
> 「けどもしどこかで使っていたらどうしよう。」
>
> 「怖いから、念のため[プラグインを使って1Pageずつ調べようか](https://www.figma.com/community/plugin/739978920241977182/Find-%2F-Focus)。」
>
> 「いや……非現実的なほど時間がかかってしまう……。」

私は割としょっちゅう遭遇しました笑

よほど小さいプロダクトでもない限り、全FileやPageを調べるのは無理がありますよね。
すると**使ってるんだか使ってないんだか怪しいComponent**がどんどん増えていきます。

後はもう、お分かりでしょう……。
いつの間にか色々な管理が苦しくなります。

## Library Analytics

お待たせしました、具体的な解決策を記します。

### 状況設定

理解しやすいよう、かなり簡略化した状況で説明します。

- 1つのLibraryと、それをImportしている1つのFileがある
- Libraryには3つのComponentが登録されている
- Library内に1つInstanceがある
- ImportしているFileには3つのInstanceがある

| Library | ImportしているFile |
| --- | --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/75ed748b-f6da-401b-c5ca-64ab9c4d8710.png) | ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/1175c29c-97bb-33aa-e179-f1ed16bf8e3f.png) |

### Library Analyticsへのアクセス

| OrganizationプランでのUI |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/ca42877b-f29f-30d2-cb21-8faa5b4ed10f.png) |

Organizationプランになると、左サイドバーに`Organization名`と`Organization名 settings`（上の画像の赤く囲っている箇所）が表示されます。

この状態で上部のタブの`Libraries`（上の画像の青く囲っている箇所）を押すとモーダルウィンドウが出現。

| `Libraries`を選択した状態 |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/27ce29ba-f7c7-26ba-0343-597a56063f6d.png) |

普段使いのデータはマスクさせていただきましたが、一番下に今回テストで作ったLibraryの情報が表示されています。

- 3つのComponent
- 0つのStyle
- 2 Filesで使用されている
- 先週4回挿入された

目当てのLibraryを選択すると`Overview`へ遷移し……

| `Overview` |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/0839058e-74d5-8b82-7f02-a147a2873075.png) |

隣のタブの`Library Analytics`を選ぶとアクセスできます。

| `Library Analytics` |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/07ed5c52-662a-7d3a-04f6-986f9cb43527.png) |

### Library Analyticsでのデータの見方

| Component一覧 |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/1652fb5a-2af9-5e02-353b-8f4f66a32e11.png) |

先ほどの画面から少し下にスクロールすると、現在登録されているComponentが一覧になっています。

どれくらい使われているかを調べたいComponentを選ぶと……

| 対象Componentの詳細 |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/95e20fec-7872-5736-a92c-4b73cdf3c1d6.png) |

この場合は以下のことが分かります。

- 全部で3 Instances
- 2つのFileで使われている
    - 元のLibraryのFile内で1 instance
    - Importしている別なFileで2 instances

また、全く使われていないComponentだった場合……

| 対象Componentの詳細 |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/575958c9-3b18-0e18-0692-1fcc3f2dca81.png) |

このように、0 instancesかつ、0 filesの表示に。

こうなっていれば、安心して削除できるという寸法です。

### Library Analyticsでの注意

データを変更したからといって、即時反映されるわけではありません。

軽く調べた程度ですが以下のような結果でした。

- 数十分程度で、一部反映され始める
    - たとえばFile数はあっているけどInstance数が違う、といった状態があった
- 1時間程度で全部反映されていた
    - とは言え今回検証していたComponent数が3つだけなので、もっと多いともっとかかる可能性はある

ある程度余裕を持ってご覧ください。

## まとめ

- OrganizationプランにはLibrary Analyticsという機能がある
- あるComponentがどのFileで何回使われているかが確認できる
- どこにも使われていないことを確認するのが容易なので、未使用Componentを撲滅しやすくなる