Figmaでオートレイアウト上の要素の重なり順を逆転する方法

今回は、Figmaのオートレイアウトで、要素の重なり順を指定できる機能「キャンバススタッキング」の紹介です。プルダウンボタンなど、フレームから飛び出ている要素を配置する場合に、オートレイアウト上の他の要素の下に潜ってしまうケースなどで、意図した重なり順に指定できるようになります。

この記事のターゲット

• Figmaでオートレイアウトの重なり順を逆転したい方

• Figmaでオートレイアウト上の要素が意図しない被さり方をして困っている方

キャンバススタッキングの設定方法

キャンバススタッキングでオートレイアウトの重なり順を変更する手順は次の通りです。

1. 重なり順を変更したいオートレイアウトのフレームを選択

2. 右ペインの「オートレイアウト」内の「…」を選択

3. 「オートレイアウトの詳細設定」の「キャンバススタッキング」の値を指定

実際に操作している様子は以下の通りです。

キャンバススタッキングで設定できる値は以下の通りです。

• 最前面に最後のアイテム

• 最前面に最初のアイテム

ここでいう「最後」「最初」は、レイヤーの順番（上下）が基準になります。

レイヤータブを開いた時、フレーム内のリストで一番上にある要素が「最初」で、一番下にある要素が「最後」になります。そのどちらを前面に表示するかを指定する選択肢になっています。

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

Figmaでクリックするとメニューが開くプルダウンボタン

今回はFigmaのプロトタイプ（Prototype）機能を利用して、クリックするとメニューが開くアニメーションを適用したボタンの作り方とサンプルファイルの紹介です。 ... 続きを読む

Figmaでオートレイアウトを無視して要素を自由に配置する方法

今回は、オートレイアウトのフレーム内で、自動整列を無視してオブジェクトを絶対座標で配置する機能「絶対位置（absolute position）」の紹介です。表示エリアの都合上、同じフレーム内に要素を配置したい場合にオートレイアウトを解除しなくても良くなります。 ... 続きを読む

Figmaのプロトタイプのスクロール制御に関する設定

今回はFigmaでプロトタイプを作成するときのスクロールに制御に関する設定を紹介します。縦方向のスクロールだけでなく、横方向や画面の中の一部分のみスクロールさせたい場合などの参考になればと思います。 ... 続きを読む