Figmaでオブジェクトを整列・均等配置する方法
今回はFigmaでオブジェクトを整列・均等配置する方法を紹介します。規則的な自動整列といえばオートレイアウトが代表的ですが、今回は最も基本的な整列機能（上下左右中央揃え、等間隔揃え）を試します。
この記事のターゲット
Figmaでオブジェクトを整列させる基本的な機能について知りたい方
Figmaで整列する機能の具体的な挙動が知りたい方
Figmaの基本的な整列機能
Figmaの標準機能として利用できる整列機能は次のとおりです。
水平・垂直は、X軸に対してどちらの方向に移動するかで分類されています。
水平方向の整列
左揃え（Option + A）
水平方向の中央揃え（Option + H）
右揃え（Option + D）
垂直方向の整列
上揃え（Option + W）
垂直方向の中央揃え（Option + V）
下揃え（Option + S）
等間隔の整列
均等配置（Control + Option + T）
垂直方向に等間隔に分布（Control + Option + V）
水平方向に等間隔に分布（Control + Option + H）
水平方向の整列
GIF動画の対応はそれぞれ以下の通りです。
赤：左揃え（Option + A）
選択範囲内の左端に合わせて水平方向に整列
青：水平方向の中央揃え（Option + H）
選択範囲内の中央に合わせて水平方向に整列
緑：右揃え（Option + D）
選択範囲内の右端に合わせて水平方向に整列
垂直方向の整列
GIF動画の対応はそれぞれ以下の通りです。
赤：上揃え（Option + W）
選択範囲内の上端に合わせて垂直方向に整列
青：垂直方向の中央揃え（Option + V）
選択範囲内の中央に合わせて垂直方向に整列
緑：下揃え（Option + S）
選択範囲内の下端に合わせて垂直方向に整列
等間隔の整列
等間隔の整列は、オブジェクトの並び方によって振る舞いが変化します。以下のGIF動画では、それぞれ縦・横・複合の場合でそれぞれ挙動をデモしています。
縦方向の1次元に並ぶオブジェクトに適用する場合
赤：均等配置（Control + Option + T）
青：垂直方向に等間隔に分布（Control + Option + V）
緑：水平方向に等間隔に分布（Control + Option + H）
横方向の1次元に並ぶオブジェクトに適用する場合
赤：均等配置（Control + Option + T）
青：垂直方向に等間隔に分布（Control + Option + V）
緑：水平方向に等間隔に分布（Control + Option + H）
縦横の2次元に並ぶオブジェクトに適用する場合
2次元に並ぶオブジェクトに垂直・水平方向の等間隔分布をすると一見グチャっとなっているように見えますが、それぞれのオブジェクトのそれぞれ垂直・水平方向の相対的な位置が等間隔になっているため、それぞれ上下左右に整列すると等間隔になっていることが確認できます。
赤：均等配置（Control + Option + T）
青：垂直方向に等間隔に分布（Control + Option + V）
緑：水平方向に等間隔に分布（Control + Option + H）
おまけ：整列したオブジェクト同士の間隔を数値指定する方法
整列機能を使って規則的に整列されたオブジェクトを選択している状態に限り、右ペインで垂直方向・水平方向のオブジェクト同士の感覚を数値指定することで、狙った感覚で整列し直すことができます。
この記事を読んだ方におすすめの記事
Figmaのオートレイアウトの基本的な使い方
今回は、Figmaを代表する機能のひとつである「オートレイアウト（Auto layout）」の基本的な使い方を、シンプルな画面レイアウトを実際に作りながら紹介します。また、この記事内で作成した画面レイアウトのサンプルファイルを公開・配布していますので、自由にご利用ください。 ...
