Figma のバリアントとコンポーネントプロパティの使い方 — 作り方・命名規則・スロットとの使い分け

「ボタンの状態違いを毎回コピーして作っている」「バリアントとインスタンス入れ替えのどちらを使えばいいのかわからない」「バリアントが増えすぎて、どれがどれだか管理できなくなった」— Figma でコンポーネントを設計していると、バリアントまわりで判断に迷う場面が出てきます。

バリアントは、同じ役割を持つコンポーネントの「状態違い」や「種類違い」を 1 つにまとめる仕組みです。ボタンの Default / Hover / Disabled、サイズの Small / Medium / Large といった揺れを、ひとつのコンポーネントセットとして扱えるようになります。

本記事では、コンポーネントの作成 → バリアント化 → プロパティ設計 → 命名規則 → インスタンス側の操作 の順に、実務でそのまま使える形で整理しました。近年追加されたスロットとの使い分けも含め、現行の仕様に合わせています。

この記事で得られること

• メインコンポーネントとインスタンス、バリアントの関係
• コンポーネントの作成手順とショートカット
• 複数のコンポーネントを 1 つのセットにまとめる手順
• コンポーネントプロパティ 5 種（バリアント / ブール値 / インスタンス入れ替え / テキスト / スロット）の使い分け
• バリアントの命名規則と、増えすぎたときの整理方法

📝 はじめに — バリアントで迷う 3 つの場面

バリアントで迷う場面は、大きく次の 3 つに分かれます。対処が違うので、まず自分のケースを特定してから読み進めてください。

場面 A: 状態違いをどう管理すればいいかわからない

ボタンの Default / Hover / Disabled をそれぞれ別コンポーネントとして作ってしまっている、というケース。これはバリアント化で 1 つのセットにまとめられます。前半で手順を扱います。

場面 B: バリアントにすべきか、別の方法にすべきか判断できない

「アイコンの有無」「中身の入れ替え」をバリアントで表現しようとして、組み合わせが爆発してしまうケース。これはプロパティの種類の選択の問題です。ブール値やスロットを使うほうが適切な場面があります。

場面 C: バリアントが増えすぎて管理できない

セット内のバリアントが数十個になり、どれを選べばいいかわからなくなるケース。これは命名規則とプロパティ設計の見直しで解消できます。

以下では、作り方（A）→ プロパティ設計（B）→ 命名と整理（C）の順に解説します。

🧭 メインコンポーネントとインスタンス、バリアントの関係

用語が近く混同しやすいので、まず関係を整理します。

公式の呼び方は「メインコンポーネント」です。解説によっては「マスターコンポーネント」と書かれていることもありますが、指しているものは同じです。

🧱 コンポーネントの作り方

作成の手順

1. コンポーネントにしたい要素またはフレームを選択
2. Option + Command + K（Windows は Ctrl + Alt + K） を押す — または右クリックメニューやツールバーから作成
3. 紫のひし形アイコンが付き、メインコンポーネントになる

作成したメインコンポーネントをコピー＆ペースト、またはアセットパネルからドラッグすると、その複製がインスタンスとして配置されます。

コンポーネントにする単位の決め方

迷ったときは「同じ見た目を 2 回以上使うか」で判断すると過不足が出にくくなります。1 箇所でしか使わないものを先回りしてコンポーネント化すると、かえって管理対象が増えます。

繰り返し使うボタン、入力欄、カード、アイコンあたりから始めて、必要になった時点で広げていくのが現実的です。

🎛️ バリアントの作り方（Combine as variants）

バリアントの作り方には、既存のコンポーネントをまとめる方法と、セットに追加していく方法の 2 通りがあります。

方法 1: 既存のコンポーネントをまとめる

すでに状態違いを別々のコンポーネントとして作ってしまっている場合は、こちらが早いです。

1. まとめたいコンポーネントを複数選択
2. 右サイドバーの Combine as variants（バリアントとして結合）をクリック
3. 選択したコンポーネントが 1 つのコンポーネントセットにまとまる

方法 2: セットにバリアントを追加していく

すでにコンポーネントセットがある場合は、こちらで増やします。

1. メインコンポーネント（またはセット）を選択
2. 右サイドバーまたは右クリックメニューから Add variant（バリアントを追加）を選ぶ
3. 追加されたバリアントの中身とプロパティ値を編集する

プロパティ名と値を整える

バリアント化した直後は、プロパティ名が Property 1 のような既定値になっていることがあります。何の軸で分かれているのかがわかる名前（State / Size / Type など）に変えておくと、後から扱いやすくなります。

🔩 コンポーネントプロパティ 5 種の使い分け

コンポーネントの可変部分は、バリアントだけで表現するわけではありません。用途の違うプロパティが 5 種類あり、適切に振り分けると組み合わせ爆発を避けられます。

ブール値は表示 / 非表示の制御に使うものなので、「アイコンありボタン」と「アイコンなしボタン」をバリアントで 2 つ持つ代わりに、ブール値プロパティ 1 つで済ませられます。この置き換えだけでもバリアント数は半分になります。

🔀 スロットとバリアント — 使い分けの指針

スロットは「中身を自由に差し込める領域」を定義するプロパティです。入る要素が事前に決まっていない箇所で使います。

区別のポイントは、中身の自由度をどこまで許すかです。

🏷️ 命名規則とグループ化

バリアントが増えたときに効いてくるのが命名です。Figma ではスラッシュ（/）区切りの名前が階層として扱われるため、命名だけでアセットパネル上の整理ができます。

スラッシュでグループ化する

