目次

Figmaでオブジェクトを整列する方法 - オートレイアウトを利用

目次

オートレイアウトを利用して、Figmaでオブジェクトを整列する手順を紹介します。

概要

Figmaで配置した複数のオブジェクトを整列したい場合があります。 この記事では、オートレイアウトを利用して、オブジェクトを整列する手順を紹介します。

手順

下図の画面があります。画像が散らばった状態で配置されています。
Figmaでオブジェクトを整列する方法 - オートレイアウトを利用:画像1

キャンバス上でドラッグします。選択枠が表示されます。表示されているすべての画像を範囲選択で選択します。
Figmaでオブジェクトを整列する方法 - オートレイアウトを利用:画像2

画像が選択できた状態が下図です。
Figmaでオブジェクトを整列する方法 - オートレイアウトを利用:画像3

ウィンドウ右側の[レイアウト]パネルの右端にある[オートレイアウトを使用]ボタンをクリックします。
Figmaでオブジェクトを整列する方法 - オートレイアウトを利用:画像4 Figmaでオブジェクトを整列する方法 - オートレイアウトを利用:画像5

画像が整列されます。
Figmaでオブジェクトを整列する方法 - オートレイアウトを利用:画像6

オブジェクト同士の間隔を変更します。横方向のマージンのハンドル部分をクリックしてドラッグします。
Figmaでオブジェクトを整列する方法 - オートレイアウトを利用:画像7

ドラッグすると間隔が狭まり、表示が3列になります。
Figmaでオブジェクトを整列する方法 - オートレイアウトを利用:画像8

さらにドラッグしすると、4列表示になります。
Figmaでオブジェクトを整列する方法 - オートレイアウトを利用:画像9
Figmaでオブジェクトを整列する方法 - オートレイアウトを利用:画像10

また、オートレイアウトの枠の幅を狭めると間隔はそのままで、3列表示になります。
Figmaでオブジェクトを整列する方法 - オートレイアウトを利用:画像11

一方で、オートレイアウトの枠の幅を広げた場合は5列、6列の表示になります。
Figmaでオブジェクトを整列する方法 - オートレイアウトを利用:画像12

オートレイアウトを利用して、図形の整列ができました。

AuthorPortraitAlt
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。
作成日: 2024-04-01
Copyright © 1995–2025 iPentec all rights reserverd.