こんにちは、クリエイターのTです。
ベータ版で試験運用されていたFigmaの新UIが2024年10月11日(金)に、ついにアップデートで使えるようになりましたね！
機能の定位置が若干変わっていたりとちょっと戸惑いもありましたが、よりミニマムで使いやすい素敵なUIになっていて作業時間がさらに楽しくなったと感じています！
弊社でも普及がどんどん進んでいるため、啓蒙のためにもFigma系記事は積極的に書いていきたいと思っています。
というわけで今回は、スライドショーのアニメーションイメージをFigmaで作る手順を載せていきます！
手元にFigmaをご準備いただき、触りながら読んでいただけたらと思います！
目次
こんな動きを作ってみます
①3か所のフレームそれぞれの写真がゆっくり流れるようにフレーム内で横移動
②フレーム内を右から左に押し出すような形で、次の写真がフレームイン
③フレームごとに3枚の写真が順に切り替わり、最初の写真に戻って①から繰り返す
作り方は意外とシンプルですので、早速手順にいきましょう！
手順はこちら！
画像を用意
写真は3枚×3か所で計9枚用意する必要がありますが、今回はFigmaプラグイン「Unsplash」を使って画像を一気に用意しました！
フレームを作成
- まずは1つのフレーム分だけ画像を挿入する要素を作ります。 このときのポイントとして、少し面倒ですが四角シェイプを2枚重ねてレイヤー前面のシェイプに写真を挿入し、レイヤー背面のシェイプでマスクをする方法をとります。 こうすることで、後から写真のトリミングや拡大縮小をする際に伸縮の制限がなく、調整しやすいです。
- こうして作ったスライドのフレームを3つに複製し、ぴったり重なったまま3つのフレームをさらに1つの親フレームでグルーピングします。 わかりやすいように、親フレームに番号「01」、子フレームにはレイヤー前面から「01-1」「01-2」「01-3」とレイヤー名をつけておきます。 また、親フレームははみ出した部分が隠れるよう「レイアウト→コンテンツを隠す」にチェックを入れます。
フレームを調整〜画像挿入
- 子フレームをすべて選択し、widthのプロパティに横方向へスライドアニメーションをさせる分の数値分を足しておきます。（後ほどプレビューを見ながら数値を調整してもOKです！）
- 親フレーム「02」「03」をここまでの手順と同じようにあと2つ複製し、親と子にそれぞれ数字のレイヤー名をつけておきます。サイズを変えても良いです。
- それぞれのイメージレイヤーに画像を配置します。（Figmaはプロパティパネルで画像のコピペが簡単にできるので便利！）
画像を挿入したら「01-1」「02-1」「03-1」をそれぞれ複製し、複製したほうは子のレイヤーの最背面に配置しておきます。(子フレームは親フレームの中に4つ入れ子になっている状態になります。)
コンポーネント化し、バリアントで複製しながら中身を調整
- 3つの親フレームをまとめて選択した状態で、⌘+Option(Alt)+Kでコンポーネント化します。
（このコンポーネントを＜バリアントA＞とします） - バリアントボタンでコンポーネントのバリアントを増やしたら、増やしたほうだけレイヤー最前面の子フレームをまとめて選択し、位置を左にずらします。（手順3-1で足した数値分、X軸をマイナスに移動させる）
あくまで位置を変更するのは重なった「子」レイヤーのうち最前面のフレームのみです！
（ここで複製＆編集したコンポーネントを＜バリアントB＞とします）
- ここまできたら一度、コンポーネントをオートレイアウトに設定しておきます。バリアントの入れ替えがスムーズになり、この後の作業が楽になるのでおすすめです。
- ＜バリアントA＞を再度複製して一番下に配置し、複製したバリアントの子フレームの中の最前面のレイヤー（この場合は「01-1」「02-1」「03-1」）をまとめて選択。
コントロールパネルでwidthを「0」と入力して、選択していた画像が見えない状態にします。
（ここで複製＆編集したコンポーネントを＜バリアントC＞とします）
- ＜バリアントB＞を再度複製して3と同様、一番下に配置し、子フレームの中の最前面のレイヤー（この場合は「01-1」「02-1」「03-1」）をまとめて選択。 コントロールパネルでwidthを「0」と入力して、選択していた画像が見えない状態にします。
（ここで複製＆編集したコンポーネントを＜バリアントD＞とします）
- 4〜5を繰り返し最前面の子レイヤーを隠しながら、レイヤーの最背面にあった「01-1」「02-1」「03-1」が表示される状態までバリアントを作ります。
（ここで複製＆編集したコンポーネントを＜バリアントE＞＜バリアントF＞とします）
最後のバリアントは、一番後ろにあった「01-1」「02-1」「03-1」各レイヤーが見える状態にします。
（このコンポーネントを＜バリアントG＞とします）
プロトタイプでアニメーションを設定
- プロトタイプ編集にタブを切り替え、最初に作ったコンポーネントをすぐ下のバリアントに繋げます。
- プロトタイプ設定をスマートアニメートにして、画像のように入力していきます。
アニメーション開始時の遅延は今回不要なので、最小値の「1」でOKです。
また、スマートアニメートの所要時間は今回ゆっくりとした動きにしたいので「3000」と入力しました。 - 2のバリアントをそのすぐ下のバリアントに繋いで、画像のように入力していきます。
スマートアニメートの「カスタムベジエ」を選択し、曲線の数値は画像のように設定します。 - 1〜3をその下のバリアントにも交互に適用していってアニメーションを繋げます。
（2〜3で設定したインタラクションは画像同様、それぞれパネルでコピペすることができます。その場合、繋ぎ先は下のバリアントに変更するのを忘れずにしてください！） - 一番下まで繋いだら、一番下のバリアントを一番上の最初のバリアントに繋ぎます。
ここだけ、アニメーション設定は「即時」にしておきます。 最後のバリアントがあることで綺麗なループアニメーションを作ることができるのでここ大事です！
以上で設定は完了です！
プレビュー用のフレームを作ってコンポーネントを配置し、プレビュー確認してみましょう！
最後に
いかがでしたか？
プロトタイプでインタラクティブな動きを作るTipsも巷にあふれてきており、作り込むほどに世界観が明確になってとても楽しくなるデザインツールなのですが、慣れていないと設定に戸惑うこともあると思います。
自分が再現したい動きの参考サイトと、その動きを実現させるためのプロトタイプ作成方法を探してから作り始めることで思い通りのアニメーション表現ができるかと思うので、こちらのブログもいつかご活用いただけたら嬉しいです！
