Figmaでオートレイアウトのオブジェクトの順番を変更する手順を紹介します。
こちらの記事では、整列されたオブジェクトの順番を入れ替える方法を紹介しましたが、
この方法では、別の行の要素と入れ替えた場合に、列数が変化してしまう動作になります。
入れ替えをしても行と列の数を変化させたくない場合は、オートレイアウトを利用する方法があります。
この記事では、オートレイアウトが適用されたオブジェクトの旬版を変更する手順を紹介します。
オブジェクトを用意します。今回は16個の画像を配置した状態のものを用意します。
右側のパネルの[レイアウト]の右側にある[オートレイアウトを使用]ボタンをクリックします。
ボタンをクリックすると、ウィンドウ下部に[オートレイアウトが追加されました]のポップアップが表示されます。
入れ替えたい要素をクリックして選択します。下図では[ページ10]のオブジェクトを選択しています。
ドラッグして左に移動します。
[ページ9]のオブジェクトと入れ替えができました。
別の行へ移動する例です。[ページ10]のオブジェクトを選択します。
ドラッグして別の行に移動します。下図では[ページ5]と[ページ6]の間に移動します。
列の数は増えずに折り返されて4行4列の状態が維持されます。
複数のオブジェクトを選択して入れ替える場合の手順です。
範囲選択、または[Shift]キーを押しながらオブジェクトをクリックして選択します。
下図では、[ページ9][ページ10][ページ11]のオブジェクトを選択しています。
ドラッグして移動します。
オブジェクトの順番を入れ替えた場合でも、4行4列の状態は変わらず、順番の入れ替えができています。
オートレイアウトのオブジェクトの順番を変更できました。
