
Figmaには複数の要素をまとめる方法に「グループ」と「フレーム」が存在します。今回解説するオートレイアウトは、「フレーム」の中の要素を整列させたり、配置・間隔を自動で調整する機能です。
使いこなせるととても便利な機能なので、まずは基本から習得しましょう!
最初に、オートレイアウトの適用方法を説明します。
適用の仕方は、
複数の要素を選択
右メニューから「オートレイアウト」を選択(shift+A)
次に、要素の間隔、周りの余白(パディング)を指定する方法を説明します。
① 要素の間隔を指定する場合

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

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

④ 周りの余白を4箇所別々で指定したい場合
最後に、配置・整列の方法を説明します。
配置の種類は3つです。
縦に並べる:要素を縦並びに配置する
横に並べる:要素を横並びに配置する
折り返す:要素をフレームの中で折り返すように配置する
整列は上下・左右のどこに要素を固定するかを選ぶことができます。
オートレイアウトは入れ子構造のように利用するとさらに便利になります。
整列・配置・間隔を整えたいときは、まずはオートレイアウトを利用してみましょう!