Figma バリアント 使い方｜5ステップで状態管理を効率化

Figmaのバリアントを使えば、ボタンの「通常・ホバー・無効」など複数状態を1つのコンポーネントセットにまとめられ、インスタンス切り替えが右パネルのプルダウンだけで完結します。この記事では作成手順から命名規則、プロトタイプ連携まで5ステップで解説します。

▶ 3日で初案件PR

この記事でわかること

状態管理の手間を1/3に削減するバリアント設計の基本3操作を習得できます。「Property 1」のまま放置されたプロパティを正しく命名する方法を、実務標準の3軸命名規則で理解できます。インスタンス切り替えができないときの原因を3分で特定し、自己解決できる診断フローを手に入れられます。

この記事の結論

Figmaのバリアントは、同一UIの複数状態を1つのコンポーネントセットとして管理し、インスタンスの状態切り替えを右サイドバーのプルダウン1操作で完結させる機能です。「バリアントとして結合」→プロパティ設定→インスタンス配置の3操作を覚えるだけで、ファイルの煩雑さを大幅に解消できます。フリーランスが納品ファイルを整理する場面でも、コンポーネントセット単位でUIを管理することがデザイン品質と作業効率の両立につながります。

今日やるべき1つ

既存のボタンコンポーネントを2つ複製し、「バリアントとして結合」でコンポーネントセットを作成してみてください（所要時間：10分）。

状況別ショートカット

Figma バリアントはコンポーネントセットで状態を管理する仕組み

「バリアントとコンポーネントの違いは何か」という疑問は、Figmaを使い始めた方なら誰もが持つものです。コンポーネントは1つの状態のUIパーツであり、バリアントはそのコンポーネントの複数状態をまとめて扱う仕組みです。この区別を最初に理解しておくと、以降の設定作業で迷う場面が大幅に減ります。

バリアントとコンポーネントの関係は1対Nの入れ物構造

コンポーネントは、Figmaで「再利用できるUIパーツ」として定義されます。バリアントは同一コンポーネントに対して「通常」「ホバー」「無効」「選択中」などの異なる見た目や状態を持たせる機能です。これらのバリアントをまとめて格納する入れ物がコンポーネントセットであり、Figmaのキャンバス上では点線で囲まれた矩形として表示されます。「コンポーネントセット = バリアントの集合体」という関係を押さえておくと、アセットパネルで検索したときにコンポーネントセット単位で表示される理由が自然に理解できます。

コンポーネントが増える前にバリアント化すると整理コストがゼロになる

バリアントを使わない場合、「Button_default」「Button_hover」「Button_disabled」という独立したコンポーネントがファイル内に散在します。この状態では、アセットパネルの検索で3件がバラバラに表示され、どれを配置すべきか判断する手間が毎回発生します。バリアントで1つのコンポーネントセットにまとめると、アセットパネルには「Button」という1件として表示され、インスタンス配置後に右サイドバーで状態を選択するだけで完結します。ファイルが煩雑になる前にバリアント化するほど、後工程での整理コストがゼロに近づきます。Figmaを使ったデザイン作業の効率化は、作業効率を上げる方法と組み合わせることでさらに高まります。

あわせて読みたい

作業効率上げる方法|フリーランスが5つの仕組みで時間を30%削減 フリーランスが作業効率を30%削減する5つの仕組みを解説。タスク優先順位の明確化、無料ツール活用、環境整備で月3〜5時間を回収できます。

インスタンスはコンポーネントセットのデフォルト状態で配置される

Figma公式ヘルプ「バリアントの作成と使用」によると、アセットパネルからコンポーネントセットをキャンバスにドラッグすると、デフォルト（default）に設定されたバリアントのインスタンスが作成されます。インスタンスとはコンポーネントセットのコピーであり、元のコンポーネントセットを変更すると全インスタンスに自動反映される仕組みです。インスタンスを個別に選択した後、右サイドバーの「プロパティ」欄に表示されるプルダウンで、任意のバリアントに切り替えられます。「配置=デフォルト状態」という挙動を最初に把握しておくと、インスタンス配置直後に意図した状態が表示されない原因を即座に特定できます。

Q: バリアントとコンポーネントは結局どちらを使えばいいですか?

A： 同一UIに複数の状態や見た目がある場合はバリアント（コンポーネントセット）を使います。状態の違いがなく単独で使うパーツはコンポーネントのままで問題ありません。

