バリアントの設計——プロパティの整理と状態管理【第5回】

どうもmashです。
バリアントの設計——プロパティの整理と状態管理【第5回】

第4回ではコンポーネントの基本概念について書きました。今回はバリアントです。

コンポーネントを使い始めると、すぐに「このボタン、ホバーしたときの見た目も作りたい」「サイズが大きいバージョンと小さいバージョンが必要」という場面が出てきます。そのたびに別々のコンポーネントを作っていると、数がどんどん増えて管理が大変になります。

バリアントを使うと、そういった「同じコンポーネントの複数パターン」を1つにまとめて整理できます。

バリアントとは何か

バリアントとは、同じコンポーネントの複数のパターンをひとまとめにして管理できる機能です。

たとえばボタンコンポーネントには、次のようなパターンが考えられます。

• 通常の状態（Default）

• マウスを乗せたとき（Hover）

• 押せない状態（Disabled）

• 押した瞬間（Active）

• サイズが大きい（Large）

• サイズが小さい（Small）

バリアントを使わない場合、これらをすべて別々のコンポーネントとして作ることになります。button-default・button-hover・button-disabled……と名前をつけて管理するのは、数が増えると混乱の元です。

バリアントを使えば、これらをひとつのコンポーネントの「バリエーション」としてまとめられます。アセットパネルでもひとかたまりとして表示されるので、使うときに迷いません。

バリアントの作り方

バリアントの作り方には大きく2つのパターンがあります。どちらが正解ということはないので、作業スタイルに合わせて選んでください。

方法①：複数のコンポーネントをまとめて1つにする

「先にパターンをすべて作ってからまとめる」方法です。作りたいバリアントの全体像が見えているときに向いています。

手順

1. パターンの数だけコンポーネントをそれぞれ作る（例：Default・Hover・Disabled の3つ）

2. 作ったコンポーネントをすべて選択する

3. 右パネルの「バリアントの追加」ボタンをクリックする（または右クリック → 「バリアントとして結合」）

これで、選択したコンポーネントが1つのバリアントグループにまとまります。まとまったコンポーネントは紫色の点線の枠で囲まれた状態で表示されます。

この方法が向いている場面

• Default・Hover・Disabledなど、必要なパターンが最初から決まっているとき

• 既存のコンポーネントをあとからバリアントに整理し直したいとき

• 複数のデザイナーがそれぞれパターンを作って後でまとめるとき

方法②：1つのコンポーネントを作ってからバリアントを追加していく

「1つ作ってから少しずつ増やしていく」方法です。まず1つ完成させてから派生を作りたいときに向いています。

手順

1. まずDefaultのコンポーネントを1つ作る

2. そのコンポーネントを選択した状態で、右パネルの「バリアントの追加」ボタン（＋アイコン）をクリックする

3. 自動でDefaultのコピーが追加されるので、追加されたコンポーネントをHoverやDisabledに編集する

4. 同じ手順でパターンを必要なだけ追加していく

この方法が向いている場面

• まずDefaultだけ完成させて、状態違いをあとから追加していきたいとき

• 既存のコンポーネントにHoverだけ追加したい、など1パターンだけ増やしたいとき

• コンポーネントの構造が複雑で、まず1つ完成させてからコピーしたいとき

共通の注意点

どちらの方法で作っても、バリアントグループを作成した直後はプロパティ名が「プロパティ１」になっています。次のセクションで説明するプロパティ名の整理を必ずセットで行ってください。

プロパティの整理が重要

バリアントを作ったあとに必ずやっておきたいのが、プロパティ名の整理です。

Figmaでバリアントを作成すると、デフォルトのプロパティ名は「プロパティ１」「プロパティ２」という名前になっています。このままにしておくと、あとで自分が見返したときも、チームメンバーや実装者が見たときも、何を表しているプロパティなのかがまったくわかりません。

プロパティ名を整理することは、見た目には関係のない地味な作業ですが、後のデザイン作業の効率を大きく左右します。

プロパティ名の変え方

1. バリアントグループを選択する

2. 右パネルの「プロパティ」欄に表示されている「プロパティ１」などをクリック

3. わかりやすい名前に変更する

プロパティ名の例

状態の種類と整理の仕方

状態（State）は、UIコンポーネントでよく使われるプロパティです。どんな状態を用意すべきか、基本的なパターンを整理しておきます。

よく使う状態の一覧

すべての状態を最初から用意する必要はありません。プロジェクトの規模や実装の複雑さに合わせて、必要なものだけ用意するのが現実的です。最低限「Default・Hover・Disabled」の3つから始めるとスムーズです。

パターンが増えすぎないための設計方法

バリアントを使い始めると「あれもこれもパターンを増やしたい」となりがちです。しかし、プロパティとパターンが増えすぎると管理が大変になります。

たとえば、State（4種類）× Size（3種類）× Type（3種類）× Icon有無（2種類）を全パターン作ると、4×3×3×2＝72パターンになります。

パターンを増やしすぎないためのポイント

本当に必要なパターンだけ作る すべての組み合わせを用意する必要はありません。実際にデザインの中で使うパターンだけ作るのが基本です。たとえばDisabledにHoverは不要、LoadingにSmallサイズは使わない、といった判断で整理します。

Booleanプロパティを活用する アイコンの表示・非表示など、「ある/なし」の2択で切り替えられるものはBooleanプロパティが便利です。アイコン付きとなしを別バリアントとして作るのではなく、1つのバリアント内でオン/オフを切り替えられるようにします。

プロパティの数は3〜4個までに抑える プロパティが5個以上になってくると、パターン数が急増して管理が難しくなります。設計の段階で「このプロパティは本当に必要か」を考える習慣をつけておくと、後で楽になります。

バリアントとオーバーライドの使い分け

バリアントとオーバーライド（第4回で解説）はどちらも「コンポーネントの見た目を変える」手段ですが、使い分けがあります。

ホバーで背景色が変わる、サイズが変わる、といった視覚的に差があるパターンはバリアントで管理します。
テキストラベルだけ変えたい場合はオーバーライドで十分です。
両方を適切に使い分けることで、無駄にバリアントを増やさずに済みます。

まとめ

• バリアントは「同じコンポーネントの複数パターン」をひとまとめにする機能

• 作成後は必ずプロパティ名を「プロパティ１」からState・Size・Typeなどに変更する

• よく使う状態はDefault・Hover・Disabled・Activeの4種類が基本

• State × Size × Typeなどを掛け合わせすぎるとパターンが増えすぎて管理が大変になるので注意

• 「ある/なし」の切り替えはBooleanプロパティが便利

• プロパティは3〜4個までに抑えるのが管理しやすさの目安

• 見た目が大きく変わるものはバリアント、テキストや画像の差し替えはオーバーライドで使い分ける

次回はネストとインスタンスについて書きます。コンポーネントの中にコンポーネントを入れる「ネスト」の考え方と、インスタンスを組み合わせて複雑なUIを作る方法を解説します。

このnoteはFigmaシリーズ全8回のうちの第5回です。マガジンをフォローしておくと、次回更新時に通知が届きます。