この記事の概要
Figmaを使っていて、こんな場面に遭遇した経験はありませんか？
「このComponentってどこで使っているんだろう？あまり見た覚えが無いけど、もしかして削除しても大丈夫なのかな？」
Componentは便利ですが、増えすぎては管理が行き届かなくなります。
もし未使用なComponentがあれば削除しておく方がベター。
Organizationプランであれば安心してComponentを削除できるので、その機能ややり方を紹介します。
伝えたいこと
Library Analyticsの存在と使い方、これに尽きます。
よくあるしんどい状況
みなさん、以下のような話をしたことはありませんか？
「似たような見た目のComponentがいくつかあるぞ。」
「こっちのパターンはどこで使ってるんだ？あまり見覚えがない……。」
「ほぼ同じ内容だし1つのComponentにまとめちゃいたいな。」
「けどもしどこかで使っていたらどうしよう。」
「怖いから、念のためプラグインを使って1Pageずつ調べようか。」
「いや……非現実的なほど時間がかかってしまう……。」
私は割としょっちゅう遭遇しました笑
よほど小さいプロダクトでもない限り、全FileやPageを調べるのは無理がありますよね。
すると使ってるんだか使ってないんだか怪しいComponentがどんどん増えていきます。
後はもう、お分かりでしょう……。
いつの間にか色々な管理が苦しくなります。
Library Analytics
お待たせしました、具体的な解決策を記します。
状況設定
理解しやすいよう、かなり簡略化した状況で説明します。
- 1つのLibraryと、それをImportしている1つのFileがある
- Libraryには3つのComponentが登録されている
- Library内に1つInstanceがある
- ImportしているFileには3つのInstanceがある
| Library | ImportしているFile |
|---|---|
 |
 |
Library Analyticsへのアクセス
| OrganizationプランでのUI |
|---|
 |
Organizationプランになると、左サイドバーにOrganization名とOrganization名 settings（上の画像の赤く囲っている箇所）が表示されます。
この状態で上部のタブのLibraries（上の画像の青く囲っている箇所）を押すとモーダルウィンドウが出現。
Librariesを選択した状態 |
|---|
 |
普段使いのデータはマスクさせていただきましたが、一番下に今回テストで作ったLibraryの情報が表示されています。
- 3つのComponent
- 0つのStyle
- 2 Filesで使用されている
- 先週4回挿入された
目当てのLibraryを選択するとOverviewへ遷移し……
Overview |
|---|
 |
隣のタブのLibrary Analyticsを選ぶとアクセスできます。
Library Analytics |
|---|
 |
Library Analyticsでのデータの見方
| Component一覧 |
|---|
 |
先ほどの画面から少し下にスクロールすると、現在登録されているComponentが一覧になっています。
どれくらい使われているかを調べたいComponentを選ぶと……
| 対象Componentの詳細 |
|---|
 |
この場合は以下のことが分かります。
- 全部で3 Instances
- 2つのFileで使われている
- 元のLibraryのFile内で1 instance
- Importしている別なFileで2 instances
また、全く使われていないComponentだった場合……
| 対象Componentの詳細 |
|---|
 |
このように、0 instancesかつ、0 filesの表示に。
こうなっていれば、安心して削除できるという寸法です。
Library Analyticsでの注意
データを変更したからといって、即時反映されるわけではありません。
軽く調べた程度ですが以下のような結果でした。
- 数十分程度で、一部反映され始める
- たとえばFile数はあっているけどInstance数が違う、といった状態があった
- 1時間程度で全部反映されていた
- とは言え今回検証していたComponent数が3つだけなので、もっと多いともっとかかる可能性はある
ある程度余裕を持ってご覧ください。
まとめ
- OrganizationプランにはLibrary Analyticsという機能がある
- あるComponentがどのFileで何回使われているかが確認できる
- どこにも使われていないことを確認するのが容易なので、未使用Componentを撲滅しやすくなる