この記事では、FigmaのVariables（バリアブル）を使って、実際のプロダクトに近い操作ができるプロトタイプの作成方法を紹介します。そのプロトタイプは、特にユーザビリティテストにおいて有効なフィードバックを得るのに役立つと考えています。
この記事が、みなさまのプロダクトのUI/UX改善・検証のお役に立てば幸いです。
Figmaのバリアブル（Variables）とは
バリアブルについて公式サイトには以下のように紹介されています。
Figmaデザインのバリアブルには再利用可能な値が保存され、あらゆる種類のデザインプロパティとプロトタイプアクションに適用できます。デザインの構築、デザインシステムの管理、複雑なプロトタイプフローの作成時に、時間と労力を節約するのに役立ちます。
たとえば、以下のようなことができます。
- デザインシステムを管理する際に、デザイントークンを作成して効率を高める
- 異なるデバイスサイズ間でフレームを切り替え、定義した空間システムに従って、スペーシングを直ちに更新する
- フレーム上のコピーを切り替えて、異なる言語でテキストの流れをプレビューする
- 極めて機能的なチェックアウトカートデザインを作成し、カートに追加されたアイテムに基づいて注文総額を計算する
- 質問に対するユーザーの回答が正しいか正しくないかを示す、条件付きロジックを使用したインタラクティブなクイズのプロトタイプを作成する
Figmaオフィシャルサイト から抜粋
今回のご紹介するプロトタイプでは、入力フォームの挙動コントロールと、ユーザーが入力した内容によって画面表示を変更することにバリアブルを使用しました。
具体的には、
- キーボードで打った内容をテキストフィールドに入力する
- プルダウンで選択した内容をセレクトボックスに入力する
- ラジオボタンの操作
- これら複数要素がすべて入力されたか検知する
詳細な設定方法は後述します。
バリアブル導入のきっかけ
今年後半から始まったプロジェクトのUIUX調査の中で、モックアップを使ったユーザビリティテストを予定しており、以下の2点ができるツールを検討していました。
- ユーザーは入力フォームを使って自身の情報を入力する
- 入力した情報によって表示するUIを変更する
これらを実現するには、設定された導線に遷移するだけでなく、インタラクティブな機能が必要です。
2023年6月にFigmaに追加されたバリアブル機能を使えば、実現できそうなことがわかりました。1つのツールで検証とUIの修正ができ、素早く検証を回すことができることが最終的な決め手となり、Figmaを検証ツールとして採用しました。
バリアブルを使ったプロトタイプの作成方法
今回プロトタイプで実現したいことは、
- 生年月日の入力
- 性別の入力
- 年収の入力
- すべての項目が入力されたら「送信」ボタンをアクティブにする
- 「送信」ボタンをタップしたら次の画面に遷移する
このような操作ができるプロトタイプを例に上げ、設定の手順を解説します。
プロトタイプ作成手順
バリアブルを使ったプロトタイプ作成の大まかな手順は下記の通りです。
- 静止画としての画面デザイン
- プロトタイプで実現したい操作のトリガーとアクションをまとめる
- 操作するオブジェクトを切り出す
- 動的な箇所や値をバリアブルとして登録
- デザインパーツにバリアブルを割り当てる
- プロトタイプを作成
手順の2〜6は人それぞれの進めやすい作成方法があると思うので、流動的になります。
バリアブルを使ったプロトタイプをまだ作成したことの無い方は、それぞれの手順を完璧に行うというより、おおまかに準備してプロトタイプを作り上げる過程で考慮が足りなかった手順を修正しながら進めるのがおすすめです。
1.静止画としての画面デザイン
まずは画面のUIデザインを決定します。このプロセスはプロトタイプを作成する・しないに関わらず発生するので、ここでの説明は割愛します。
2.プロトタイプで実現したい操作のトリガーとアクションをまとめる
今回のサンプルで実現したい操作は下記画像の通りです。
操作するグループ → トリガー → アクション で列を分けて書くと、この後のプロトタイプの設定がスムーズになります。
3.バリアントの設定とコンポーネント化
今回はこのようにオブジェクトを切り出しました。操作によって状態が変わるオブジェクトはコンポーネント化してバリアントを設定しています。
バリアントの設定
- On/Offを表現するボタン「select_button」
- 非活性状態のデフォルトプロパティに「false」を設定
- 活性状態のプロパティに「true」を設定
- 画面遷移用のボタン「send_button」
- 非活性状態のデフォルトプロパティに「false」を設定
- 活性状態のプロパティに「true」を設定
- Picker用テキスト
- 非表示状態のデフォルトプロパティに「false」を設定
- 表示状態のプロパティに「true」を設定
- Textfieldコンポーネント「input_anual-income」
- 未入力状態のデフォルトプロパティに「Inactive」を設定
- 入力中プロパティに「Filled」を設定
- 入力完了プロパティに「Comp」を設定
- Textfield用テキスト「textfield_value」
- 非活性状態のデフォルトプロパティに「false」を設定
- 活性状態のプロパティに「true」を設定
どのオブジェクトにどのコンポーネントを適用しているか捕捉します。
① ② ③：Picker用テキストの「picker_value」と名前をつけたコンポーネントを配置
④ ⑤：On / Offを表現する「select_button」コンポーネントのラベルに「男性」「女性」を指定
⑥：年収を入力するTextfieldコンポーネント「input_anual-income」を配置
⑦：画面遷移用のボタン「send_button」を配置
⑧：入力されている項目を監視し続けるコンポーネント「checker」を配置（実際は透過し見えない状態にしておく。）
4.動的な箇所や値をVariables（バリアブル）として登録
Variables（バリアブル）の登録は、オブジェクトを選択していない状態で、画面右側のプロパティパネルから行えます。
今回は上の画像のようにバリアブルを設定しました。
それぞれのバリアブルの利用用途を記載したので、参考にしていただければと思います。
5.デザインパーツにVariables（バリアブル）を割り当てる
パーツを選択した状態で、Figmaの画面右側のプロパティパネルでバリアブルを設定できます。
2で設計したアクションをもとに、4で登録したバリアントをパーツに割り当てます。
オブジェクトへのVariables（バリアブル）の設定
テキストへのVariables（バリアブル）の設定
実際のオブジェクトへのVariables（バリアブル）設定はこちら
赤枠・赤線部分にVariables（バリアブル）を設定しました。
文字が小さくて見にくい場合は画像を拡大してご確認ください。
6.プロトタイプを作成
ここから画面操作によるインタラクションやアクションを設定していきます。手順2で設計したトリガーとアクションを各オブジェクトに設定していきます。
また、プロトタイプの作成時にこれまでのステップの考慮漏れや設定漏れ等も吸収しながら進めていきます。
以下、各オブジェクトに設定したトリガーとアクションです。
生年月日の「年」のセレクトボックスの設定
- トリガー
- 生年月日の「年」のセレクトボックスをタップ
- アクション
- 「yyyy」のピッカーをオーバーレイ
生年月日の「月」のセレクトボックスの設定
- トリガー
- 生年月日の「月」セレクトボックスをタップ
- アクション
- 「mm」のピッカーをオーバーレイ
生年月日の「日」のセレクトボックスの設定
- トリガー
- 生年月日の「日」セレクトボックスをタップ
- アクション
- 「dd」のピッカーをオーバーレイ
「年」ピッカーの設定
- トリガー
- オーバーレイ時の「年」のピッカー「1980」をタップ
- アクション
- 「Value_yyyy」のバリアブルに「1980」の文字列を代入
- 「yyyy_text」のバリアブルを「true」に設定
- オーバーレイしている「年」のピッカーを閉じる
※ その他のyyyyにも同様の設定を適用する
「月」ピッカーの設定
- トリガー
- オーバーレイ時の「月」のピッカー「1」をタップ
- アクション
- 「Value_mm」のバリアブルに「1」の文字列を代入
- 「mm_text」のバリアブルを「true」に設定
- オーバーレイしている「月」のピッカーを閉じる
※ その他のmmにも同様の設定を適用する
「日」ピッカーの設定
- トリガー
- オーバーレイ時の「日」のピッカー「1」をタップ
- アクション
- 「Value_dd」のバリアブルに「1」の文字列を代入
- 「dd_text」のバリアブルを「true」に設定
- オーバーレイしている「日」のピッカーを閉じる
※ その他のddにも同様の設定を適用する
性別「男性」の設定
- トリガー
- 性別の「男性」をタップ
- アクション
- 「male」のバリアブルを「true」に設定
- 「female」のバリアブルを「false」に設定
性別「女性」の設定
- トリガー
- 性別の「女性」をタップ
- アクション
- 「female」のバリアブルを「true」に設定
- 「male」のバリアブルを「false」に設定
年収テキストフィールドの設定
- トリガー
- 年収のテキストフィールドをタップ
- アクション
- キーボードがオーバーレイで画面下からスライドインしてくる
- Textfieldコンポーネント「input_anual-income」を入力中「Filled」の状態にする
年収入力のキーボード「1〜9」キーの設定
- トリガー
- オーバーレイ時のキーボード1〜9の数字キーをタップする
- アクション
- 桁数をカウントするバリアブル「Num_anual-income」に1を加算
- テキストフィールドの文字列末尾に、タップした数字を文字列として入力する
- 桁数をカウントするバリアブル「Num_anual-income」が4以下の場合
- 0キーは1桁以上4桁未満でテキストフィールドに数字が反映される
※1〜9のキーに同様の設定をする
年収入力のキーボード「0」キーの設定
- トリガー
- オーバーレイ時のキーボード0の数字キーをタップする
- アクション
- 桁数をカウントするバリアブル「Num_anual-income」に1を加算
- テキストフィールドの文字列末尾に0を文字列として入力する
- 桁数をカウントするバリアブル「Num_anual-income」が1〜4の場合（1桁目に0を入力させないため）
if条件分岐の詳細
年収入力のキーボード「削除」キーの設定
- トリガー
- オーバーレイ時のキーボードの削除キーをタップする
- アクション
- テキストフィールドの数字を削除する
- 桁数のカウントをゼロにする
年収入力のキーボード「完了」ボタンの設定
- トリガー
- オーバーレイ時のキーボードの完了ボタンをタップする
- アクション
- Textfieldコンポーネント「input_anual-income」を完了「Comp」の状態にする
- キーボードのオーバーレイを削除
入力項目すべてに入力されているか監視するオブジェクトの設定
- トリガー
- オブジェクトが表示されてから100ms（ミリ秒）後
- アクション
- 生年月日の年「yyyy_text」が「true」か
- 生年月日の月「mm_text」が「true」か
- 生年月日の日「dd_text」が「true」か
- 性別の男性「male」 or 女性「female」 が「true」か
- 年収「input_anual-income」がデフォルト値「Inactive」ではないか
- 上記の条件を監視し続けることが可能になる
- 下記の条件をすべて満たしている場合、次の画面に遷移するボタン「send_button」を「true」にする
- 条件を満たしていない場合は、「send_button」を「false」にする
- バリアントプロパティ「Variant1」と「Variant2」に上記を設定し、「Variant1」と「Variant2」切り替え続ける
if条件分岐の詳細
「送信」ボタン タップ時の設定
- トリガー
- 次の画面に遷移するボタン「send_button」をタップ
- アクション
- 次の画面へ遷移する
- 次の画面に遷移するボタン「send_button」が「true」の場合
以上がバリアブルを使ったプロトタイプの設定です。
導入のメリット・デメリット
ユーザビリティテストを終えて振り返った中で、導入メリットと今後の改善点が見えてきたのでまとめます。
メリット
深度のあるフィードバック
実際のプロダクトに近い操作性を提供して得られたフィードバックは、「なんとなく使いづらい」でなく、「この入力のこの挙動が使いづらい」のような深度のあるフィードバックを得ることに繋がり、精度の高い改善を行うことができます。
プロダクトに対する認識合わせ
プロトタイプで細かな動きまで再現することで、関係者間での認識のズレをなくすことができます。実装フェーズでの手戻りを防げるため、開発コストの削減が期待できます。
デメリット
学習コスト
バリアブルは機能の概念や使い方、運用方法などの理解が必要です。画面のデザインをするのとは異なる知識が求められるため、初めてバリアブルを利用する時には学習の時間と労力がかかります。
まとめ
この記事では、Figmaのバリアブルを使用して実際のプロダクトに近いプロトタイプを作成する方法を紹介しました。
このプロトタイプは、ユーザビリティテストで深度の高いフィードバックを得られたり、プロダクトに対しチーム内での認識齟齬を軽減させるといった利点があります。その一方で、バリアブルの学習コストがデメリットとして挙げられますが、その知識を得ることでデザイナーはより精度の高いプロトタイプを作成できるようになります。
是非、みなさまのプロダクト開発においてもこれらの機能を活かし、ユーザーにとって価値あるプロダクトを開発する一助となれたら幸いです。
明日は、バックエンドエンジニア 冨里 の「複雑な業務フローと、開発・テストの利便性を両立するための取り組み」です！
お楽しみに！
📣 ウェルスナビは一緒に働く仲間を募集しています 📣
著者プロフィール
匂坂 徹 (さぎさか とおる)
UI/UXデザイナー
学生の頃からデザイナーとしてのキャリアを歩み始め、複数の事業会社でデザイナーとして従事し、UI/UXデザインをメインに、Webデザイン、マークアップ、A/Bテスト、SEO対策など幅広く経験。
2018年ウェルスナビにJoin。金融の持つ「難しそう」「めんどくさそう」というイメージをデザインの力で解決すべく日々奮闘中。
Discussion