目次

Figmaでオートレイアウトの枠に図形を重ねて配置する

目次

ペンとろ
質問: オートレイアウトの枠に図形をかぶせて配置したい
オートレイアウトの枠があるのですが、上に図形をかぶせたいです。ドラッグして移動するとオートレイアウト内に組み込まれて整列されてしまいます。 上にかぶせる方法はあるのでしょうか?

Figmaでオートレイアウトを無視して図形を重ねる手順を紹介します。

手順

下図の図形を準備します。オートレイアウトで整列されている図形です。
Figmaでオートレイアウトの枠に図形を重ねて配置する:画像1

角丸の枠を作成します。この枠をオートレイアウトで整列されている図形の上にかぶせて配置したいです。
Figmaでオートレイアウトの枠に図形を重ねて配置する:画像2

角丸の枠をオートレイアウトの枠にドラッグすると、オートレイアウトの挿入位置が表示される状態になります。 この状態でドロップすると、オートレイアウト内に角丸の枠も組み込まれて整列されてしまいます。 整列させたいのではなく、上に重ねたいです。
Figmaでオートレイアウトの枠に図形を重ねて配置する:画像3

角丸の枠を選択した状態で、右側のパネルの[位置]の右側にある[オートレイアウトを無視]のボタンをクリックします。
Figmaでオートレイアウトの枠に図形を重ねて配置する:画像4

下図のオレンジ色点線で囲まれたボタンが[オートレイアウトを無視]のボタンです。
Figmaでオートレイアウトの枠に図形を重ねて配置する:画像5 Figmaでオートレイアウトの枠に図形を重ねて配置する:画像6

クリックすると、角丸枠の図形が整列しない状態になります。
Figmaでオートレイアウトの枠に図形を重ねて配置する:画像7

ドラッグして重ねたい場所に移動して配置します。オートレイアウトの上に重ねることができました。
Figmaでオートレイアウトの枠に図形を重ねて配置する:画像8

角丸の枠の図形は、オートレイアウトのフレーム内に配置されるため、オートレイアウトの枠を移動すると、 枠の位置に追従して角丸の図形の位置も変更されます。
Figmaでオートレイアウトの枠に図形を重ねて配置する:画像9
Figmaでオートレイアウトの枠に図形を重ねて配置する:画像10

オートレイアウトの枠の上に図形を重ねた配置できました。


AuthorPortraitAlt
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。
作成日: 2025-06-04
Copyright © 1995–2025 iPentec all rights reserverd.