Componentを覚えたら、是非とも理解しておきたいのが、
Variants（バリアント）という機能です。
ホームページはCSSとJavascriptという非常に協力な動的表示の機能がありますが、
デザインではどうしても静的なモノしか表現できません。
でも、Figmaで作ったデザインは限りなくWebページのような挙動をさせることができる機能がいくつかあり、
Variantsは、その中でもかなりクオリティに直結するので、絶対に理解しておきたい機能とも言えます。
状態によって見た目を変える
ホームページでボタンを作る場合、単純に見た目がボタンの画像を配置しておいただけだと、
実はユーザビリティとしては非常に弱い状態です。
また、ページ内に同じボタンが複数ある場合でも、
「詳細を見るボタン」と「資料請求ボタン」では、どちらかを優先的に表現したくなります。
また、「お問い合わせボタン」などは、一番優先表示したいですよね。
ページ内の全部のボタンが同じテイストだと、とてもヌルいページになってしまいます。
それから、
マウスカーソルがボタンの上に乗った時や、
クリックした時、
ボタンをクリックさせたくない時（必須項目未記入の時とか）など
ボタンの色や形状を変更させのは、もはや「Webの基礎的なお作法」と言っても良いでしょう。
デザインするというのは、こうしたお作法をちゃんとこなしておく作業でもあるのです。
（今回はデザイン云々の話はしません。別の機会にUIについて解説したいと思います）
Figmaでは、こういうボタンを、それぞれComponentとして作ることはできますが、
Componentの数が増えると、管理がしづらくなってしまいます。
こういう場面で使うのが、Variants（バリアント）です。
Variantsは、
１つのComponentを、条件によって表示を切り替えることができる機能なんです。
Variants（バリアント）機能とは？
Variantsを簡単に説明すると、
関連する複数のコンポーネントをひとまとまりにして管理する機能
です。
例えば、
通常ボタンと無効状態のボタンを1つのコンポーネントセットにまとめておけば、
同じボタンのバリエーションとして管理できます。
以前学習した、ComponentのInstanceやOverrideを使って、
複数のデザインパターンを整理することができる機能なんですね。
Componentとの違い
似たような機能だけど関連する機能としてのComponentとの違いを一言で以下のようにまとめてみました。
・Component：再利用するデザインパーツを定義する
・Instance：メインコンポーネントを利用するために配置したもの
・Override：インスタンス側で一部の内容を個別に変更すること
・Variants：関連する複数のコンポーネントを、1つのセットとして管理する仕組み
もっとわかりやすく言うと、
Componentを複数まとめて管理できるのが、Variants（バリアント）機能だと考えるといいでしょう。
チュートリアル
言葉で聞いても理解しずらいので、実際に自分で触って確認してみましょう。
今回は、青色の「通常」と、グレーの「無効」という2種類のボタンを切り替えるVariants Objectを作ります。
1. ページパネルでValiantsページを作成（バリアント設定用）
バリアントは、切り替えをする要素を作る
設定オブジェクトなので、ページやファイルを切り分けておいた方が、後から再利用する時に便利に選択できます。
2. FrameにAuto Layoutを設定し、内部にテキストを配置します。
背景色、文字色、余白、角丸などを設定
コンポーネントを作成（右クリックで設定できます）
3. メインコンポーネントを右クリックしてバリアントを追加
バリアントは、コンポーネントにセットできるため、メインコンポーネントを右クリックして、
「メインコンポーネント」-「バリアントを追加」を選択します。
すると、次のようにバリアント（オブジェクト）が複製された状態になります。
3. 複製されたバリアントを編集
追加されたボタンの背景色をグレーにセットして文字を「無効」に変更します。
4. プロパティの設定
右のインスペクタパネルの「現在のバリアント」という項目で、プロパティの設定ができます。
このプロパティは、バリアントに名前をセットする項目で、後で切り替える時にわかりやすい名称にしておくと良いでしょう。
「プロパティ1」の部分は、すべてのバリアントの共通名で、
「デフォルト」の部分は、バリアントそれぞれの名称になります。
今回は、共通名を「ボタン」、個別のボタン名を、それぞれのボタン名称に割り当てておきます。
5. 別ページを作成（表示用）
実際のデザイン表示用のページを作成（すでに作成してある場合は、移動してください）。
6. 左メニュー「アセット」を選択
画面左の「アセット」という項目をクリックすると、
「全てのライブラリ」に、先ほどまで作業していたページが表示されているので、それをクリック。
すると、バリアントの一覧が表示されるので、
先ほど作ったバリアントを選択、それを画面にドラッグしてページ内に読み込みます。
右パネルのプロパティ（先ほどセットした名前）を切り替えると、ボタン表示も切り替わることが確認できます。
もし切り替え項目が表示されない場合
次の3点を確認してください。
- 選択しているのは、キャンバス上に配置したインスタンスか。
- バリアントが2種類以上あり、それぞれのプロパティ値が異なっているか。
- プロパティを設定した対象が、個々のコンポーネントではなくコンポーネントセットになっているか。
そして、アセットから配置したボタンを選択したとき、
右側のパネルに、自分のセットした
プロパティのプルダウンが表示されるかを確認してください。
あとがき
Valiants（バリアント）は、作っただけでは、ボタンが自動的にホバー状態になるわけではないです。
配置したインスタンスのプロパティで「通常」「無効」などを選ぶことで、デザインの切り替えができるという点が確認してもらえれば、
バリアント機能の基礎は学習できたことになります。
操作に応じた切り替えは、これ以降で学ぶプロトタイプのインタラクションを設定することでできるので、さらに学習を進めて、
動的ページデザインを取得してしまいましょう。
今回は、少し難しかったですかね？
もしわかりにくい表現や記述などがあれば、教えてください。（書き直します）
0 件のコメント:
コメントを投稿