XDのサブとしてなんとなく使っていたFigmaに完全移行した話その⑤（デザイナー向け動的UI編その２：ファーストビュー）
あるあるなファーストビューを作ってみます。全面画像のスライドショーがあり、下層にコンテンツがあることを示すscrollの誘導UI。それぞれが自動でループします。
デザイナー向けな内容ですが非常にカンタンなのと頻出な表現なので全職能対象かと。
こんなものも基本機能だけでサクッと作れそうだったのでみていきます。
scrolldownUIの作成
これはまぁベクターとテキストでお好きなようにつくってください。
素材にするのでframeの外側に作っておきます。
scrolldownUIのアニメーション
UIをフレーム化します。
複製したフレームを並べて前後の状態を作ります
前後のフレームを選択してコンポーネントアセットを作成します。
右タブからプロトタイプに変更してアニメーションをつけていきます
トリガーをアフターディレイ（自動）に変更します
ディレイの速度を400msに調整します
次に変更を選択してframe2に移動するようにします
スマートアニメートを選択
イーズアウトを選択
イーズアウトの速度を700msに調整します
frame2からframe１へも同じアニメーションを設定します。
※この要領でクルクル回るローディングアニメとかも作れますね。この場合は4コマ作って90度づつ回転させるようです
動作の確認
端末のframeを作成して、コンポーネントアセットの初期状態のframe1を選択してペーストします。白だと見えないので端末のframeには色をつけておきます。何色でもいいですがスライドショーの際にちらっと見えてしまうので後ほど白に戻します。
ここまでできたらプレビューしてみます
スライドショーに使う画像を揃える
端末の画角に合わせてマスクしたスライドショーにさせたい3枚を並べます。
マスクした各画像をframe化します
アニメさせたいframeを３つ選択してコンポーネントアセット化
スライドショーのアニメの設定
scrolldownと同様にアフターディレイ→次に変更→スマートアニメートと設定していき速度を調整していきます。
frame1→frame2→frame3→frame1と繋いでループさせます。
ここでもscrolldownボタン同様に端末のframeにframe1をペーストしてアニメしてるがプレビューで確認します
素材を組み合わせる
最後に作ったscrolldownとスライドショーの素材をレイアウトしてテキストを打ち込んで完成です。