Q： コンポーネントセットはアセットパネルでどう表示されますか?

A： コンポーネントセット名が親グループとして表示され、その下に個別のバリアントが折りたたまれて表示されます。検索時も1件として表示されるため、複数コンポーネントを個別管理するよりアセットパネルがすっきりします。

Figma バリアントの作成は3操作で完結

「どのメニューを選べばいいか分からない」という壁は、操作の順番さえ覚えれば10分以内に越えられます。ベースとなるコンポーネントを用意し、結合し、プロパティを設定する。この3ステップの流れを手を動かしながら確認してください。

ベースコンポーネントを先に作ってからバリアント化する

バリアントを作成する前提として、元となるコンポーネントが最低1つ必要です。まだコンポーネントを作っていない場合は、UIパーツを選択して「Ctrl+Alt+K」（Mac: Command+Option+K）でコンポーネント化します。次に、このコンポーネントを複製（Ctrl+D / Command+D）して状態の異なる見た目に編集します。たとえばボタンの場合、1つ目を通常状態、2つ目をホバー状態（背景色を変更）として準備します。先にベースコンポーネントを完成させてからバリアント化する順番を守ると、バリアント追加後に構造が崩れるリスクを防げます。

「バリアントとして結合」で2つのコンポーネントを1つのセットに統合する

2つのコンポーネントを両方選択した状態で、右サイドバー上部の「バリアントとして結合」ボタンをクリックします。このボタンは複数コンポーネントを選択しているときだけ表示されます。クリックすると、点線で囲まれたコンポーネントセットが生成され、2つのコンポーネントがその中にまとまります。既存のコンポーネントセットにバリアントを1つずつ追加する場合は、コンポーネントセット内の余白部分をクリックしてセット全体を選択し、右サイドバーの「+」ボタンで追加できます。Figma公式ヘルプでは、この「バリアントとして結合」操作がバリアント作成の基本手順として案内されています。

プロパティ名と値を右サイドバーで設定して切り替えを有効にする

コンポーネントセット生成直後、右サイドバーの「プロパティ」欄には「Property 1」という仮のプロパティ名が設定されています。この名前をクリックして「State」などの意味のある名前に変更します。各バリアントを個別に選択すると、同じプロパティ欄に「default」「hover」などの値が表示されます。この値も同様にクリックして実際の状態を表す名前に書き換えます。プロパティ名と値の設定を完了すると、インスタンスの右サイドバーに「State: default / hover」というプルダウンが表示されるようになり、切り替えが機能します。設定後は必ずインスタンスを配置して切り替え動作を確認する習慣をつけると、後から発覚するミスを防げます。

Q: 「バリアントとして結合」ボタンが表示されません

A: 複数のコンポーネントを同時に選択できているか確認してください。コンポーネント化されていないフレームやグループが混在している場合はボタンが表示されません。先にすべてのパーツをコンポーネント化（Ctrl+Alt+K）してから再度選択してください。

Q： バリアントを追加するたびにセット全体のサイズが変わってしまいます

A: コンポーネントセット内のバリアントは自動で縦に並びます。セットのサイズは内容に合わせて自動調整されるため、手動でリサイズする必要はありません。整列が崩れる場合は、各バリアントのサイズを統一してから結合してください。

Figma バリアントのプロパティは3軸で設計

プロパティ名の付け方次第で、ファイルの管理コストは大きく変わります。命名が曖昧なまま運用を続けると、チームや数ヶ月後の自分が意図を読み取れず、修正のたびに確認コストが発生します。「State / Size / Type」の3軸を基準に設計すると、命名の迷いをゼロに近づけられます。

プロパティ名はState / Size / Typeの3軸が実務標準

バリアントのプロパティ名として実務でよく使われるのは、「State」（状態：default, hover, disabled, active）と「Size」（サイズ：small, medium, large）と「Type」（種類：primary, secondary, ghost）の3軸です。この3軸を基準にすると、1つのコンポーネントセットが持つべきバリアントの数を計算できます。たとえばState×3、Size×3、Type×3のすべての組み合わせを作ると27バリアントになりますが、実際には使わない組み合わせを省略して必要な分だけ作るのが現実的です。

「バリアントは『通常』『ホバー』など複数状態をまとめて管理でき、コンポーネントセットとして整理すると扱いやすい」と語るデザイナーも多く（note: Figmaバリアント実践解説）、3軸命名規則の採用はファイル引継ぎ時の摩擦を下げる効果があります。フリーランスとしてFigmaファイルを納品する場面でも、命名規則の統一がクライアントへの信頼構築につながります。

