選択した方向から流れるように切り替わるリストのカルーセル（Figma）

今回の記事では、選択した方向から流れるように切り替わるリストのカルーセルをプロトタイプ上で再現する方法を記載します。

実際の挙動

選択した方向からリストの各アイテムが切り替わります。

作成方法

リストの全アイテムに1枚のダミーを加え、『コンポーネントセットを作成』からまとめてコンポーネント化します。
今回は5枚の画像を3回に分けて表示させるので、5×3＋1の16バリアントを含むコンポーネントになります。

コンポーネント作成後

ダミーバリアントのインスタンスを1度に表示させる枚数＋追加1枚分作成し、『コンポーネントセットを作成』からまとめてコンポーネント化します。

コンポーネントセットを作成

追加した1個以外のバリアントを透明度0%にします。

透明度0%にしたバリアントから残した透明度100%のバリアントへ、『アフターディレイ』のプロトタイプを設定します。
所要時間には【アニメーション時間】÷【一度に表示する枚数】の時間を設定します。
また、切り替えを流れるようなアニメーションにするため、所要時間分の遅延（ディレイ）をかけます。
今回は総アニメーション時間を300msにしたいので、各所要時間を60msにして遅延を1ms→60ms→120ms→180ms→240msに設定します。
遅延の最小が1msなので最初のプロトタイプのみ所要時間に1ms-60msの59msを設定しています。

透明度100%のバリアントのインスタンスを作成し、リストのアイテムの方のプロパティを画像に切り替えます。

先ほどの操作を全アイテム分繰り返し、表示回数分に分けてグループ化します。

グループを重ねてフレームに配置します。
フレーム内には前後に移動するためのボタンを配置します。
好みで現在表示中のリストを表すステップ表記を追加します。

次に表示するリストを切り替え中のフレームと切り替えた後のフレームを作成します。
この際、切り替えた後のフレームが最前面になるように設定し、切り替える間のフレームではインスタンスのプロパティを各遅延用に変更します。
今回は進むときには右から左へ流したいので、240ms→180ms→120ms→60ms→1msの遅延順で並べています。

上記の作業を繰り返して下画像のような状態にします。
下2つのフレームは戻り切り替え中のフレームなので、先ほどの遅延順とは逆に1ms→60ms→120ms→180ms→240msで並べています。

前後ボタンから切り替え中のフレームへと『クリック時』『即時』のプロトタイプを設定します。

切り替え中から切り替え後のフレームへと『アフターディレイ』のプロトタイプを設定します。
この際、『遅延』には総アニメーション時間を設定します（今回は300ms）。

あとはプレビュー確認し問題なく動けば完成です。
画像読み込みに多少時間がかかる場合があるので、その際は何度か切り替えしてみてください。

まとめ

以上、選択した方向から流れるように切り替わるリストのカルーセルをプロトタイプ上で再現する方法でした。