デザイン
2022.07.22

figmaでふわっと切り替わるスライドショーを作る方法

こんにちは。 
クライマー、デザイナーのNです。 
今回はfigmaでふわっと切り替わるスライドショーの設定方法を備忘録です。
 
①アートボードを3つ制作する
それぞれスライドしたい画像を入れます。
②「プロトタイプ/prototype」に切り替えて、スライドしたい順に繋げます。
3番目は1番目と繋げるとループするようになります。
③「インタラクション詳細/interaction details」の設定をします。
・「遅延/after delay」と「画面推移/Navigate to」を選択・・・・・・アクションせずとも変化させるための設定です。
・数値を「3000ms」に設定・・・・・・・・画面が切り替わる速度を設定します。
・「ディゾルプ/ Dissolve」「イーズアウト/Ease out」を選択・・ふわっと画像が切り替わる時のアニメーションの設定です。
・数値を「900ms」に設定・・・・・・・・ふわっとする速度の設定です。
この設定を繋いだもの全てにします。
ちなみに「インタラクション詳細/interaction details」の「遅延/after delay」はフレーム同士の移動でないと選択できません。
④プレビューで確認して、完成!
簡単な設定でここまで動いてくれるfigmaすごいですね!
クライマーでは一緒に働いてくれる仲間を募集しています!
詳しくは下記バナーよりご確認ください。

この記事を書いた人

N
N

デザイナーのNです。 よろしくお願いします。

この記事をシェアする

おすすめ記事

Service

クライマーで提供しているサービス

お問い合わせは、
こちらから
お気軽にどうぞ。

Please feel free to ask me.