Figmaのプロトタイピング機能を活用すれば、画面遷移やアニメーションを取り入れたインタラクションを簡単に作成できます。しかし、例えばアンケートの回答画面のUIのように、ユーザーの操作によって表示内容が分岐するプロトタイプを作るのは大変だと感じたことはありませんか？
そこで鍵となるのがバリアブル（Variables）機能です。デザインシステムの管理に用いられることが多いバリアブルですが、プロトタイピングに活用することで、より柔軟で高度なインタラクションを実現できます。
本記事では、Figmaのバリアブルを活用して、以下の2つのプロトタイプを作成する方法を解説します。
- 押すたびに数量が増えるステッパー*のプロトタイプ
*ステッパー（Stepper）は、ナンバーインプット（Number Input）、ナンバーフィールド（Number Field）と呼ばれることもあります。
- 保存する前に「終了する」ボタンを押した場合のみ、確認ダイアログが表示される入力フォームのプロトタイプ
このテクニックを習得することで、表現できるインタラクションの幅が広がり、より実践的なプロトタイプが作れるようになります。
それでは、具体的な手順を見ていきましょう！
バリアブルの基本
本題に入る前に、まずはFigmaの「バリアブル」について理解を深めておきましょう。ここでは、バリアブルの基本的な概要と作成方法について解説します。
バリアブルとは？
バリアブル（Variables）は、Figmaにおける「値を保存・操作できる仕組み」です。テキストやカラー、数値などのデータを保持し、それをデザインやプロトタイプの中で動的に変更できます。
プロトタイピングの文脈では、バリアブルを使うことでユーザーの操作に応じて分岐するインタラクションを実現できます。たとえば、次のようなシナリオが可能になります。
- ステッパーの値を、ボタンを押すたびに増減させる
- 選択した内容に応じて表示するコンテンツを切り替える
- フォームの入力状況に応じてボタンの有効 / 無効を切り替える
従来のプロトタイプでは、状態ごとに画面を分けて遷移させる必要がありましたが、バリアブルを活用することで1つの画面で状態を管理できるようになります。
バリアブルの作成方法
それでは、実際にFigmaでバリアブルを作成する手順を見ていきましょう。
1. 「Variables」パネルを開く
- Figmaの右側のプロパティパネルから「Variables」タブを開きます。
2. 新しいバリアブルを作成する
- 「Create variable（バリアブルを作成）」をクリックします。
- バリアブルには「数値（Number）」「文字列（String）」「カラー（Color）」「ブール値（Boolean）」の4種類があり、用途に応じて選択できます。
3. バリアブルのグループ化（任意）
- 複数のバリアブルをまとめて管理するために、「Collection（コレクション）」 を作成できます。
- 例えば、ステッパーの数値を管理するための「Counter Variables」や、フォームの状態を管理するための「Form State」など、使用箇所に応じた名前をつけて整理すると便利です。
4. バリアブルの初期値を設定する
- 例えば、ステッパーを作成する場合なら、種類はNumberを選択します。ここでは「Counter」という名称でバリアブルを作成し、初期値を0に設定します。
5. バリアブルをプロトタイプに適用する
- 作成したバリアブルは、テキストやコンポーネントのプロパティの値にバインド（紐付け）することで、デザインに反映できます。
- 例えば、ステッパーの場合は、表示する数値のテキストレイヤーを選択しCounterのバリアブルにバインドします。
- これによって、プロトタイプとして表示された際に、Counterに紐付けられたテキストレイヤーでは最初に「0」という数値が表示されます。
これでバリアブルの作成〜紐付けが完了しました。次のセクションでは、実際にバリアブルを活用して動的なステッパーや入力フォームのプロトタイプを作成する手順を詳しく解説していきます。
プロトタイプでバリアブルを使用する方法
バリアブルを使うと、条件分岐に対応したより柔軟でリアルなプロトタイプを作成できます。
通常、Figmaのプロトタイピングでは、1つのトリガーには1つの遷移先しか設定できません。そのため、基本的な動作としては「このボタンを押すとこの画面に遷移する」という、あらかじめ決められたシナリオに沿った遷移しか実現できません。例えば、ステッパーを作りたい場合、数値ごとに別の画面を用意しなければならず、管理が煩雑になります。
しかしバリアブルを使うことで、「このボタンが押されるたびに表示する数値を増やす」「XXをした後にこのボタンを押した場合のみ、YYな動きをする」といった条件付けを行うことが可能になります。
これにより、Figmaのプロトタイプは単なる画面遷移のシミュレーションを超え、よりインタラクティブで実際のアプリやWebサービスに近い体験を再現できるようになります。特に、フォーム入力や設定変更などのシナリオをプロトタイプ内で表現したい場合には、バリアブルを活用することで、ユーザーの行動に応じた自然なインタラクションを設計できます。
基本編：押すたびに数量が増えるステッパー
まずは、押すたびに数量が増えるステッパーのプロトタイプを作成してみましょう。この仕組みを実現することで、ショッピングアプリで商品をカートに追加する時のフローをシミュレーションできます。
1. フォームを作成
ステッパーを構成する「＋」「ー」のボタンと数値を表示するフォームを作成します。
2. バリアブルを設定
次に、ステッパーの値を管理するためのバリアブルを設定します。
- Figmaの「Local Variables」パネルを開き、新しいバリアブルを作成しましょう。
- 種類はNumber、名前は任意（ここでは「Num」）、初期値は「0」に設定します。
3. ステッパーのプロトタイプ設定
作成した「Num」バリアブルを、ステッパーの数値部分にバインドし、現在の値として表示されるように設定します。
次に、「＋」「ー」のボタンにインタラクションを追加します。
- トリガー：On Click（クリック時）
- アクション：Set Variable（バリアブルを設定する）
- 対象のバリアブル：「Num」
- 値の設定：
- 「＋」ボタンを押したときは Num + 1
- 「ー」ボタンを押したときは Num – 1
この設定により、ボタンがクリックされるたびに「Num」の値が増減し、それに応じてステッパーの表示も変化します。言い換えれば、「クリックされるたびにバリアブル（Num）を更新し、+1または-1せよ」 という命令をFigmaに与えていることになります。
これで、ユーザーの操作に応じて数値が変化するステッパーのプロトタイプが完成しました。
こうした動的なインタラクションが再現できることで、実際の操作感をよりリアルに体感できます。 たとえば、ユーザビリティテストの際にユーザーがボタンを押したときのフィードバックや流れを自然な形で検証できるため、より実際の使用シーンに近い形で評価を行うことが可能になります。
また、クライアントやエンジニアと共有する場面でも、画面が静的なままのプロトタイプよりも具体的な動きや挙動が伝わりやすくなり、認識のズレを減らす効果も期待できます。「実装したらどうなるのか」のイメージが解像度高く共有できることで、プロジェクト全体のコミュニケーションも円滑になります。
応用編：条件に応じた確認ダイアログの出し分け
次は、条件に応じてダイアログの出し分けを行う入力フォームのプロトタイプを作成してみましょう。
- 「保存する」を押す前に「終了する」を押した場合 → 「編集内容を保存しますか？」という確認ダイアログを表示
- 「保存する」を押した後に「終了する」を押した場合 → そのまま完了画面に遷移
この仕組みを実現することで、よりリアルなユーザー体験をシミュレーションできます。
1. ボタンとバリアブルの準備
まず、「保存する」ボタンと「終了する」ボタンを作成します。次に、「保存ボタンが押されたかどうか」を記録するバリアブルを設定します。
- Figmaの「Local Variables」パネルを開く
- 新しいバリアブルを作成
- 種類：Number（数値）
- 名称：任意（ここでは「PressedSaveButton」）
- 初期値：0（つまり、まだ保存ボタンが一度も押されていない状態）
このバリアブルは、保存ボタンがクリックされた回数を記録する役割を果たします。
2. 保存ボタンのプロトタイプ設定
「保存する」ボタンをクリックしたら、バリアブルの値が増えるように設定します。
- トリガー：On Click（クリック時）
- アクション：Set Variable（バリアブルを設定する）
- 対象のバリアブル：「PressedSaveButton」
- 値の設定：PressedSaveButton + 1
つまり、「保存する」ボタンがクリックされるたびにPressedSaveButton の値が+1される仕組みです。
3. 終了ボタンのプロトタイプ設定（条件分岐）
次に、「終了する」ボタンを押したときの挙動を条件分岐で設定します。
- トリガー：On Click（クリック時）
- アクション：Conditional（条件分岐による）
- 条件設定：
- PressedSaveButton = 0、つまり「保存する」ボタンが一度も押されていない場合 → 確認ダイアログを表示
- 上記以外の場合 → 完了画面へ遷移
具体的な設定手順は以下のとおりです。
- 「終了する」ボタンのアクションを Conditional に設定
- 条件として「PressedSaveButton」を選択
- 条件式のオプション一覧から equal to（=） を選び、値を 0 に設定
- 条件に応じたアクションを設定
- if PressedSaveButton = 0（「保存」ボタンが一度も押されていない）：確認ダイアログを表示
- else（「保存する」ボタンが押された後）：完了画面に遷移
4. 動作の確認
この設定により、ユーザーが 「保存する」ボタンを押していない状態で「終了する」ボタンを押すと、「編集内容を保存せずに終了するか」を確認するダイアログが表示されるようになります。一方で、「保存する」ボタンが押された後であれば、そのまま完了画面に遷移する仕様になりました。
こうした動的なプロトタイプを用意しておくと、エンジニアやクライアントとのすり合わせが格段にスムーズになります。通常のプロトタイプでは、細かな条件分岐や例外パターンを口頭で補足する必要がありますが、実際の動きをそのまま見せられることで説明の手間が減り、誤解も防げます。
また、複雑な分岐や例外処理の動作確認も1つのファイル内で完結できるのも大きなメリットです。説明用のドキュメントや画面を大量に作成したりする手間が省けるため、よりスムーズなコミュニケーションや制作フローの効率化にもつながります。ぜひ活用してみてください！
まとめ
数値や条件式が出てくると、少し複雑に感じる方も多いでしょう。しかし、仕組みさえ理解してしまえば、それほど難しくはありません。バリアブルを使うことで、これまで画面ごとに作成していたプロトタイプを、より効率的に、かつ柔軟に管理できるようになります。
今回使用した「On Click」以外にも、Figmaのトリガーには 「Key/Gamepad」 などがあり、これとバリアブルを組み合わせることで、ユーザーが入力した値をプロトタイプ上に疑似的に表示することも可能です。例えば、入力フィールドを作成し、特定のキーを押すたびにバリアブルの値を変更することで、実際に自分が画面上のキーボードを押して入力した内容がプロトタイプ上に反映されるような挙動も再現できます。
私自身はまだプロジェクトでバリアブルを使うケースはそこまで多くないものの、条件分岐が重要なプロダクトでぜひ活用したいと感じています。
バリアブルを活用することで、Figmaのプロトタイピングの幅は格段に広がります。よりリアルで自由な動的プロトタイプを作成できるので、ぜひ試してみてください！
Figmaプロトタイプで複雑なインタラクションを再現する方法を他にも紹介しています。こちらもぜひ参考にしてみてください！
＞ Figmaプロトタイプで、「スクロールすると見た目が変わるヘッダー」を再現する【中級〜上級者向け】
アイスリーデザインでは、アプリやWebサービスなどのデザイン支援を行っております。新しいプロダクトやサービスの立ち上げ、改善に関するご相談やUIレビューのご依頼は、ぜひこちらからお気軽にお問い合わせください。
