![見出し画像](https://assets.st-note.com/production/uploads/images/138649194/rectangle_large_type_2_bdd2090fd9816ac940d7f3d438b40c5b.png?width=1200)
【小ネタ】横スクロールのプロトタイプをマウスの縦スクロールで動かす方法(Figma)
今回の記事では、プロトタイプ上で横スクロールのデザインをマウスの縦スクロールを使って動かす方法について記載します。
注意点
今回の方法はプロトタイプ上の制約があり、使いづらいです。
その為、使用するのは「横スクロールの操作感確認」などのワンポイントに抑えた方がよさそうです。
実際の挙動
下Gif画像からではわかりにくいですが、ドラッグではなくマウスの縦スクロールで画面を横にスクロールしています。
![](https://assets.st-note.com/production/uploads/images/138646189/picture_pc_cccb1faba5ac102f4c515bb765a60d80.gif?width=1200)
横スクロールをマウスの縦スクロールで動かす方法
まず、今回の方法では以下の制約があります。
プロトタイプのデバイスを『iPad』系もしくは『iPhone』系に設定する
フレームの縦幅をプロトタイプのデバイス縦幅以下に設定する
上記を踏まえたうえで、今回はPCのサイズに近いiPadを設定しました。
![](https://assets.st-note.com/img/1714197388461-70jJ3JuxsS.png?width=1200)
全体の構成としては
全体のフレーム(左上)
横スクロールさせる範囲のフレーム(右上)
スクロールするフレーム内のコンテンツ(下)
を作成します。
![](https://assets.st-note.com/img/1714197618744-29uFgxYPUb.png?width=1200)
後はそれぞれを組み合わせ、『横スクロールさせる範囲のフレーム』にスクロールの動作の『オーバーフロー:水平』を設定すれば完成です。
![](https://assets.st-note.com/img/1714197802094-maLj8XkjcJ.png?width=1200)
まとめ
以上、プロトタイプ上で横スクロールのデザインをマウスの縦スクロールを使って動かす方法でした。
この記事が気に入ったらサポートをしてみませんか?