あわせて読みたい

個人事業主の見積書の書き方｜7項目で完成するフォーマットと実例 個人事業主の見積書は7項目で法的に問題なく発行できます。必須項目・エクセル作成方法・消費税・源泉徴収の書き方をテンプレート付きで完全解説。

見た目ではなく意味で命名すると半年後の自分が助かる

「青色_ボタン」「大きい_ボタン」のように見た目ベースで命名すると、デザインのリブランド時に命名と実態が乖離します。「Primary / hover」のように意味ベースで命名しておけば、ブランドカラーが変わってもプロパティ名を変更する必要がなく、インスタンスの切り替え操作に影響を与えません。チームで運用する場合は、命名規則をコンポーネントセットの説明欄（右サイドバーの「Description」）に記載しておくと、他のメンバーが迷わず使えます。

変化軸が2つ以上あるときは1コンポーネントに詰め込まない

1つのコンポーネントセットにStateとSizeとTypeをすべて詰め込むと、バリアント数が掛け算で膨れ上がります。実務では、Stateのみを1セット、Sizeのみを別セットとして分けて管理し、ネストして組み合わせる設計が管理しやすい構造です。この「分けてネスト」のアプローチは、Figma公式ヘルプでも複雑なコンポーネント設計の参考として紹介されています。変化軸ごとにコンポーネントセットを分けた設計は、後からバリアントを追加する際の工数削減につながります。

Q: プロパティ名を後から変更するとインスタンスの設定がリセットされますか?

A： プロパティ名の変更はインスタンスに影響しません。ただし、バリアントの値名を変更した場合、配置済みインスタンスのプルダウン表示も更新されます。既存インスタンスの切り替え設定が失われることはありませんが、変更後は動作確認を行ってください。

Q： プロパティを複数設定した場合、インスタンスの右サイドバーにはどう表示されますか?

A： プロパティの数だけプルダウンが縦に並びます。「State: default」「Size: medium」のように各プロパティが独立した行で表示されるため、組み合わせを直感的に切り替えられます。

Figma バリアントは状況別に2パターンで診断

「インスタンスで切り替えできない」という問題に直面している場合、原因はResult A・B・Cの3パターンのどれかに分類されます。以下のフローで3分以内に自分の状況を特定してください。

Q1: インスタンスを選択したとき、右サイドバーにプロパティのプルダウンが表示されますか?

表示される → Q2へ進んでください。表示されない → Result Aです。

Q2: プルダウンを変更したとき、キャンバス上の表示は切り替わりますか?

切り替わる → Result Bです。切り替わらない → Result Cです。

Result A: プロパティ設定の問題

コンポーネントセット側のプロパティ名と値が未設定、または名前が空欄になっています。コンポーネントセットを選択し、右サイドバーの「プロパティ」欄で「Property 1」のままになっていないか確認し、適切な名前と値を設定してください。設定後、インスタンスを再配置すると切り替えが機能するようになります（所要時間：5分）。

Result B: 正常動作

切り替えは正常に機能しています。見た目の違いが微妙でわかりにくい場合は、バリアント間で色・テキスト・サイズが実際に変更されているか、各バリアントのレイヤーを直接確認してください。

Result C: インスタンスのオーバーライド問題

インスタンスに手動でスタイルを上書き（オーバーライド）している場合、バリアント切り替え後もオーバーライドが維持されるため、切り替えが反映されないように見えます。インスタンスを右クリックして「メインコンポーネントに移動」で元の状態を確認し、オーバーライドをリセットしてから再度切り替えを試してください（所要時間：3分）。

Q: コンポーネントセットを選択しているのに「バリアントとして結合」が出てきません

A: すでにコンポーネントセットが作成されている場合、新たに「バリアントとして結合」は表示されません。コンポーネントセット内の余白をクリックしてセット全体を選択状態にし、右サイドバーの「+」ボタンでバリアントを追加してください。

Q： インスタンスのプロパティプルダウンに一部の値が表示されません

A: コンポーネントセット側で対応するバリアントのプロパティ値が設定されていないか、値名にスペルミスがある可能性があります。コンポーネントセットの各バリアントを選択して値名を確認し、インスタンス側のプルダウンの選択肢と一致しているか照合してください。

