Figmaのプロトタイプ機能でスクロールを設定する方法
こんにちは！Webデザイナーのイワサキです。
Figmaでカルーセルを作成するときに、実際のプレビュー画面でスクロールさせたいときはありませんか？
Figmaのプロトタイプ機能を使って設定をすることで実現できます。
当記事では、Figmaのプロトタイプ機能でスクロールを設定する方法についてやさしく解説します。
一度覚えてしまえば実際のプロジェクトで活用することができるので、是非覚えていきましょう！
ではいってみましょう。
スクロールさせたい要素をフレーム化
はじめにスクロールさせたい要素をフレーム化します。
今回はカルーセルを作成していきます。
スクロールさせたい要素をまとめて１つにします。
要素を同時選択し、【右クリック】→【選択範囲のフレーム化】、もしくはショートカットキーの【optionキー】+【commandキー】+【G】で要素にフレーム化を適応させることができます。
スクロールさせたい範囲を作成
次にスクロールさせたい範囲を作成します。
先程フレーム化を適用させた要素を配置します。
必ずフレーム(アートボード)を使用して、その中に配置をします。
配置したフレームをスクロールさせたい範囲に調節します。
上記の画像のようにフレームの横幅いっぱいにスクロールさせたい場合はフレーム(アートボード)の横幅に合わせます。
プロトタイプ機能設定
次にプロトタイプ機能を使ってスクロール設定をします。
右サイドバーの【プロトタイプ】から設定をします。
スクロールの動作を「位置 : 親とスクロール、オーバーフロー : 水平」に設定をします。
動作確認
最後に設定できているか、動作しているかを確認します。
プレビューで、設定できているか、動作しているかを確認することができます。
まとめ
いかがでしたか？
今回は、Figmaのプロトタイプでスクロールを設定する方法について解説しました。
設定することで、表現の仕方や動きの確認をすることができます。
一度覚えてしまえば実際のプロジェクトで活用することができるので、是非機会があれば活用してみてください！
