Figmaで要素間に均等なマージンを入れた相対レイアウトを作成する手順を紹介します。
Figmaで要素間に均等なマージンを入れ、内部のコンテンツのサイズに応じて自動的に要素の位置が相対で変化するレイアウトを作成する手順を紹介します。
このようなレイアウトを作成する場合にはオートレイアウトを利用すると便利です。
下図のデザインを用意します。画像とテキストを3つ配置したデザインです。
[移動]ツールが選択された状態で、キャンバスをドラッグして要素を選択します。
要素を選択できました。
選択要素の内部で右クリックします。下図のポップアップメニューが表示されます。
メニューの[オートレイアウトを追加]の項目をクリックします。
選択された要素がグループ化され、オートレイアウトが作成されました。
オートレイアウト内の要素の余白にマウスポインタを移動します。
マージン部分がピンク色になり、マウスポインタの形状が変化し、ドラッグできる状態になります。
ドラッグすると要素間の余白を変更できます。オートレイアウト内の他の余白も追従して変更されます。
余白の間隔を変更できました。
続いてオートレイアウトの要素をダブルクリックします。内部の要素を変更できる状態になります。
2つ目のテキストエリアをクリックして選択し、テキストを編集します。
テキストを編集すると、テキストのエリアが広がり、下のテキストエリアが自動的に位置が下がります。
テキストの長さが変化することでテキストエリアの大きさが変わり、下のテキストの位置が移動し、相対位置で配置される動作が確認できました。
