こんにちは。
クライマー、デザイナーのNです。
今回はfigmaでふわっと切り替わるスライドショーの設定方法を備忘録です。

①アートボードを３つ制作する

それぞれスライドしたい画像を入れます。

②「プロトタイプ／prototype」に切り替えて、スライドしたい順に繋げます。

３番目は１番目と繋げるとループするようになります。

③「インタラクション詳細／interaction details」の設定をします。

• 「遅延／after delay」と「画面推移／Navigate to」を選択・・・・・・アクションせずとも変化させるための設定です。
• 数値を「3000ms」に設定・・・・・・・・画面が切り替わる速度を設定します。
• 「ディゾルプ／ Dissolve」「イーズアウト／Ease out」を選択・・ふわっと画像が切り替わる時のアニメーションの設定です。
• 数値を「900ms」に設定・・・・・・・・ふわっとする速度の設定です。

この設定を繋いだもの全てにします。
ちなみに「インタラクション詳細／interaction details」の「遅延／after delay」はフレーム同士の移動でないと選択できません。

④プレビューで確認して、完成！

簡単な設定でここまで動いてくれるfigmaすごいですね！

クライマーでは一緒に働いてくれる仲間を募集しています！
詳しくは下記バナーよりご確認ください。