Figmaでルーレットを再現する（Figma）

今回の記事では、Figmaプロトタイプ上でのルーレットの再現方法を記載します。

なお、Xdでの方法は以下の記事に記載しています。

実際の挙動

『開始』ボタンを押下するとルーレットが回転し、『停止』ボタンを押下すると徐々に遅くなり停止します。
『もう一度』ボタンを押下すると回転が再開します。

ルーレットの作成方法

画面の作成

①任意のマスを入れたルーレットとマス目を指す▼、回転を開始させるトリガーとなるボタンを配置した画面を作成します。
また、停止後の結果表示のために下画像の『ルーレット』部分を配置しています。

②先ほどのアートボードを複製します（複製後のアートボードは回転中のものになります）。
複製したアートボードのボタンは停止用になるため、下画像では『停止』としています。
また、わかりやすいように『回転中』と表示しています。

③先ほどの回転中アートボードを複製し、1マス分ルーレットを回します（下画像では【360÷4】＝90度分）。
　それをマス数分繰り返します。
　今回は4マスあるので、回転中の画面は4つになります。
　この画面はルーレット回転中の画面になります。

④回転中の画面を複製して、『停止』ボタンを押してからルーレットは停止するまでのアニメーション用画面を作成します。

ここではボタンを押してから停止させるまでのディレイ分の画面を作成します。
今回の場合は2マス分ズラしたいので、0・1・2の計3画面分作成となります

アニメーション用の画面にはわかりやすいように『停止中』と表示し、『停止』ボタンを非活性にしています。

⑤停止中の画面を同数複製します。
　この画面はルーレット停止後の画面になります。

ルーレット停止後の結果として、止まったマス目に応じた結果を表示します。
また、ボタン部分をルーレット再開用に『もう一度』などの文言に変更します。

プロトタイプの設定

①最初のアートボードの『開始』ボタンから、回転中の最初のアートボードへ、『クリック時』トリガー・『即時』のプロトタイプをつなぎます。

②回転中の各画面から次のマスの画面へと『アフターディレイ（1ms）』トリガー・『スマートアニメート』のプロトタイプを繋ぎます。
　今回の場合は1→2、2→3、3→4、4→1といった順番で繋いでいます。
 　また、『スマートアニメート』の秒数部分（下画像では50ms）は回転中ルーレットの回転速度に関係します。

③回転中画面の『ボタン』から停止中の画面1へと『クリック時』トリガー・『即時』のプロトタイプを繋ぎます。

④停止中の各画面から次のマス目へのアニメーション用画面へと『アフターディレイ』トリガー・『スマートアニメート』プロトタイプを繋ぎます。

この際、止まるまでに徐々に遅くなるために、段階ごとにアニメーションの秒数を増やします。
今回は1000ms→2000msと増やしています。

また、『カスタムベジエ（下画像で『カスタム』の部分）』かつ『0,0,1,1』を設定することでアニメーションがスムーズになります。

⑤停止中の最後の画面から停止後の画面へと『アフターディレイ』トリガー・『即時』のプロトタイプを繋ぎます。

⑥停止後の画面内『もう一度』ボタンから回転中画面へと『クリック時』トリガー・『即時』のプロトタイプを繋ぎます。
これで確認し、問題なく動けばルーレット完成です。

まとめ

以上、Figmaプロトタイプ上でのルーレットの再現方法でした。