Figmaのレイアウトには、4種類のフローがあります。
この記事では、それぞれのフローについて紹介します。
通常レイアウト
通常のレイアウトでは、フレーム内に要素を自由に配置できます。
メニューの「位置」項目では、要素の座標を上・下・左・右のどの方向を基準に指定するかを設定できます。


通常レイアウトでフレームの範囲を広げたときに、一部の要素が不自然に移動してしまうことがあります。
その場合、その要素の座標の基準が他と違っている可能性があります。
オートレイアウト(上から下)
オートレイアウトを使うと、要素を上から下に並べることができます。
オートレイアウト(左から右)
オートレイアウトを使うと、要素を左から右に並べることができます。
グリッドレイアウト
CSSのグリッドレイアウトと同じように、グリッド内に要素を当てはめていくことができます。
Figmaでは、より感覚的に要素を配置できます。
まとめ
Figmaでは、通常レイアウト、オートレイアウト(上から下)、オートレイアウト(左から右)、グリッドレイアウトを使い分けて要素を配置できます。
フレームの範囲を変更した時に要素が不自然に動く場合は、座標の基準が他の要素と違っていないか確認するとよいです。







