1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Figmaのレイアウトの種類について

1
Last updated at Posted at 2026-06-02

Figmaのレイアウトには、4種類のフローがあります。

この記事では、それぞれのフローについて紹介します。

通常レイアウト

通常のレイアウトでは、フレーム内に要素を自由に配置できます。

9cb5f5a2-3ccd-4d32-9a31-d44b950f5a56.png

メニューの「位置」項目では、要素の座標を上・下・左・右のどの方向を基準に指定するかを設定できます。
6d201b0c-f561-4171-99c2-1ef4903ac70e.png
5d40c497-c32d-48e1-9e87-9535e4922ad9.png

通常レイアウトでフレームの範囲を広げたときに、一部の要素が不自然に移動してしまうことがあります。

その場合、その要素の座標の基準が他と違っている可能性があります。

e78d28e9-ccd6-46c2-b40d-bd7428695d9c.png

91103383-4e25-4401-8649-8483edfe8607.png

オートレイアウト(上から下)

オートレイアウトを使うと、要素を上から下に並べることができます。

daa735cd-fe29-4b9d-b242-c1a58b0188c6.png

オートレイアウト(左から右)

オートレイアウトを使うと、要素を左から右に並べることができます。

a2c19c85-8594-4c7d-97ff-ccbadf890ed6.png

グリッドレイアウト

CSSのグリッドレイアウトと同じように、グリッド内に要素を当てはめていくことができます。

Figmaでは、より感覚的に要素を配置できます。

e463703e-97ce-4909-b687-cf34c0b0abc8.png

ea766baa-4dcb-4cb2-8b3d-395c49c48440.png

c36d9b06-c3d4-4bea-a371-e733fac5d195.png

まとめ

Figmaでは、通常レイアウト、オートレイアウト(上から下)、オートレイアウト(左から右)、グリッドレイアウトを使い分けて要素を配置できます。

フレームの範囲を変更した時に要素が不自然に動く場合は、座標の基準が他の要素と違っていないか確認するとよいです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?