figma-header-sticky-animation-prototype
公開日: 2023.06.02  | 更新日: 2024.06.02

Figmaでヘッダーを画面上部に固定して追従させる(プロトタイプ)

今回はFigmaのプロトタイプ(Prototype)機能を利用して、画面レイアウト上のヘッダーコンポーネントを、画面スクロール時に画面上部に固定して追従するようなアニメーションの設定方法を紹介します。設定済みのサンプルファイルも公開していますので、自由に利用してください。

この記事のターゲット

  • Figmaのプロトタイプで画面スクロールしてもヘッダーを追従するようにしたい方

  • Figmaの追従するプロトタイプが適用されたサンプルファイルが欲しい方


ヘッダー・コンポーネントを画面上部に固定して追従するようにする

画面レイアウトを用意し、プロトタイプ内で画面スクロールした際にヘッダーが上部に追従されるようにします。ここでいう追従とは、CSSのプロパティでいうところの「position: sticky」に相当する挙動になります。

今回はデモとして、以下の記事で作成した画面レイアウトを流用して、ヘッダーを追従するようにしてみます。そのため、前提としてオートレイアウトが適用された画面で追従でさせる方法の紹介ということになります。

Figmaのオートレイアウトの基本的な使い方

今回は、Figmaを代表する機能のひとつである「オートレイアウト(Auto layout)」の基本的な使い方を、シンプルな画面レイアウトを実際に作りながら紹介します。また、この記事内で作成した画面レイアウトのサンプルファイルを公開・配布していますので、自由にご利用ください。 ... 続きを読む

figma-how-to-use-auto-layout

1. プロトタイプを設定する

まず、プロトタイプを指定したい画面を用意します。

右ペインの「プロトタイプ」タブで「フロー」を追加し、プロトタイプを設定します。画面サイズに合わせて全体が表示されるようにするまでの手順は次のとおりです。

  1. フローの開始点を設定

  2. 右上の「▶︎」ボタンを押してプロトタイプのプレビューを実行

  3. プレビューの右上の「オプション」で「画面にあわせる」を選択

sticky1

この状態ではまだヘッダーはスクロールしても追従しません。

2. プロトタイプ設定のスクロールの位置で「追従」を選択

次に、編集画面に戻り、ヘッダーを選択した状態でプロトタイプの設定を行います。

ヘッダーを選択した状態で右ペインのプロトタイプを開き、「スクロールの動作」の「位置」を「追従(上端で停止)」を指定します。

sticky2

この状態でプレビューを確認すると、ヘッダーは画面上部で追従しますが、スクロールした別の要素の下側に潜り込んでいます。

3. オートレイアウトの詳細設定で重なりの順番を変更

最後に、オートレイアウトの重なり順を変更することでヘッダーが前面に表示されるように設定します。今回はオートレイアウト上の要素の追従をしているため、この設定が必要になってきます。

ヘッダーを選択した状態で右ペインの「デザイン」タブの「オートレイアウト」で「…」をクリックし、オートレイアウトの詳細設定を開きます。

詳細設定のポップアップウィンドウから、「キャンバススタッキング」を「最前面に最初のアイテム」に変更します。

sticky3

これで、スクロールしてもヘッダーが前面に表示された状態で追従するようになりました。

Figmaでヘッダーを画面上部に固定して追従させるサンプルファイル

この記事で紹介したヘッダーのスクロール挙動のサンプルファイルを Figma Community にアップロードしていますので、そちらから自由に複製(Duplicate)できます。

figma-header-sticky-animation-prototype-sample-file

Figmaでヘッダーを画面上部に固定して追従させるサンプルファイル | Figma community

私用・商用問わずご自由にご利用ください。


この記事を読んだ方におすすめの記事

Figmaで作れるインタラクション付きコンポーネント集

今回はユーザーの操作によってアニメーションなどのインタラクションが発生するUIコンポーネントのプロトタイプの作り方を紹介します。実際に作成されたサンプルファイルも公開していますので、参考にしてください。 ... 続きを読む

figma-interactive-components

Figmaで汎用的なUIコンポーネントを作る方法

今回はFigmaで汎用的なUIコンポーネントを作る方法をいくつか紹介します。この記事の方法では、プラグインなどは利用せずにFigmaの基本機能のみで作成できます。実際のサンプルデータもあわせて用意しているので、参考にしてみてください。 ... 続きを読む

figma-how-to-design-ui-components

Figma・FigJamでシンプルなグラフを生成するプラグイン集

今回は、Figma/FigJamでシンプルなグラフ・チャートを生成できるプラグインを紹介します。簡単な資料の細く図表、ウェブサイトや資料のカンプ用データ、あるいはプレデンテーションで使う図表のたたきの作成などに便利です。いずれも無料で使用できます。 ... 続きを読む

figma-figjam-simple-graph-plugin


最新の記事を見る
広告
この記事を書いた人
うえんつ

うえんつ

X a.k.a Twitter
B2B領域のSaaS・アプリケーション開発などを組織で取り組むことが得意なプロダクトデザイナーで、このブログのオーナーです。
今の関心事
Figma・UIデザイン・UXリサーチ・QOL・旅行
広告