バリアブルを使ってモックアップ作成 -ラジオボタン-
バリアブルを使用してモックアップを作成する練習をします。まずは簡単なラジオボタンを作成してみます。
1.ラジオボタンのコンポーネントを作成する
バリアントで選択されている状態と選択されていない状態のラジオボタンを作成します。
選択された状態→「true」
選択されていない状態→「false」
と値を設定します。
2.バリアブルを作成し、値を保存する
バリアブル作成のボタンをクリックし、「ブーリアン」を選択します。名前をラジオボタンにし、トグルボタンの初期値をfalseに設定します。
モックアップに使うラジオボタンの個数のバリアントを作成してください。私はこの練習では6個配置しました。
3.バリアブルを割り当てる
先ほど並べたラジオボタンを選択し、右サイドナビの六角形のアイコンをクリックすると設定したバリアブルが選択できるのでそれぞれ割り当てます。
4.ラジオボタンにクリックイベントを設定する
ラジオボタンの特性として、複数あるうちの1つしか選択できないというものがあります。
「任意のラジオボタンを選択（クリック）すると、他のものがfalseになる」という状態を作っていきます。
プロトタイプモードに変更する
右サイドナビのインタラクションを設定します。
「バリアブルを設定」を選択し、クリックされたボタン以外ををfalseに設定してください。
次に選択したときにラジオボタンがtrueになるようにしたいので、「次に変更」を選択してプロパティのトグルをtrueにしてください。
この設定をそれぞれのボタンに反映します。
完成しました！
感想
少しの工夫で実現度の高いモックアップが作成できるバリアブル機能。まだまだ奥が深いのでもう少し勉強して使いこなせるようになりたいです。
よろしければサポートお願いいたします。