COLUMN コラム

デザインシステムを効率的に管理するうえで欠かせないのが、Figmaの「バリアント」機能です。バリアントは複数の状態（ホバー時、クリック時、非活性時など）をひとつのコンポーネントにまとめることで、デザインの一貫性を保ちつつ、更新・管理を大幅に効率化できます。
今回は、基本的な「バリアントの作り方」から「プロトタイプへの反映方法」までを、順を追って解説します。

1. バリアントとは

「バリアント（Variant）」とは、ひとつのコンポーネントに複数の状態やバリエーションを持たせるための仕組みです。例えばボタンを例にすると、以下のような「見た目が少し違うが、同じ役割を持つ要素」をまとめて管理できます。

状態

説明

Default

通常状態

Hover

マウスオーバー時

Active

クリック時

Disabled

無効状態

2. バリアントの作り方

2-1. コンポーネントを作成する

まずは、ベースとなるコンポーネントを作成します。
ボタンやトグルスイッチなど、状態を持つUIパーツが対象です。今回はシンプルなボタンで説明します。

【操作手順】

ボタンパーツを作ります。

作成したボタンを右クリック → 「コンポーネントを作成」 をクリックします。

そもそもコンポーネントが分からない！という方は、以前書いたコラムで紹介していますので、ご参照ください。
FigmaでUIデザインを始めよう！初心者向けガイド

2-2. バリアントを追加する

次に、作成したコンポーネントにバリアントを追加します。

【操作手順】

コンポーネントを選択した状態で右側のプロパティパネルの＋ボタンから「バリアント」をクリック。

すると、ボタンが点線で囲われた状態になりました。この点線で囲われた状態が、バリアントが設定されている状態になります。この状態にすることで、複数デザインの差分を用意できるようになります。

2-3. 差分のデザインを作成する

それぞれのバリアントに応じたデザイン差分を作成します。
今回は説明をシンプルにするために、以下の2つの状態を設定します。
 
default（通常）
hover（ホバー時）
 

【操作手順】

点線で囲われた領域をクリックし、＋ボタンをクリックします。

バリアントが追加され、そのバリアントが選択された状態になります。このボタンにはホバー時のデザインを適用したいので、塗りやテキストカラーをホバー時の色に変更しましょう。また、右側の「名前を変更」からわかりやすい名前に変更しておくと、デザインファイルが見やすくなります。

「default」と「hover」という名前にして、ホバー時の色は反転させました。左側のレイヤーパネルでも名前が変わっているのが確認できると思います。

また、点線で囲われた領域にも名前をつけることができます。初期値は「プロパティ」という名前でわかりにくいので、「state」という名前に変更しておきましょう。

3. 作成したバリアントを使用する

3-1. アセットからインスタンスを挿入する

バリアントが作成できたら、実際にデザイン内で使用してみます。

【操作手順】

左側の「アセット」タブを開き、作成したコンポーネントをキャンバスにドラッグ＆ドロップします。

3-2. stateを切り替えてデザインが変わることを確認する

インスタンスを選択すると、右側パネルに「state」が表示されます。
プルダウンから「hover」を選択し、hover時のデザインに切り替わることを確認します。

4. プロトタイプへの反映方法

作成したホバー時のデザインは、実際にプロトタイプで動かすこともできます。以下にプロトタイプへの反映方法を紹介します。

4-1. アセットからインスタンスを挿入する

プロトタイプで動作を確認するために、別のアートボードを用意します。そこにstateがdefault（ホバー前のボタン）のインスタンスを配置してください。

4-2. 右側ナビゲーションで「プロトタイプ」を選択

元のアートボードに戻り、メインコンポーネントのstateがdefaultのボタンをクリック。右側のナビゲーションメニューのプロトタイプタブから「インタラクション」を選択します。

4-3. インタラクションを追加してアニメーションなどを設定

インタラクションで「マウスオーバーした時」に「stateがhover」のボタンに切り替わるように設定します。アニメーションや曲線、所要時間はお好きなものを設定いただいて構いません。

【設定の例】

トリガー：マウスオーバー
アクション：次に変更
state：hover
アニメーション：ディゾルブ
曲線：イーズアウト
所要時間：300ms

4-4. プロトタイプで確認

右上の「▶︎再生」ボタンをクリックし、実際の動作を確認します。
ホバーに応じてstateが切り替われば設定完了です。

おわりに

今回は、Figmaのバリアント機能を使って複数の状態をまとめる方法と、プロトタイプへの反映方法をご紹介しました。
バリアントは、デザインの管理を効率化できるだけでなく、クライアントにもあらかじめ実装イメージを共有することができ、実装後の手戻りを少なくできるといったメリットもあります。
是非この機会にバリアント機能を活用して、より効率的でわかりやすいデザイン管理を実践してみてください。

DOLに制作を相談する