コンポーネント設計とバリアント

コンポーネントとバリアント — Figmaデザインシステムの核心

コンポーネント機能は、Figmaが他のツールに対して圧倒的な優位性を持つ理由の一つです。一度UIパーツを「コンポーネント」として定義すれば、何十・何百のスクリーンに配置しても、マスターを変更するだけで全箇所が一瞬で更新されます。これはエンジニアのコンポーネント（Reactなど）と同じ思想です。

このレッスンでは、コンポーネントの作成からバリアント・プロパティの設定、ネストコンポーネントまで、実務レベルのデザインシステム構築スキルを習得します。

Figmaコンポーネント — バリアント設計の全体像

---

コンポーネントの基本概念

マスターコンポーネントとインスタンス

Figmaのコンポーネントには2種類あります。

• ◆マスターコンポーネント（元）: Ctrl/Cmd+Alt+K で作成。デザインの「定義」を持つ唯一の存在。通常は専用の「Components」ページに置く。
• ◆インスタンス（複製）: マスターをコピー&ペーストまたはアセットパネルから配置した複製。マスターの変更が自動で反映される。

💡 インスタンスはマスターの変更を引き継ぎながら、個別のプロパティ（テキスト内容・画像・カラー）だけを上書きできます。これがコンポーネントシステムの真の力です。

コンポーネントの作成手順

1. ◆UIパーツをFigmaで作成（例: ボタン）
2. ◆フレームまたはグループを選択
3. ◆Ctrl/Cmd+Alt+K でコンポーネント化（または右クリック→Create component）
4. ◆菱形アイコンが表示されたらコンポーネント完成
5. ◆コンポーネントに分かりやすい名前をつける（例: Button/Primary/Default）

---

バリアント（Variants）

バリアントとは

バリアントは、同じコンポーネントの「状態違い」を一つのコンポーネントセットにまとめる機能です。ボタンを例にすると:

• ◆Type: Primary / Secondary / Ghost / Danger
• ◆State: Default / Hover / Pressed / Disabled / Loading
• ◆Size: Small / Medium / Large

これらの組み合わせを個別のコンポーネントとして作ると管理が複雑になりますが、バリアントを使えば一つのセットとして整理できます。

バリアントの作成手順

ステップ1: 複数のコンポーネントを作成

1. ◆ボタンのDefault状態をコンポーネント化
2. ◆複製（Ctrl/Cmd+D）してHover状態のデザインに変更
3. ◆同様にDisabled・Pressed状態も作成

ステップ2: バリアントセットにまとめる

1. ◆作成した複数のコンポーネントをすべて選択
2. ◆右パネルの「Combine as variants」をクリック
3. ◆紫色の点線枠が表示されたらバリアントセット完成

ステップ3: プロパティを命名

1. ◆バリアントセットを選択して右パネルの「Variant properties」を確認
2. ◆自動生成された「Property 1」を分かりやすい名前に変更（例: State）
3. ◆各バリアントの値も命名（Default / Hover / Disabled）

---

コンポーネントプロパティ

バリアントとプロパティの違い

Figma 2022年以降、コンポーネントプロパティ機能が追加されました。バリアントが「見た目の状態違い」を管理するのに対し、プロパティは「インスタンスのカスタマイズ可能な部分」を定義します。

主なプロパティ種類:

プロパティの設定手順

1. ◆マスターコンポーネントを選択
2. ◆右パネルの「Properties」セクションで「+」をクリック
3. ◆プロパティの種類を選択して名前と初期値を設定
4. ◆インスタンスを選択すると右パネルにプロパティが表示され、個別に変更可能

---

インスタンスの操作

インスタンスのオーバーライド

インスタンスでは以下の要素を個別にオーバーライド（上書き）できます。

• ◆テキスト内容
• ◆画像・アイコン
• ◆色（カラースタイルが適用されている場合も、別のスタイルや色に変更可能）
• ◆子要素の表示/非表示

マスターへのリセット

インスタンスで変更した内容をマスターに戻したい場合:

1. ◆インスタンスを選択
2. ◆右クリック → 「Reset all overrides」

インスタンスを切り離す

コンポーネントの連携を解除してインスタンスをフリーな要素に変換したい場合:

1. ◆インスタンスを選択
2. ◆右クリック → 「Detach instance」（または Ctrl/Cmd+Alt+B）

⚠️ Detachは不可逆操作です。デタッチ後はマスターの変更が反映されなくなります。本当に必要な場合以外は使わないようにしてください。

---

ネストコンポーネント（入れ子）

ネストとは

コンポーネントの中に別のコンポーネントを配置することを「ネスト」と言います。例えば、ボタンコンポーネントの中にアイコンコンポーネントを入れると、アイコンの種類だけをインスタンスで切り替えられます。

ネストの典型的な構造:

• ◆Card コンポーネント
  • ◆Avatar コンポーネント（ネスト）
  • ◆Badge コンポーネント（ネスト）
  • ◆Button コンポーネント（ネスト）

ネストのメリット

• ◆アバター画像を変えるだけで、カード全体が更新される
• ◆ボタンのスタイルをカードインスタンスから直接切り替えられる
• ◆変更が木構造で伝播するため、管理が一元化される

---

Atomicデザインとの対応

Atomic Designはデザインシステムを5階層で構造化する方法論です。Figmaのコンポーネント機能はこの考え方と完全に一致します。

---

🏋️実践ワーク

1. ◆以下の仕様でボタンコンポーネントを作成してください。
   • ◆サイズ: 幅120px、高さ44px、角丸8px
   • ◆フォント: 14px Medium、色: 白
   • ◆背景: Primary/500（#6366f1）のカラースタイルを適用
2. ◆同じボタンをVariantとして4パターン作成してください。
   • ◆Default: 背景 #6366f1
   • ◆Hover: 背景 #4338ca
   • ◆Disabled: 背景 #c7d2fe、テキスト #818cf8
   • ◆Loading: 背景 #6366f1、テキストを「処理中...」に変更
3. ◆バリアントセットを作成し、インスタンスを3つ配置して、それぞれ異なるStateを設定してください。
4. ◆Boolean Propertyを追加して「左アイコンあり/なし」を切り替えられるようにしてください。

📝まとめ

コンポーネントとバリアントはFigmaが提供する最も強力な機能です。一度正しく設計すれば、何百ものスクリーンにわたる変更が一箇所の修正で完了します。プロパティ・インスタンス・ネストを組み合わせることで、柔軟性と一貫性を両立したデザインシステムが構築できます。これでFigmaマスターコースの第一章「基礎編」が完了です。次章ではプロトタイプとHandoffを学びます。