のんびり学ぶ Figma 〜コンポーネント編〜 (2)
目次
Variants（バリアント）について学ぼう
近年人気のデザインツールである『Figma』の便利な情報をお伝えする連載の2本目です。1本目の記事では、Figmaの重要な機能の一つであるコンポーネントの基礎についてご紹介しました。
それに続く今回の記事では、Figmaのコンポーネントをグループ化して管理する「Variants（バリアント）」という仕組みについて解説します。
Variantsの概要
コンポーネントを作成していると、よく似ているものの、細部が異なるいくつかのデザインバリエーションが必要になることがあります。Figmaのコンポーネントには、このような類似のデザインバリエーションをグループ化して管理する「Variants（バリアント）」という仕組みがあります。
例えば、ボタンUIを表すコンポーネント ❖ button は、表現したいよくあるパターンとして「通常時」「マウスオーバー時」「Disabled時」の3つの状態があるとします。インスタンスを利用するシーンによって、都度オーバーライドで色やテキスト、サイズといった情報を変更することでも対応できますが、ちょっと管理が大変になってしまいますね。
そこで、これら3つのコンポーネントのデザインバリエーションを一つのグループにまとめてしまって、インスタンスを使う場所によってコンポーネントを切り替えられると便利そうですね。これを実現するのがVariantsです。
紛らわしい！ Variants？Variant？Component Set？
Variantsでは、そのコンポーネントのグループが表現したい、デザインバリエーション一つ一つのコンポーネントのことを「Variant」と呼びます。
また、このコンポーネントのグループのことを「Component Set（コンポーネントセット）」と呼ぶことがあります。Component SetにVariantと呼ばれるコンポーネントを増やしていくことで、コンポーネントは複数のデザインバリエーションを表現できるようになります。
初めてのVariant作成
それでは、まずはコンポーネントでVariants機能を利用するためのプロパティを追加してみましょう。
画面左レイヤーパネルから ❖ button レイヤー をクリックで選択して、デザインパネル内Propertiesセクションの ＋アイコンをクリック → ◆ Variant を選択してください。
すると、❖ button の周りが紫色の破線で囲われました。これがこのコンポーネントでVariants機能が利用できるようになった印です。
まずは、ボタンをマウスオーバーした時のデザインに対応する「Hovered」の状態を定義してみます。レイヤーパネルから ❖ button レイヤーを選択すると、コンポーネントの下に紫色の ＋アイコンが出現します。これをクリックしてみましょう。
❖ button の紫の枠の中に、同じ見た目のボタンがもう一つ出現しました。これが新しいVariantです。デザインパネル内Current variantセクション「Property 1」に対応する部分が入力欄に変化しています。ここには「Hovered」という値を入れておきましょう。
※ 以下、特定のVariant propertyを指すプロパティ名を「青文字」、それに対する値を「太字」で表現します。
無事、「Hovered」の状態を表す定義を追加することができました。この調子で「Disabled」の状態を表す定義も追加していきましょう。要領は先程と同様です。
こちらも無事、Disabled の状態を表す定義を追加することができました。これで、「Default」「Hovered」「Disabled」の状態を定義することができました。
Current variantって？
Component Setには、Variantに割当予定のVariant propertyのリストを定義します。Component Setを選択すると、デザインパネルのPropertiesセクションに、定義したVariant propertyのリストが表示されます。
一方、Component Set内に定義される個々のコンポーネントであるVariantは、Component Setに定義されたVariant propertyの定義から、Variant propertyと値のユニーク（重複しない）な組み合わせをプロパティとして持ちます。
つまり、Variantの数だけ、ユニークなデザインを各Variantにマッピングすることができるのです。各Variantを選択すると、デザインパネルに表示されるCurrent variantセクションでは、それぞれのVariantに定義されたVariant propertyを確認することができます。
Variant propertyへのデザインマッピング
Variantを追加することで、Variant property「Property 1」に「Default」「Hovered」「Disabled」という値を定義することができました。ですが、待ってください！ このままだと、まだまったく同じ見た目のデザインバリエーションが3つに増えただけですね。
Variant property「Property 1」、値が「Hovered」という組み合わせのVariantをマウスオーバーしたときのデザインにしてみましょう。❖ button レイヤーからVariant ◆ Hovered および ◆ Disabled を選択して、それぞれFillの値を変更しましょう。
これで、当初想定していた「Default」「Hovered」「Disabled」の状態を定義することができました。
それでは、これまで作成した3つのVariantを、実際にインスタンスを使って利用してみましょう。ただし、Component Set化されたコンポーネントはインスタンスの作成に注意が必要です。
Component Set化された ❖ button レイヤーを選択した状態でコピーアンドペーストすると、同名ですがFigma内部では別コンポーネント扱いのComponent Setが作成されてしまいます。
そこで、ここは先に学んでおいた、「コンポーネントのリストからインスタンスを作成する方法」を利用しましょう。
インスタンスを配置して、画面左のレイヤーパネルから、配置したインスタンスのレイヤーを選択します。すると、画面右側のデザインパネルのコンポーネントを操作するエリアに「Property 1 Default ▼」と表示されていることがわかります。
このエリアの「Default ▼」という部分をクリックすると、メインコンポーネントで作成した状態の3種類が選べるようになっています。試しに「Hovered」を選んでみましょう。すると、インスタンスが 「Hovered」で定義したデザインに変更されました！ 「Disabled」に変更してみると、今度は「Disabled」で定義されたデザインに変更されました！
Variant propertyのリネーム
ここまで、ボタンコンポーネント ❖ button をVariants機能を利用することでグループ化（Component Set化）した上で、それぞれのVariantにデザインを適用して、インスタンスで状態の切り替えが行えるようにしてきました。
ところで、これまでボタンの状態を表すために利用してきたVariant property「Property 1」ですが、「ボタンの状態」ということを表すにしては少しわかりにくい名前ですよね。
Variant propertyのプロパティ名には自由に名前をつけることができます。画面左レイヤーパネルから ❖ button レイヤーを選択して、デザインパネル内Propertiesセクションの「Property 1」の部分をマウスオーバーすると編集用アイコンが出現します。
これをクリックすることで、Variant propertyの編集を行うエリアが表示されます。ここではプロパティ名を変更したいので、Nameの欄を、「状態」ということを表す「State」に変更しておきましょう。
Variantsのまとめ
Variants機能を使うと、メインコンポーネントであらかじめパターンを定義しておくことで、インスタンスから簡単にデザインのバリエーションを切り替えることができるようになります。インスタンスのオーバーライドは便利ですが、都度利用する先で似たようなオーバーライドを行っているとしたら、Variants機能を利用することを検討してみましょう。
Variantsは何者？
Component SetやVariantには、Variant property（バリアントプロパティ）という、Variants機能専用のComponent propertyを設定することができます。メインコンポーネントに対してVariant propertyを設定することで、Variants機能を利用できるようになります。
Variant propertyは、単一のプロパティ名（例えば「Property 1」というプロパティ）と、一つ以上の値を持つことができます。後でご紹介しますが、Variantsは、コンポーネントに対して設定することができるプロパティである「Component properties（コンポーネントプロパティ）」の一種であり、Variants機能を利用するために必要なComponent propertyが、Variant propertyなのです。
複数のVariant propertyの組み合わせ
先程は、ボタンの状態を表現するためのVariantを定義しました。ですが、デザイン制作を行ううちに、ボタンにアイコンを付けたパターンのデザインもほしいというケースもでてくるかもしれません。
そんな時は、メインコンポーネントに定義するVariant propertyの種類を増やしてあげることで、より複雑な組み合わせをもつデザインの状態を作成することができます。
今回はVariantを使って、先程まで扱ってきたコンポーネント ❖ button に、「アイコンの有無」を表すVariantを定義してみましょう。
アイコンの有無を表すパターンのVariant property追加
では、いよいよ「アイコンの有無」を表す新しいVariant propertyを追加してみましょう。
レイヤーパネルから ❖ button レイヤーを選択して、デザインパネル内Propertiesセクションの右上にある ＋アイコン → ◆ Varitant を選択してください。新規のVariant propertyを追加するモーダルが出現するので、NameとValueをそれぞれ入力していきます。
Nameには「Icon」、Value（値）には「False」と入力しておきましょう。アイコンの有無は二択なので、値はTrue/Falseから選ばせるようにしています。
Variantsの特別な値、True/False
このパターンのような、2種類のどちらかから選ばせるタイプのVariant propertyの場合、Figmaでは特別なキーワードTrueおよびFalseを値に使うことがあります。
プログラミングの世界では、このような真偽値を表したい場合、ブール型（Bool型、あるいはBoolean型等）を利用することがあります。一般に、ブール型は値として、真の場合にTrue、偽の場合にFalseの値を取ります。
今回の例で言えば、アイコンの有無のような二択を表現したいような場合、「有」をTrue、「無」をFalseと対応させて表す場合が多いです。つまり、このコンポーネントのデフォルトでは、アイコンを表示しないようにしています。
ここで、いったん ❖ button レイヤー から、各Variantの定義を確認してみましょう。それぞれのVariantのレイヤーをクリックして、デザインパネル内Current Variantセクションをみてみると、そのVariantに定義されたVariant propertyのリストが表示されています。
現在Variantは3つ定義されていますが、「Icon」に対応する値は、「Icon」作成時に入力した「False」が指定されていることが確認できます。もとからあったVariant 3つに、単に「Icon」が「False」という属性を追加した状態です（元からアイコンがないVariantに「あなたはアイコンがないVariantです」というプロパティを改めて定義しているわけですね！）。
次に、アイコンがある場合のVariantを追加していきましょう。まずは、「State」が「Default」かつ「Icon」が「True」という属性を持つVariant、つまり「アイコンがある普通の状態のボタン」用のVariantを作成していきます。
表にすると以下のとおりです。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| State | Default | 普通の状態 |
| Icon | True | アイコンがある |
❖ button レイヤーの下層にあるVariantレイヤーの中から、「State」が「Default」、「Icon」が「False」の属性を持つVariantレイヤーを選択して、コピーアンドペーストしましょう。❖ button のComponent Setに新しくVariantが増えました。キャンバスにもボタンのオブジェクトが追加されています。
続けて、デザインパネル内Current variantセクションのVariant property「Icon」の値部分が入力欄に変わるので、ここに「True」と入力しましょう。
（新しくできたオブジェクトが既存のオブジェクトに重なってしまった場合には、紫枠を広げて中に収まるように移動してあげましょう）
Variantの追加
Variantの追加を行う時、Comonent Setを表す紫色の破線の下部に出現する ＋アイコンをクリックする方法を使った場合、新しく ❖button のComponent Setに追加されるVariantは、Component Setに定義されたVariantレイヤーリストの先頭（一番下）のレイヤーが複製されます。
任意のVariantを複製元にしたい場合には、そのVariantレイヤー（レイヤー名が◆から始まります）を選択の上、コピーアンドペーストを行うことで、選択的に複製することができます。
https://knowledge.sakura.ad.jp/wp-content/uploads/2022/09/figma-2-17.mp4
次に、今回定義したVariant property「State」で値が「Default」、「Icon」で値が「True」のVariant 、つまり「アイコンがある普通の状態のボタン」に対応するデザインを作成してみましょう（まだデザインにはアイコンがない状態ですね！）。
まずは適当なアイコン用画像をデザインファイルに読み込ませて、コンポーネント化しておきましょう。ここでは ❖ Icon/Info と名付けました。
次に、❖ Icon/Info のインスタンス ◇ Icon/Info を作成して、対象のボタンコンポーネントのレイヤー内、テキストレイヤーの上に移動しましょう。
これで「アイコンがある普通の状態のボタン」用Variantのボタンデザインを作成することができました。この調子で、「State」が 「Hovered」及び「Disabled」 の状態の場合にもアイコンが表示できるように、Variantを増やして、対応するボタンデザインを作成しましょう。
まずは「State」が「Hovered」、「Icon」が「True」、つまり「アイコンがあるホバー状態のボタン」を作成します。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| State | Hovered | ホバー状態 |
| Icon | True | アイコンがある |
「State」が「Hovered」、「Icon」が「False」の属性を持つ Variantを複製元として選択して、コピーアンドペーストしてみましょう。新しくボタンコンポーネントに、ホバー状態のボタンデザインのオブジェクトが追加されます。デザインパネル内Current Variantセクションの「Icon」に対応する値部分が入力欄に変わっているので、「True」と入力して決定しましょう。
これで、「アイコンがあるホバー状態のボタン」のVariant propertyが作成できました。
最後に、「State」が 「Disabled」、「Icon」が「True」、つまり「アイコンがあるDisabled状態のボタン」を作成します。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| State | Disabled | Disabled状態 |
| Icon | True | アイコンがある |
Hoveredの時と同じように、今度は「State」が「Disabled」、「Icon」が「False」の属性を持つ Variantを複製元として選択して、コピーアンドペーストして、Current Variantセクションの「Icon」の値を「True」にしましょう。
これで、「アイコンがあるDisabled状態のボタン」のVariant propertyも作成できました。
最後に、「Icon」が「True」と定義した各ボタンに対して、対応するアイコン付きのボタンデザインを作ることを忘れないようにしましょう。
それでは、ボタンコンポーネントのインスタンスを作成して、デザインパネル内インスタンス情報セクションから、プロパティの変更を行ってみましょう。
無事、Variant propertyで定義した値の切り替えが行えました！
このように、複数のVariant propertyを組み合わせることで、より複雑なデザインのパターンを一つのコンポーネントで管理することができるようになります。
TrueとFalseの2つだけならスイッチUIが使える
Figmaでは、Variant propertyの値について、この真偽値で利用する特別なキーワードであるTrueおよびFalseの2つを定義した場合のみ、インスタンスでVariant propertyの値切り替えを行う時、スイッチUIを利用することができます。今回のケースのように、2つのどちらかの値に切り替える（トグルする）だけのようなパターンの場合に活用するとよいでしょう。
True/Falseを使うときと使わない時
Variant propertyの値が2種類しかないケースでもTrueおよびFalseを使うことが適さないケースもあります。
例えば、ボタンサイズを表すVariant property「Size」があったとして、値には大サイズと小サイズの2つしかない場合を考えます。ここで、大サイズの場合に値を「True」、小サイズの場合に値を「False」とすると、人によっては多少わかりにくく感じることがあるかもしれません。
さらに、今は大サイズと小サイズしかないけれど、デザイン制作を進めるうちに中サイズも定義したくなるかもしれません。そうなってしまうと、もう「True」「False」で表すことができなくなってしまいます（三択になってしまいますから！）。この場合には、あらかじめ値を「Large」「Small」などとしておくと、よりわかりやすく値の指すデザインが明示的になるでしょう。中サイズの「Middle」も追加できそうですね。
プログラミングでは、一般にこれらを命名に関する問題と捉えることができます。
例えば、画面にユーザーへの通知を表すメッセージUI用のコンポーネントがあるとします。通知が成功した場合と失敗した場合を、それぞれの状態として持ちたいとします。
プロパティ名に「Success（もしくはisSuccess）」で値を「True」「False」とする場合、おそらく「成功した」ということがこのプロパティの関心事で、文脈上の主体になるでしょう。一方、「メッセージの通知結果」を表現したい主体と考えると、プロパティ名は「Condition」、値は、成功した場合「Success」、失敗した時「Failure」などとするかもしれません。
Figmaで定義したコンポーネントのVariant propertyをフロントエンドのコンポーネントの属性に対応させると、デザインと実装の乖離が少なくなり、開発効率が向上します。命名規則に唯一のルールは存在しませんが、デザイナー側で命名に迷った際には、エンジニアの実装メンバーと相談して決めてみてもよいでしょう。
つづきは次回
この記事では、Figmaのコンポーネントをグループ化して管理するVariantsについて詳しく解説しました。次回の記事では、Figmaのコンポーネント機能の中でも、よりパワフルでより複雑なComponent properties（コンポーネントプロパティ）についてご紹介します。