Figmaのライブラリ運用で「誰が何を使ってるか」が見える化できる話｜現場で使える実践テクニック

こんにちは！

今日は「Figmaのライブラリ運用で『誰が何を使ってるか』が見える化できる話」について解説します。

ライブラリの「ブラックボックス化」という現場あるあるの話

僕も昔経験したんですけど、チーム内でFigmaのライブラリを運用していると、こんなことが起こるんです。
「あ、このボタンコンポーネント、もう3年前のバージョンのままだ…」「どのプロジェクトで使われてるコンポーネントなんだろう」「更新しても大丈夫？」みたいな状況。
ほんまに、誰がどのコンポーネントを使ってるか分からなくなっちゃうんですよ。

特にプロジェクトが増えてくると、デザイナーは「このコンポーネント、変更したら他の人の成果物が崩れないかな…」と不安になって、結局新しくコンポーネントを作ってしまったり、古いコンポーネントをそのまま放置したり。
その結果、ライブラリが肥大化して、「どれが正式版？」「あ、同じようなボタン5種類ある…」みたいなことになるわけです。

これ、チーム運用が失敗する典型的なパターンなんですよね。
だからこそ、「誰が何を使ってるか」が見える化できると、ほんまに運用がスムーズになるんです。

Figmaの検索機能とコンポーネント情報パネルで使用状況を追跡する

実は、Figmaにはめっちゃ便利な機能が隠れているんですよ。
ライブラリの主要なコンポーネントがどのプロジェクトやファイルで使われているか、意外と簡単に追跡できるんです。

1. 検索機能を使った「使用状況の確認」

Figmaのプロジェクト全体から特定のコンポーネントを検索するときのポイントです。
ライブラリファイルを開いて、左側の「Assets」パネルからコンポーネントを右クリックすると、「Show all instances」というオプションが出てきます。
これをクリックすると、そのコンポーネントが使われている全てのファイル・フレームが一覧で見えるんです。

例えば、Button / Primary / Mediumというコンポーネントがあったとして、それが「プロジェクトA、プロジェクトB、プロジェクトCで合計27個使われている」みたいなことが分かるわけですね。
これだけで「あ、このコンポーネントは超重要なんだな。更新するときは慎重に行こう」という意思決定が変わるんですよ。

2. コンポーネント情報パネルの活用

Figma 2.0以降の機能なんですけど、右側パネルの「Design」タブの下に「Component」という専用セクションがあります。
ここを見ると、そのコンポーネントの詳細情報が全部見えるんです。

具体的には：

• 「Instances」タブ：このコンポーネントの全インスタンス数
• 「Documentation」タブ：そのコンポーネントの説明・使用例
• 「Main component」表示：ライブラリのどこにあるか

僕がよくやるのは、このパネルに「最後に更新した日時」「更新内容」「注意点」なんかをドキュメント欄に書いておくことです。
すると、コンポーネントを使う誰もが「あ、このボタン、最近フォントサイズが変わったんだ」「ほう、Webアクセシビリティ対応が入ったんだ」みたいなことが一目瞭然になるんですよね。

チームルール化：命名規則とドキュメント連携でさらに透明性を上げる

ここからは、もう一歩踏み込んだ「見える化」の話です。
Figmaの機能だけじゃなく、チーム内ルール化することが大事なんですよ。

命名規則の統一で「何のコンポーネントか」を一瞬で判断する

良い命名規則は、見える化の第一歩です。
僕が現場でよく推奨するのは、こんなパターンです：

カテゴリ / コンポーネント名 / バリエーション / 状態

例えば：

• Button / Primary / Medium / Default
• Button / Primary / Medium / Hover
• Input / Text / Large / Focus
• Card / Product / Variant A

この方式だと、コンポーネント一覧を眺めているだけで「あ、Buttonカテゴリって10種類あるんだ」「Inputは4種類か」「CardのVariant Bってまだ使われてないな…」みたいなことが直感的に分かるんです。
ほんま、この工夫だけで、チーム全体の「何を使うべきか」という判断が変わってくるんですよ。

ライブラリドキュメントを別途用意する

そしてもう一つ、めっちゃ効果的なのが「ライブラリドキュメント」を別途Notionなり、Figmaの専用ファイルなりで管理することです。

このドキュメントには、こんな情報を書いておくといいですよ：

• 各コンポーネントの使用目的と使用シーン
• 「このボタンはECサイトで、カート追加時のCTA」みたいな具体例
• 更新履歴：「○年○月に背景色を変更」「△年△月にホバー状態を追加」
• 注意点：「このコンポーネントは、テキストが12文字以上の場合は別コンポーネントを使ってください」
• 使用禁止コンポーネント：「このボタンはレガシーです。〇〇を使ってください」

僕の失敗談なんですけど、昔ドキュメントなしで運用していたことがあるんです。
そうするとね、新人デザイナーが「このボタンとこのボタン、何が違うんですか？」って聞いてくるわけですよ。
その度に説明するのめっちゃ大変で、時間も無駄になるし、説明者によって説明内容も変わっちゃうんです。
ドキュメント化してからは、「ドキュメント見てください」で済むし、そこから自分で学んでくれるようになったんですよ。

Figmaの「File & permissions」で更新権限を明確にする

そして最後に大事なのが、誰がコンポーネントを更新できるかを明確にすることです。
Figmaでライブラリファイルを開いて、右上の「Share」ボタンから「File & permissions」を設定しておくんです。

例えば：

• デザイン責任者：「Edit」権限（コンポーネント更新OK）