こんにちは！エモーションテックで UX エンジニアをしている高橋（@fusho_takahashi）です。 今回はFigmaのプロトタイプ機能を活用して、以下のようなフォームを実現する方法をご紹介します。
このフォームはユーザーの趣味や興味のある分野について尋ねる内容になっています。質問形式はラジオボタンを使用した単一選択式で、提示された選択肢に該当する項目がない場合は「その他」を選択し、自由記入欄に具体的な趣味を記入できるようにしています。
仕様
1. 基本動作
- 単一選択式: 選択肢のいずれか1つのみ選択可能
- 既に選択されている場合、新しい選択肢を選ぶと前の選択が自動的に解除される
2. 入力欄の表示条件
- 初期状態: ラジオボタンの選択肢のみが表示され、テキスト入力欄は非表示
- 「その他」を選択
- テキスト入力欄を表示
- 入力欄は自由記入が可能
- 「その他」以外を選択
- 入力欄は非表示になるが、入力内容は保持される
3. 必須条件
- ラジオボタンの選択が必須
- 「その他」を選択した場合
- 入力欄への入力も必須
4. フォーム送信
- 送信ボタンを押すと、以下の動作を行う
- オーバーレイ表示で「回答ありがとうございます！」とメッセージを表示
準備
画像のように各パーツの component を作成します。
| component 名 | プロパティ 1（型） | プロパティ 2（型） |
|---|---|---|
| ラジオボタン | select（ブール値） | option（テキスト） |
| 送信ボタン | disabled（ブール値） | |
| 入力 | inputed（ブール値） | text（テキスト） |
component が作成できたら、プロトコルの開始点となるフレームで質問とラジオボタン・送信ボタンをいい感じで並べておきます。
プロトタイプ設定
ローカルバリアブル
まずはじめにプロトタイプに必要なローカルバリアブルを設定しておきます。
以下を設定しました。
- それぞれのラジオボタンに対応したブール値
- その他が選ばれたときのテキスト
- フォームがまだ送信できない状態であることを示すブール値
最後のブール値は逆の状態を持ったほうが分かりやすいのですが、送信ボタンの disabled プロパティにバリアブルを紐づけたいのでこのように設定しています。紐づけるときにブール値反転できる機能が欲しいところです。
ラジオボタン
各ラジオボタンの selected プロパティに、対応するバリアブルを設定します。
そしてプロトタイプのインタラクションを以下のように設定します。
「既に選択されている場合、新しい選択肢を選ぶと前の選択が自動的に解除される」という仕様を実現するため、クリック時に以下のようにバリアブルを変更します。
ちなみにインタラクションはコピー&ペーストが可能なので、1 つ設定したら他のラジオボタンにコピー&ペーストして、設定箇所に合わせてブール値を変更しましょう。
これでラジオボタンの完成です。
「その他」入力欄
続いてその他を選択した場合に、入力欄を出現させます。
テキスト入力 component を「その他」選択肢の下に配置し、デザインメニューの「外見」の目のアイコンを右クリックしましょう。
なんと！バリアブルを紐づけるメニューが出現します！（ちなみに私はこのメニューに全然気付けず、少し前まで component を作って表示非表示を切り替えていました汗）
こちらで「その他」のブール値を指定して、「その他」が選択されたときのみ表示されるようにしましょう。
プロトタイプで文字入力を実現するのはかなり大変なので、今回は入力欄をクリックすると入力が完了するよう設定します。
送信ボタン
最後に送信ボタンです。invalid バリアブルが false のときのみ機能して欲しいので、クリック時に条件付きアクションを設定する必要があります。
ここで回答送信後フォームを指定して、設定は完了です！
おわりに
ラジオボタンと文字入力欄を組み合わせたプロトタイプを無事に作成することができました！
最近、Figmaのプロトタイピング機能を使う機会が増えてきたのですが、Figmaでは複雑な条件設定は難しいものの、シンプルな条件をうまく組み合わせることで、多様なパターンに対応できる点が本当に素晴らしいと感じています。
今後もノウハウを蓄積しながら、さらに便利なテクニックやアイデアが見つかったら共有していこうと思います！
エモーションテックでは顧客体験、従業員体験の改善をサポートし、世の中の体験を変えるプロダクトを開発しています。 プロダクトに興味のある方、UI / UX 改善に興味のある方、ぜひ採用ページからご応募をお願いいたします。
