BLOG
ブログ
2024年4月22日
【Figma初心者】Figmaのプロトタイプを使ってスクロールアニメーションを作成してみた【パララックス】
Figma初心者の私がプロトタイプを使ってアニメーションを作成してみました。（プラグイン未使用）
プロトタイプを使用する事で簡単にページ遷移の確認ができたり、動きのイメージを作成することができます。
私が今回作成したアニメーションはパララックスです。
パララックスとは日本語で「視差効果」のことを指し、
スクロールに合わせて要素を動かす事でサイトに立体感を持たせることができる演出効果です。
Figma初心者ですが、ルールを理解すればとても簡単にパララックスを再現する事ができたので是非実践してみてください。
この記事を見ながら一緒に手を動かしていただくとより分かりやすいかもしれません。
【完成プレビュー】
目次
デザインを用意（下準備）
全体の構造を分かりやすくするために全体のデザインを用意します。（架空のWebサイト）
1〜4の順に効果を付けていきます。
基本的にはスクロールで変化させたい要素をアートボードごとに作っていくイメージです。
今回参考にしたYoutubeのチュートリアルはこちら。
【ページ遷移】ローディング画面→ファーストビジュアル（以下FV）
ローディング画面を用意します。この時にローディング画像の下にはファーストビジュアルを置いておいてください。
【POINT】ページ同士は繋がっているので2で表示されている画像が1にないとスムーズに表示されません。（スクロールしたらいきなりFV画像がバンって表示されるイメージ）
最初はこのルールがうまく理解できず手こずりました、、。
ページ遷移の設定は以下。
[時間差(after delay)]→[スマートアニメート][ゆっくり(slow)]
【ページ遷移】FV→ビジョン
スクロールをしたら、
１ FVの背景画像にぼかしがかかる
２ FVのテキストが上に行き消える
３ 次のセクションが出てくる
という効果をつけます。（効果の付け方の説明は省きます）
ページ遷移の設定は以下。
[On drag]→[スマートアニメート][ゆっくり(slow)]（以下ページ遷移の設定は同じです）
ビジョン（全画面）
ビジョンが全画面にくる
【ページ遷移】ビジョン→ソリューション
スクロールをしたら
１ ビジョンの中身の要素がスクロールに合わせて上に行く
２ ソリューションのセクションが出てくる
ソリューション（全画面）
ソリューションのセクションが全画面にくる
まとめ
とにかくfigmaでパララックスを表現する上で大切なのは
「ページ（フレーム）の繋がりを意識する（変化する前と後）」
事です。
また、パララックスを作成する際は要素のopacityを0にする事も多々出てくるので、レイヤーに名前を付けると分かりやすいです。
さいごに
プロトタイプでアニメーションを作成すると言葉や参考サイトなどでは伝えきれない動きを表現する事ができるのでおすすめです。
Figma初心者の私でも作成する事ができたので是非参考になれば嬉しいです。
デザイナー
sato
デザイン領域加速進化中
こんな記事も
読まれています
CONTACT & WORKS
お気軽にご相談・お問い合わせください