Figmaのプロトタイプ~スクロール編~
今回はfigmaにあるプロトタイプ機能について書いてみようと思います！
業務では専らfigmaを使用しているのですが、figmaのプロトタイプ意外と優秀…!と最近になって思ったので、以下のスクロールの挙動３点を中心にまとめてみます。
- 縦方向のスクロール
- 横方向のスクロール
- 縦と横方向のスクロール
figmaの公式でも説明されているので、もっと詳しく知りたい！となったらそちらをご参照ください。
1. 縦方向のスクロール
今回はInstagramのUIを元にプロトタイプを触ってみます。
画面全体を縦スクロールする場合は、特に何も設定せずともプレゼンテーションモードで縦スクロールすることができます。
しかし、ステータスバー（時間やバッテリーがある部分）やナビゲーションバー（Instagramのロゴが置いてある部分）、タブバー（ホームや検索のアイコンがある部分）はスクロールに影響されずに固定で配置したいです。
このような固定でおきたいパーツは Constraints というところで制御することができます。
まず、固定にしたいパーツを選択し、右側にある Fix position when scrolling（図の❶） にチェックを入れます。そうすると左側に FIXEDという項目ができ（図の❷）、そこにパーツが移動されます。
❶部分にある Left、Topとある部分で上下左右の制約を変更できます。今回のパーツ（ナビゲーションバー）の場合は一番上に来て欲しいので上下の制約は Top 、左右の制約はパーツの幅が横幅いっぱいなのでどれを選択しても大丈夫です。（右に寄せたい場合は Right を選択）
同じようにタブバーも固定するといい感じになりました。（タブバーの場合は上下の制約に Bottom を選択）
2. 横方向のスクロール
Instagramには縦以外にも横にスクロールできる部分があります。StoriesやユーザーのSuggestion部分がそれにあたります。
これもfigmaのプロトタイプで再現することができます！
まず、横クロールの部分をスクロールする分だけ作成します。アートボードを選択した状態で Clip content のチェックマーク（下図の❶）を外すと全貌を見ることができます。
次に、スクロールする領域にある要素を全てフレームとしてまとめます。（opt + cmd + g）横スクロールはフレーム単位でしか今のところ指定できません..!
次に、フレームを選択した状態で右にある Prototype タブ（下図の❶）を選択し、 Overflow Behavier から Horizontal Scrolling を選択します。
これで横スクロールの指定が完了です。しかし、このままだと下にようにエラーが出てしまい、うまくスクロールできません。
これは、フレームの幅が中の要素と同じになっているためにエラーが起きています。正しく動かすためには、フレーム内の要素はフレームよりも大きくなければいけません。なのでフレームを選択した状態でcmdを押しながらフレームの幅をアートボードと同じに狭めます。
これでエラーが消え、正常に横スクロールができます。
下のSuggestion部分も同じ容量でやります。しかし、この部分の Suggested for You と See All の部分はスクロールされずに固定されて欲しいです。その場合は縦スクロールの時と同様、要素を選択した状態でFix position when scrolling にチェックマークを入れましょう。
これで、２箇所が横スクロールができるようになりました！
3. 縦と横方向のスクロール
figmaでは以下のような動きもプロトタイプで再現することができます。
このように縦と横同時にスクロールを可能にする場合は、先と同じようにフレームを選択した状態で今度は Horizontal & Vertical Scrolling を選択します。そして横スクロールと同じようにフレームの大きさを画面の幅と高さに合うよう狭めます。
これで先ほどのような動きが可能になります。横スクロールと同様、これのフレーム内で固定にしたい要素がある場合はfixedにチェックを入れれば固定されます。
以上です！prottやXDでも同じようなことができるかもしれませんが、スクロールの挙動を指定するだけで一気に本物っぽくなりますね。
他にも遷移のインタラクションやアニメーション、オーバーレイが簡単に作れたりなどfigmaのプロトタイプには機能が豊富にあるのでより再現度の高いプロトタイプを作ることができます！
参考になりましたらぜひclap👏お願いします！