Button/Primary、Button/Secondary のように命名すると、アセットパネルで Button グループの下にまとまります。コンポーネントが数十個規模になってくると、この整理の有無で探しやすさが大きく変わります。

プロパティ値の書き方を揃える

コンポーネントセット内では、プロパティ名とその値の表記を統一しておきます。

• プロパティ名: State / Size / Type のように役割で命名する
• 値: Default / Hover / Disabled のように大文字始まりで揃える
• 表記揺れ（Small と small の混在など）を作らない

値の表記が揺れると、インスタンス側のドロップダウンで似た選択肢が並んでしまい、選び間違いの原因になります。

増えすぎたときの見直し手順

1. ブール値に置き換えられる軸はないか（有無だけの軸はブール値へ）
2. スロットに任せられる箇所はないか（中身が自由な箇所はスロットへ）
3. 本当に必要な状態か（実際に使われていないバリアントは削除する）

この 3 段階で見直すと、多くの場合はバリアント数を目に見えて減らせます。

🔁 インスタンス側での切り替え

コンポーネント側で設計したプロパティは、インスタンスを選択したときに右サイドバーに表示されます。使う側はここで切り替えるだけで済みます。

• バリアント → ドロップダウンで状態を選ぶ
• ブール値 → トグルで表示 / 非表示を切り替える
• テキスト → 入力欄で文言を書き換える
• インスタンス入れ替え → ドロップダウンから差し替え先を選ぶ

使う側がメインコンポーネントを触らずに済む状態が、コンポーネント設計のひとつの完成形です。逆に「インスタンスを解除しないと目的を達成できない」場面が頻発する場合は、プロパティの設計が足りていないサインと考えられます。

解除そのものの手順や、解除と削除の違いについては Figma でコンポーネントを解除する方法 にまとめています。

🔄 XD から移行したコンポーネントを整えるとき

Adobe XD から移行したファイルでは、XD のコンポーネントとステートが Figma 側のコンポーネントとして取り込まれた状態から始まります。そこから本記事の設計に沿って整えていくことになります。

進め方としては、まずプロパティの軸を決めてから、バリアントをまとめ直すのが手戻りが少なくなります。移行直後の状態のままバリアントを増やしていくと、命名やプロパティ名が揃わないまま数だけ増えがちです。

XD のコンポーネント / ステートが Figma 側にどう対応づけられるかは XD のコンポーネント / シンボルを Figma Components に移行する で詳しく扱っています。

まだ移行していない XD ファイルがあるなら、まず Pixel Fine Converter で Figma に変換し、そのうえで本記事の設計を進めてください。

❓ よくある質問

Q: コンポーネントを作るショートカットは？

Option + Command + K（Windows は Ctrl + Alt + K）です。要素を選択した状態で押すと、メインコンポーネントになります。

Q: バリアントはどうやって作りますか？

まとめたいコンポーネントを複数選択して、右サイドバーの Combine as variants をクリックします。既存のコンポーネントセットに追加する場合は Add variant を使います。

Q: バリアントとインスタンス入れ替えはどう使い分けますか？

状態や種類が決まっている軸はバリアント、入れ子の中身を候補から差し替えたい場合はインスタンス入れ替えです。アイコンの有無のような「あり / なし」だけの軸は、ブール値プロパティのほうが簡潔になります。

Q: バリアントが増えすぎました

まず「有無だけの軸」をブール値に、「中身が自由な箇所」をスロットに逃がせないか検討してください。そのうえで、実際に使われていないバリアントを削除します。

Q: 「マスターコンポーネント」と「メインコンポーネント」は違うものですか？

同じものを指します。公式の呼び方は メインコンポーネント です。

Q: バリアントの命名にルールはありますか？

スラッシュ（/）区切りにするとアセットパネルで階層としてまとまります。プロパティ名は役割（State / Size など）、値は表記を揃えて命名すると、インスタンス側で選び間違いが起きにくくなります。

Q: インスタンスを解除しないと編集できない箇所があります

コンポーネント側のプロパティ設計が不足している可能性があります。テキストはテキストプロパティ、入れ子の差し替えはインスタンス入れ替えプロパティで、解除せずに編集できるようにするのが基本方針です。

🎯 まとめ

バリアントは、同じ役割のコンポーネントの状態違い・種類違いを 1 つのセットにまとめる仕組みです。

記事のポイント

• 公式の呼び方はメインコンポーネント（マスターコンポーネントと同じもの）
• 作成は Option + Command + K（Windows は Ctrl + Alt + K）
• バリアント化は Combine as variants、追加は Add variant
• プロパティは 5 種類 — バリアント / ブール値 / インスタンス入れ替え / テキスト / スロット
• 有無だけの軸はブール値へ逃がす — バリアント数の膨張を抑える最も効く手
• 中身が自由な箇所はスロットへ — バリアントで代用する設計は現在は推奨されていない
• 命名はスラッシュ区切りでグループ化し、プロパティ値の表記を揃える

バリアントを増やす前に「これはブール値やスロットで表現できないか」と一度考えてみてください。多くの場合、セットの規模はかなり小さく抑えられます。

まだ Figma に移行していない XD ファイルがあるなら、まず Pixel Fine Converter で変換し、そのうえで本記事の設計を進めてください。

関連ページ

• Figma でコンポーネントを解除する方法 — インスタンスの解除と、解除せずに済ませる方法
• XD のコンポーネント / シンボルを Figma Components に移行する — XD からの移行手順
• Figma オートレイアウト（Auto Layout）の使い方 — コンポーネントの中身を組む
• Figma デザインシステムの作り方 — ライブラリとしての運用
• Adobe XD から Figma への移行 実践ガイド — 移行プロセス全体の手順