Figma バリアント管理は5つの仕組みで効率化

バリアントが増えてきたとき、整理の基準がないと管理コストが雪だるま式に膨らみます。以下の5つのハックを取り入れると、50個のコンポーネントセットを持つファイルでも迷わず管理できる設計になります。

ハック1: デフォルトを必ずdefaultに統一して配置ミスをゼロにする

【対象】: アセットパネルから複数人でコンポーネントを配置するチーム・フリーランス

【手順】: コンポーネントセット内の「通常状態」バリアントを選択し、プロパティ値を「default」に統一します（3分）。次に、アセットパネルからインスタンスを配置し、初期状態が常にdefaultになっていることを確認します。全コンポーネントセットに同じルールを適用し、「defaultが存在しないセット」がないことを確認して完了です（5分）。

【コツと理由】: 「default」「Default」「通常」など命名が混在すると、インスタンス配置時の初期状態が一貫して適用されず、配置ミスの発生率が上がります。Figmaでは「default」という値名を持つバリアントがコンポーネントセット配置時の初期バリアントとして優先的に扱われるとされています（Figma公式ヘルプ）。小文字で統一するだけで解決できる問題ですが、見落とすと修正コストが累積します。

【注意点】: 「Default」（大文字D）と「default」（小文字d）は別の値として扱われる場合があります。プロパティ値に大文字が混在していないか確認してください。「Default_button」のように接尾辞を付ける必要はありません。

ハック2: コンポーネントセットをページ分割で50件以上でも即検索

【対象】: コンポーネントが30件を超えてアセットパネルが見づらくなってきたフリーランス

【手順】: Figmaのページを「Components」専用ページとして新規作成します（1分）。全コンポーネントセットをそのページに移動し、Atoms（基本パーツ）・Molecules（複合パーツ）・Organisms（セクション単位）のフレームに分類して配置します（15〜30分）。アセットパネルで「Components」ページが選択状態になっているか確認し、他ページからインスタンスを配置して検索が機能することを確認して完了です。

【コツと理由】: 「専用Componentsページ」を作ることで、コンポーネントセットが集約され、アセット検索の操作ステップが「検索→選択」の2ステップに絞られます。専用ページに分離することで、キャンバスの作業領域とコンポーネント管理領域が物理的に分かれ、誤操作でコンポーネントを編集するリスクも低減します。

【注意点】: コンポーネントをページ移動するとき、既存のインスタンスとのリンクは維持されます。ページをまたいだ移動後もインスタンスが壊れることはありません。別ファイルのライブラリとして公開している場合は、ライブラリの再発行が必要です。

ハック3: 命名規則をDescriptionに書いておくと引継ぎ工数を削減できる

【対象】: 複数案件を掛け持ちするフリーランスや、クライアントにFigmaファイルを納品する方

【手順】: コンポーネントセットを選択し、右サイドバーの「Description」欄をクリックして開きます（1分）。「State: default / hover / disabled」「Size: sm / md / lg」のようにプロパティと値の一覧を記載します（3分）。各バリアントの使用タイミングの説明（例：「disabledは入力未完了時に使用」）も追記し、保存して完了です。

【コツと理由】: 数ヶ月後の自分やクライアント担当者は、同じ疑問を必ず持ちます。Descriptionに命名規則を記載しておくと、アセットパネルでコンポーネントセットにカーソルを合わせるだけでツールチップに説明が表示されるため、都度の質問対応を減らせます。Descriptionへの記載は1セットあたり数分ですが、引継ぎ時の質問対応は1回あたり相応の時間がかかるため、継続案件では投資対効果が高い施策です。クライアントへのFigmaファイル納品前チェックにもこの習慣を組み込むと、品質保証の一環として機能します。

あわせて読みたい

【テンプレDL】フリーランスのリスクを減らす契約書｜受発注管理・納期確認・クライアント対応のポイント フリーランス新法対応の契約書テンプレ付き。受発注管理・納期確認・クライアント対応のポイントを解説。トラブルを回避する契約の知識を習得できます。

【注意点】: チームで運用する場合は、Notionなどに命名規則テンプレートを用意してそこからコピペする運用にすると、記載内容の品質が安定します。DescriptionとNotion等のドキュメントは補完的に使う設計が推奨です。

ハック4: オートレイアウトをバリアント前に設定して状態変化でも崩れないUIを作る

【対象】: ボタンのラベルが変わったとき、または状態によってサイズが変化するバリアントを作りたい方

