【解説】Figmaのアニメーションでスライダー付きカルーセルを作る
こんにちは。
今回はFigmaのアニメーションでのスライダー付きカルーセルの作り方を共有します。なかなかカルーセルの作り方が見つからず苦戦したので、Figmaでプロトタイプ機能を使うときにぜひ参考にしてください。
↓完成形
①パーツを作成する
入れ替わる画像3点と現在位置を示すボタンと左右移動用のボタンを用意します。今回は3個の画像が交互に入れ替わることを想定しています。
②Frameにパーツを配置する
3枚分のFrameを作り、画像とボタンを配置します。現在位置を示すボタンはそれぞれ順番に色を変えます。
③自動で画像が切り替わるアニメーションをつける
Prototype機能でCarousel - 1というフレームからCarousel - 2というフレームに繋げます。そしてInteractionsを追加して、After delayを3000ms〜4000msで設定します。Navigate toでCarousel - 2を選択します。
AnimationはSlide inで←（左）を選択して、Smart animateにチェックを入れたらOKです。他のCarousel - 2やCarousel -3も同じように設定してください。
これで画像が自動で切り替わるアニメーションが出来ました。
④矢印ボタンで左右移動するアニメーションをつける
Prototype機能でCarousel -1 の右矢印ボタンから、Carousel - 2に繋げます。そしてInteractionsを追加して、On clickを選び、Navigate toでCarousel - 2に設定します。AnimationはPushで←（左）を選択します。最後にSmart animateにチェックを入れたらOKです。
他の左右移動用ボタンも同じように設定してください。Pushの矢印の向きを使い分けるとそれっぽい動きになります。
完成！
参考サイト
この記事が気に入ったらサポートをしてみませんか？