
【画像で解説!】 Figmaのprototype機能でアニメーションを作成してみた
最近オープニングアニメーションやサイトのFVを作成するにあたって、動的なデザインを作成することがありました。
この際に、色々なツールで作成する手法がありますが、今回Figmaのprototype機能を駆使して作成することにしました。
理由はこんな感じ↓
・Figmaのprototype機能ですべての動きが通して見れることで、ステークホルダー全員の認識がずれない
・今回のサイトの届けたい世界観や時間・工数面、サイトの負荷的にもゴリゴリ動的アニメーションを作成するわけではない
・After Effects を開くのが腰が重い…笑
After Effectsなどで作成すると、Figmaで作成しているサイトのデザインデータとは分離してしまうため、オープニングアニメーションからTOPへの入り方や、テキストや要素がその上に乗っかった時に、非デザイナーが想像しにくかったり、乖離が生まれてしまう懸念が出てきます。
また最近ではLottieをFigmaとプラグインで作成もできるようになり、慣れているFigmaで色々なアニメーションを表現できるようになるに越したことはないのでは….!と思います。
そんなわけで、今回はFigmaで「オープニングアニメーション」を作成したときのやり方を、画像で解説していきます
Figma prototypeの基本的な使い方
右のprototypeモードに変換してからFrame同士を繋げると下のようなものが表出します↓

基本的には、「タイミング」と「内容」を掛け合わせてアニメーションを作成します。
ここで注意したいことは「Frame・Autolayout同士を繋げることしかできない」という点です。詳しくは後ほどわかるので、この点だけを覚えて読み進めてください。
オープニングアニメーションを作る
オープニングアニメーションとは、サイトが開く前のLoading中の画面です。世界観を表現する一つとして、サイトを開く前から感じてもらえるのがメリットですね。
今回はこちらを例に説明します。


①ニコちゃんをコロコロ変化させる


普段UIを作成する際、prototype機能を使用することは基本的に
・ボタンなどの挙動があるコンポーネントの作成
・画面の切り替わり
があると思いますが、前者はvariant、後者はFrame同士で繋げます。
アニメーションも同様に、位置や大きさが変わらない、かつ多くの切り替えやパターンがある場合は、Frameごとに作成していくよりも、variantで作成することをオススメします。

②背景色を滑らかに変えていく

背景色を白からオレンジに、上から下へ、時間の経過とともに左から右へ変わっていくやり方を紹介します。
こちらも1つの要素に対して時間をずらして設定することで、variantで作成することができます。


1つの要素にフォーカスすると表現することは、白→オレンジに、上→下に滑らかに変えることです。
・・・・
まずAfter(上の写真のオレンジ色の方)の構成はこんな感じ↓

【オレンジのFrame】
オレンジの長方形(After:オレンジ)を用意して、それをFrameに入れる
→この際にFrameの上部に余白を残す
💡Point💡
スライドの高さにプラスして余白を作る
(長方形自体はスライドの高さ、Frameはスライドの高さ+余白分)

【Before:白】
オレンジの長方形と同じサイズで用意する
【オレンジのFrame】の下に【Before:白】を重ねる
💡Point💡
※【Before:白】を【オレンジのFrame】に入れないように!
※カーソルで重ねるとFrameに入ってしまうので注意!
※白い長方形のほうが小さく、下に合わせる
2つを1つのFrame(After)にまとめる
これでAfterは完成!
・・・・
次にBefore部分のパーツ

Afterで作成したものを複製し、【オレンジのFrame】を余白部分まで上げる
・・・・
Before/Afterで作成したものをコンポーネント化して、prototypeで繋げて完成!


・・・・
上記のコンポーネントを複製して、After delayを変えて、

1つのFrameに敷き詰めると、、、

こんな感じに✨

③文字を出現させる

②と全く同じ手法でできます
・・・・
テキストが出た後の方から作成

「Bonjour!🍝」をFrame内に入れ、今回は左→右に出すので、左に余白を作る
・・・
複製して、Frameを余白部分まで縮めればOK

・・・
上で作成したものを繋げたら完成!


④すべてを繋げて完成

こんな感じで型を覚えておけば、他の形や表現にも使えると思うので、ぜひ応用して使ってみてください!
アニメーションたのし〜〜〜〜!
🍝