【手順】: バリアント化する前の各コンポーネントにオートレイアウト（Shift+A）を適用し、パディングと間隔を数値で設定します（5分）。各バリアント（通常・ホバー・無効）のスタイル差分（背景色・アイコン有無・テキスト変更）だけを変更し、オートレイアウトの設定値は変更しません。コンポーネントセット化後、各バリアントのインスタンスを配置してテキスト変更時にレイアウトが崩れないか検証して完了です（3分）。

【コツと理由】: バリアント化する前に各コンポーネントにオートレイアウトを設定する順番が、コンポーネントセット内での整合性を保つうえで重要です。バリアント化後にオートレイアウトを追加すると、セット内の他バリアントとサイズ差が生じて点線枠が乱れることがあります。オートレイアウトがバリアント前に設定されていると、状態が変わってもコンテンツに合わせて自動リサイズされるため、ホバー状態でアイコンが追加されるパターンでも手動調整が不要になります。

【注意点】: オートレイアウトを使わずに固定サイズで作成したコンポーネントをバリアント化することは問題ありません。その場合はすべてのバリアントのサイズを手動で統一してください。アイコン系パーツなど固定サイズが適切な場面も存在します。

ハック5: 納品前チェックリストをDescriptionに記録して見落としをゼロにする

【対象】: クライアントへのFigmaファイル納品前に最終確認をしたいフリーランス

【手順】: 納品用ファイルを開き、アセットパネルで全コンポーネントセットを一覧表示します（1分）。各コンポーネントセットに「default」バリアントが存在するか・必要な状態が揃っているかを確認します（10〜20分）。確認済みのコンポーネントセットにはDescription欄に「✓ checked」と記入して確認記録を残して完了です。

【コツと理由】: 「defaultが存在しないセット」「hover状態が未作成」のミスは目視では見落とされやすく、クライアント側でインスタンスを配置したときに初めて発覚します。Description欄に確認記録を残す手法を使うと、後から「どのセットを確認済みか」がアセットパネル上で視覚的に判断でき、見落としの発生率を下げられます。

【注意点】: 「✓ checked」の記入を誰かに委任する場合は、確認項目を事前にリスト化して渡してください。「何を確認したか」を明記した確認基準を別途用意することで、記録の品質が保たれます。

Q: バリアントが20個を超えると、どう管理すればいいですか?

A： 変化軸（State / Size / Type）ごとにコンポーネントセットを分割してください。1セットのバリアント数は12個以下を目安にすると、アセットパネルでの視認性が維持されます。

Q： フリーランスの個人作業でもバリアントの命名規則は必要ですか?

A： 3ヶ月以上継続する案件では命名規則の設定を推奨します。自分だけが使うファイルでも、時間が経つと命名の意図を忘れることが多く、修正時間が発生します。1ヶ月以内の短期案件では省略しても大きな支障はありません。

Figma バリアントとプロトタイプは2ステップで連携

「ホバー状態を実際に動かして見せたいのに、設定方法がわからない」という場面で、バリアントとプロトタイプの連携が役立ちます。事前準備とインタラクション設定の2ステップで完了します。

インスタンスにインタラクションを設定する前にバリアントを確定させる

プロトタイプでホバー動作を再現するには、事前にdefaultとhoverの2つのバリアントをコンポーネントセットに用意しておいてください。準備ができたら、キャンバスにインスタンスを配置し、プロトタイプタブに切り替えます。インスタンスを選択した状態で「+」アイコンからインタラクションを追加し、「On hover」→「While hovering」のトリガーを選択します。次のフレームとして「同じインスタンスのhoverバリアント」を選択すると、ブラウザプレビューでホバー時にバリアントが切り替わる動作が再現されます。

「Swap to」でバリアントを切り替えるとフレーム遷移より軽量に動作する

プロトタイプのアクションとして「Navigate to（フレーム遷移）」と「Swap to（バリアント切り替え）」の2種類があります。フレーム遷移を使ったホバー表現は、別フレームに移動する動作のためプレビューが重くなることがあります。「Swap to」でバリアントを切り替える方法は、同一コンポーネントセット内での状態変化として処理されるため、プレビューの動作が軽量になります。クライアントへのプレビュー共有時は「Swap to」を使ったバリアント切り替えを使うと、プレビューURLの読み込みが速く、ホバー応答も滑らかになります。

