UI/UXデザインツール『Figma』入門

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

  • UIデザイン
  • UXデザイン
  • プロトタイピング
  • Webデザイン

プロパティパネルの上部には、オブジェクトを整列する機能があります。複数のオブジェクトを整列するときや、フレームに対してオブジェクトを整列させることが可能です。このレッスンではそれらの操作方法の解説を行っていきます。

公開日:2019/08/21最終更新日:2021/08/05

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

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

図1 整列パネル

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

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

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

図2 水平中央揃え、垂直中央揃え

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

図3 垂直中央揃え

2.均等間隔で整列する

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

図4 均等間隔

上から順に解説します。

Tidy UP

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

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

図5 Tidy UP

Distribute Vertical Spacing

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

図6 垂直間隔に整列

Distribute Horizontal Spacing

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

図7 水平間隔に整列

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

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

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

図8 パスポイントの整列

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

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

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

図9 スマートセレクション

理解度チェック





UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう



このレッスンの著者