オブジェクトの入れ替えをした場合に列数を維持する場合には、オートレイアウトを利用します。
詳細はこちらの記事を参照してください。
Figmaで整列されたオブジェクトの順番を変更する手順を紹介します。
Figmaで整列されたオブジェクトを用意します。今回は下図の16枚の画像が並んだものを用意しました。
キャンバスをドラッグして範囲選択します。すべてのオブジェクトを囲み選択します。
選択できた状態が下図です。
マウスポインタを選択オブジェクトに重ねると、ピンク色のハンドルが表示されます。
整列されている要素の順番を入れ替える場合は、要素の中央のピンクの円形のハンドル(下図)を選択してドラッグします。
順番を入れ替えたい要素の中央のピンクの円形のハンドルをクリックします。
クリックすると、ハンドルの中央がピンク色になり、オブジェクトの周囲にピンク色の選択枠が表示されます。
選択されたオブジェクトをドラッグして入れ替えたい位置に移動します。下図は一つとなりの[ページ5]の要素と入れ替えた状態です。
ドロップすると入れ替えが完了します。
続いて複数の要素を選択して入れ替える手順を紹介します。
オブジェクトの中央の円形のハンドルをクリックすると、ピンク色になり、オブジェクトの周囲に選択枠が表示されます。
[Shift]キーを押しながらほかのオブジェクトの中央の円形のハンドルをクリックすると複数のオブジェクトを選択できます。
下図は[ページ9][ページ10][ページ11]の3つのオブジェクトを選択した状態です。
ドラッグすると、順番を入れ替えられます。下図は、[ページ8]オブジェクトと入れ替えた例です。
ドロップすると入れ替えが完了します。
別の行に移動する場合の例です。
[ページ9]のオブジェクトの中央のハンドルをクリックして選択します。
ドラッグして移動します。一つ上の行の[ページ5]と[ページ6]の間にドロップします。
ドロップすると、[ページ9]は[ページ5]と[ページ6]の間に配置できましたが、2行目のオブジェクトは右側に押し出され、5つになってしまいます。
折り返されないため、列数が増えてしまいます。
同様に[ページ12]と[ページ13]の中央のハンドルをクリックして選択します。
選択されたオブジェクトをドラッグして2行目の[ページ4]の右側にドロップします。
[ページ12]と[ページ13]は[ページ4]の右側に配置できましたが、2行目のオブジェクト数が7個になってしまいました。
