![見出し画像](https://assets.st-note.com/production/uploads/images/80998252/rectangle_large_type_2_91dc91f10ca91a91971433d851b7b82a.png?width=1200)
【解説】Figmaのアニメーションでスライダー付きカルーセルを作る
こんにちは。
今回はFigmaのアニメーションでのスライダー付きカルーセルの作り方を共有します。なかなかカルーセルの作り方が見つからず苦戦したので、Figmaでプロトタイプ機能を使うときにぜひ参考にしてください。
↓完成形
![](https://assets.st-note.com/production/uploads/images/131774601/picture_pc_57284b0e2d849d81a019a184b39f45b5.gif)
①パーツを作成する
入れ替わる画像3点と現在位置を示すボタンと左右移動用のボタンを用意します。今回は3個の画像が交互に入れ替わることを想定しています。
![スクリーンショット 2022-06-12 16.58.18](https://assets.st-note.com/production/uploads/images/80523261/picture_pc_26f906e22d4f78dfbb0798fbfd71381e.png?width=1200)
![スクリーンショット 2022-06-12 0.48.28](https://assets.st-note.com/production/uploads/images/80482821/picture_pc_04762f6a5c0f8bec912d12430f766528.png?width=1200)
![スクリーンショット 2022-06-12 15.39.51](https://assets.st-note.com/production/uploads/images/80517941/picture_pc_a33290de034371b93db506c7c713da11.png?width=1200)
②Frameにパーツを配置する
3枚分のFrameを作り、画像とボタンを配置します。現在位置を示すボタンはそれぞれ順番に色を変えます。
![スクリーンショット 2022-06-12 1.15.43](https://assets.st-note.com/production/uploads/images/80483906/picture_pc_f24af34dec31bd20caef47fae9e737ac.png?width=1200)
③自動で画像が切り替わるアニメーションをつける
![画像7](https://assets.st-note.com/production/uploads/images/80521755/picture_pc_dacf65c42d61285eed6172efa3b59e99.png?width=1200)
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の矢印の向きを使い分けるとそれっぽい動きになります。
![画像7](https://assets.st-note.com/production/uploads/images/80522124/picture_pc_5f8d919344bdcfe2c8108beb3e1018eb.png?width=1200)
完成!
![](https://assets.st-note.com/production/uploads/images/80526947/picture_pc_73f38baba4fb4804e19d4997b0a3be87.gif)
参考サイト
この記事が気に入ったらサポートをしてみませんか?