「バリアントは『状態』や『種類』の違いを1つのコンポーネントにまとめて管理する機能として活用できる」と語るデザイナーも多く（Figmaコンポーネントバリアントの使い方）、プロトタイプ連携との組み合わせが実務の見せ方を大きく変えます。クライアントにプロトタイプをプレビュー共有する際のメール文面も事前に準備しておくとスムーズです。

あわせて読みたい

フリーランス納品メール|すぐ使える7テンプレと5つの失敗防止策 フリーランスの納品メールを3分で完成させるテンプレート7種と失敗防止策を解説。件名・本文・添付の正しい書き方で、クライアント対応と継続案件獲得を実現します。

プロトタイプ確認後は必ずデザインタブに戻してから納品ファイルを書き出す

プロトタイプ設定の確認が終わったらデザインタブに切り替え直してから納品ファイルを書き出してください。プロトタイプタブのまま書き出しを行っても問題は起きませんが、デザインタブに戻すことで右サイドバーにバリアントのプロパティが再表示され、切り替え設定の最終確認ができます。プロトタイプとデザインの両方を確認してから書き出す手順を習慣にすると、バリアント切り替えとインタラクション設定の両方が正しく機能していることを納品前に確認できます。

Q: バリアントを使ったプロトタイプを共有するとき、共有先はFigmaアカウントが必要ですか?

A： プレビューURLを共有する場合、閲覧者はFigmaアカウントを持っていなくてもブラウザでプレビューを確認できます。編集権限が必要な場合はアカウントが必要になります。

Q： プロトタイプのバリアント切り替えアニメーションのスピードは変更できますか?

A： インタラクション設定画面でアニメーションの種類（Instant / Dissolve / Smart Animate等）と時間をミリ秒単位で設定できます。ホバー動作は「Instant」または「Dissolve」で短めの時間設定が自然に見えます。

Figma バリアントで状態管理を完成させる：3操作から始める設計習慣

Figmaのバリアントは、コンポーネントセットに複数状態をまとめ、インスタンスの右サイドバーだけで状態切り替えを完結させる仕組みです。「バリアントとして結合」→プロパティ名と値の設定→インスタンス配置の3操作を覚えることがすべての起点になります。プロパティ名は「State / Size / Type」の3軸で設計し、命名は見た目ではなく意味ベースにすることで、半年後の自分やクライアントが迷わず使えるファイルが完成します。

フリーランスとして納品するFigmaファイルの品質は、バリアント設計の丁寧さに直結します。1つのコンポーネントセットを正しく作ることが、100インスタンスの管理コストをゼロに近づける投資です。今日、まず手持ちのボタンコンポーネント1つをバリアント化してみてください。

Figma バリアント 使い方に関するよくある質問

Q: バリアントとコンポーネントプロパティは別の機能ですか?

A： バリアントはFigmaの旧仕様から存在する複数状態管理の仕組みで、コンポーネントプロパティはFigma 2022年以降に追加された機能です。コンポーネントプロパティでは、テキスト内容のオン・オフやアイコン表示の切り替えをバリアントなしで制御できます。実務では、状態（ホバー・無効など）はバリアントで管理し、テキストやアイコンの出し分けはコンポーネントプロパティで制御するハイブリッド設計が効率的です。

Q： 既存のコンポーネントをバリアント化すると、配置済みインスタンスに影響はありますか?

A： 既存インスタンスへの影響はありません。バリアント化後も、配置済みインスタンスは元のコンポーネントのリンクを維持します。コンポーネントがコンポーネントセット内に移動したため、インスタンス選択時の右サイドバー表示がプロパティプルダウン付きの表示に変わります。

Q： FigmaのバリアントはライブラリとしてFigmaファイルで使えますか?

A： 使えます。コンポーネントセットが含まれるファイルをFigmaのライブラリとして公開（チームスペースまたは組織スペース）すると、他のファイルのアセットパネルから検索・配置できます。ライブラリファイルのコンポーネントセットを更新すると、他ファイルのインスタンスに更新通知が届き、一括反映が可能です。

【出典・参照元】

Figma Learn: バリアントの作成と使用 – Figma公式ヘルプ。バリアントの基本手順、プロパティ設定、インスタンスの切り替え方法を解説。

note: Figmaバリアント実践解説 – 実践経験に基づくバリアント管理の体験的説明。

Figmaコンポーネントバリアントの使い方 – バリアントの状態管理と活用方法の実践的な解説。