4-2. オブジェクトの整列

1.オブジェクトを整列する

オブジェクトを整列するには、プロパティパネル上部位置する図1赤枠の部分から操作することが出来ます。

左から順番に説明します。

• 左揃え
• 水平中央揃え
• 右揃え
• 上揃え
• 垂直中央揃え
• 下揃え
• 均等間隔で整列オプション

オブジェクトが単体の場合、整列させると図2のように、フレーム対して整列が行われます。図2は、水平中央揃え、垂直中央揃えを適応させています。

複数のオブジェクトを整列させたい場合は、整列させたい複数のオブジェクトを選択した状態で、整列パネルから場合に応じた整列を行う事ができます。図3は垂直中央揃えを適応した場合です。

2.均等間隔で整列する

均等間隔で整列させたい場合は、プロパティパネルの一番右にある整列アイコンをクリックすると、図4の均等間隔で整列する3つの項目が表示されます。

上から順に解説します。

Tidy UP

等距離にないオブジェクトがある場合は、Tidy Up機能を使用することが出来ます。これによりオブジェクトが互いに等距離になるように整列することが出来ます。

TidyUPを使用する方法はいくつかあり、図４から選択する方法と、図5の方法の２つがあります。図5は、オブジェクトを複数選択すると、それに適した整列方法が右下に表示されます。クリックをすると、アイコンに適した整列が行われます。

Distribute Vertical Spacing

図6のように、垂直間隔に整列させることが出来ます。

Distribute Horizontal Spacing

図7のように、水平間隔に整列させることが出来ます。

3.パスに適用できる整列操作

上記方法を応用すると、パスにも整列機能を適応させることが出来ます。

まず、オブジェクトをダブルクリックし、パス編集モードに切り替えます。整列させたいパスポイントを複数選択し、整列パネルから整列を行うことで、図7のようにパスに、整列を行うことが出来ます。

4.スマートセレクション

Figmaの独自機能である、スマートセレクションの使い方を解説していきます。

スマートセレクションは、キャンバス内の2つ以上のオブジェクトを選択し、それらの間隔や配置を調整することが出来ます。スマートセレクションを使用する際は、Tidy UPをクリックしてから使用することが出来ます。