Figmaのオートレイアウトの基本的な使い方

Figmaには複数の要素をまとめる方法に「グループ」と「フレーム」が存在します。今回解説するオートレイアウトは、「フレーム」の中の要素を整列させたり、配置・間隔を自動で調整する機能です。

関連記事

Figmaのフレームとグループの使い分けのポイント

Figmaでデザインする際にグループとフレームの使い分けに迷ったことはありませんか？本記事ではそれらの大きな違いと使い分けのポイントを解説します。グループとフレームの使い分けについて、Figmaの公式記事では以下のように記されています。次の場合にグループを使用します:複数のオブジェクトを1つの管理可能なレイヤーにまとめたい拡大縮小しても固定関係が維持される要素をグループ化したい場合（例：複数の図形で構成されたロゴやシンボル）グループ内のオブジェクトのサイズを変えたときに、グループの枠のサイズも自

使いこなせるととても便利な機能なので、まずは基本から習得しましょう！

最初に、オートレイアウトの適用方法を説明します。

適用の仕方は、

1. 複数の要素を選択

2. 右メニューから「オートレイアウト」を選択（shift+A）

次に、要素の間隔、周りの余白（パディング）を指定する方法を説明します。

① 要素の間隔を指定する場合

② 横の余白を指定する場合

③ 縦の余白を指定する場合

④ 周りの余白を4箇所別々で指定したい場合

最後に、配置・整列の方法を説明します。

配置の種類は3つです。

1. 縦に並べる：要素を縦並びに配置する

2. 横に並べる：要素を横並びに配置する

3. 折り返す：要素をフレームの中で折り返すように配置する

整列は上下・左右のどこに要素を固定するかを選ぶことができます。

オートレイアウトは入れ子構造のように利用するとさらに便利になります。

整列・配置・間隔を整えたいときは、まずはオートレイアウトを利用してみましょう！

この記事の関連シリーズ

Figmaの役立つTips特集

FigmaでのWebデザインやUIデザイン制作に、知っておくと役立つFigmaの便利な使い方やショートカットを紹介する連載企画。プラグインやウィジェットなど、『Figma Community』に公開されているおすすめのリソースも紹介！