Figmaで背景画像を固定する方法

皆さんこんにちは、芸大生Vtuberの創美ささです。

プロトタイピングツールであるFigmaでWEBサイトのモックアップを制作している際に、背景画像の固定方法が分からず苦戦したので、備忘録としてここに書き記したいと思います。

◇最前面にある要素の固定は簡単に設定ができる

FigmaではDesignタブからヘッダーやフッターなど、スクロールしても固定して表示したい要素を選択し、"fix position when scrolling"にチェックを入れることで、それらを固定オブジェクトに設定することができます。

ですが、この"fix position when scrolling"を要素に適用すると、その要素が自動的に最上位レイヤーに設定されるようになっています。
最上位レイヤーから移動させるとfixedが解除されるので、ヘッダーやフッター、フローティングボタンなどの最前面に表示したい要素なら問題ありませんが、背景の固定に利用することはできません。
CSSでいうところのz-indexが設定できないイメージ。

◇背景画像固定の手順

①メインフレームを作成

背景画像を固定表示するには、まずメインフレームを作成し、その子要素に背景画像を追加します。

②スクロールしたい要素を含んだフレームを作成

scroll-contentsというフレームを作成し、作成しているデバイスの画面サイズに設定。(例)PC 1920 × 1080 

scroll-contentsを選択した状態でPrototypeタブに移動し、Overflow behaviorを「No Scrolling」から「Vertical Scrolling」に変更します。

変更したらDesignたぶに戻り、scroll-contentsフレームの中にスクロールさせたい要素を子要素として追加します。
フレームの背景は透過させておきます。

③scroll-contentsをメインフレームの子要素として追加

最後に②で作ったscroll-contentsフレームをメインフレームに子要素として追加し、配置します。

これで背景画像の固定ができました。

理解すると意外と簡単に作ることができるので、是非試してみてください。

各種リンク

Youtube: 主な活動場所です。現在はノーコードでwebサイトを作成できる"STUDIO"の解説動画を中心にゲーム実況なども投稿しています💻

Twitter(@somi_sasa): 動画投稿などの活動に関するお知らせなど総合的に発信

Instagram(@somi__sasa): #ささtips というタグでデザインのtipsを投稿しています。その他活動に関するお知らせなどもストーリーで行います

マシュマロ: 匿名のメッセージを受け付けています！
質問, 動画のリクエスト, 感想などなんでも送ってください🐼🌿