公開日: 2023.06.02 　|　更新日: 2023.06.02

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事で紹介したテーブルのサンプルファイルを Figma Community にアップロードしていますので、そちらから自由に複製（Duplicate）できます。

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

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

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

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