はじめに

この機能を使用できるユーザー

すべてのチームまたはプランでサポートされます

ファイルの編集可アクセス権のあるユーザーのみが、レイヤーの位置、サイズ、配置を変更できます。

キャンバスに追加するすべてのシェイプ、テキストオブジェクト、画像には独自のレイヤーがあり、まとまった複雑なデザインを作成する際は各レイヤーを個別に調整することができます。

この記事では、レイヤーの配置、位置、寸法、回転の調整方法を説明します。個々のレイヤーだけでなく、フレーム、コンポーネント、グループ、選択範囲にも適用されます。

これらのプロパティのほとんどは、右サイドバーのデザインパネル上部にあります。また、キャンバス自体でも多くのプロパティを調整できます。

配置

配置ツールを使って、レイヤーを相互に関連付けながらキャンバス上に並べることができます。選択に基づいて、レイヤーの配置が決定されます。

• オブジェクトまたはレイヤーを1つ選択: レイヤーは親に合わせて配置されます。親は、グループ、フレーム、またはコンポーネントを含むフレームの場合があります。
• 複数のレイヤーを選択: レイヤーは互いに、または親フレームに対して、またはインスタンス内の選択したレイヤーに対して位置合わせされます

右サイドバーの配置コントロールを使用して、オブジェクトを親レイヤーに揃えたり、複数のオブジェクトを互いに揃えたりします。

• 左揃え
• 水平方向の中央揃え
• 右揃え
• 上揃え
• 垂直方向の中央揃え

以下のキーボードショートカットも使用できます。

アクション	キーボードショートカット
上揃え	AltW
左揃え	AltA
下揃え	AltS
右揃え	AltD
垂直方向の中央揃え	AltV
水平方向の中央揃え	AltH

Shift キーを押しながら整列コントロールをクリックすると、複数のオブジェクトがグループとして親フレームに対して整列されます。オブジェクトが複数のフレームにまたがって配置されている場合は、それぞれの親フレームに合わせて配置されます。

設定にスナップ

オブジェクトのサイズ変更、レイヤーの移動、ベクターポイントの移動時には、スナップ設定を使用して、キャンバス上の他の要素の位置に合わせます。視覚的な指標として、キャンバス上に赤いガイドが表示されます。

• ジオメトリにスナップ： ベクター編集モードでのみ使用します。この設定がオンになっている場合、ベクターポイントをクリックしてドラッグすると、他のベクターポイントに合わせて配置されます。
• オブジェクトにスナップ: 異なるオブジェクトの中心と最も外側の点を整列させます。
• ピクセルグリッドにスナップ: 要素をエクスポートする際のピクセルのずれを防ぐために、基盤となるグリッドにオブジェクトを整列させます。この設定では、ピクセルグリッドは表示される必要はありません。

[設定にスナップ]のオン/オフを切り替えるには、Figmaデザインファイルを開き、環境設定に進みます。これらの設定はクイックアクションメニューでも見つけることができます。

[設定にスナップ]は、すべてのFigmaデザインファイルに適用されます。

[ジオメトリにスナップ]または[オブジェクトにスナップ]が有効になっている場合に、Controlを押すと一時的に無効にできます。

Controlを使用して一時的に[ピクセルグリッドにスナップ]を無効にするには、ベクター編集モードであることを確認してキャンバスにズームインします。ズームインが十分なことを確認するには、ピクセルグリッド⇧ Shift 'をオンにして、グリッドが表示されるまでズームインします。このショートカットを使用するためには、ピクセルグリッドをオンにする必要はありません。

配分

レイヤー内のオブジェクト間に均等なスペースを作成するには配分を使用します。複数のレイヤーまたはオブジェクトを選択する必要があります。

配分の際には、最も外側のオブジェクトまたはレイヤーの位置に合わせて配置されます。

• 水平方向のスペースを均等に配分: 左右の両端のオブジェクトまたはレイヤーの位置に合わせて配置されます。
• 垂直方向のスペースを均等に配分: 上下の両端のオブジェクトまたはレイヤーの位置に合わせて配置されます。
• 均等配置 (スマートセレクション) ↓

均等配置

レイヤーを行や列に1次元に素早く整列させたり、行と列を組み合わせて2次元のレイアウトを作成するには、均等配置を使用します。

その後、スマートセレクションを使用して、選択したオブジェクト間の水平および垂直間隔を調整します。 スマートセレクションの使用方法の詳細→

選択に応じて、次のオプションのいずれかが表示されます。

• 均等配置垂直選択(1次元)
• 均等配置水平選択(1次元）
• 均等配置（2次元)

1次元の選択

水平軸または垂直軸(1次元)のいずれかで選択すると、オブジェクトが重ね合う軸に基づいてオブジェクトが配置されます。

x軸上のオブジェクトには水平方向の間隔のみが調整され、y軸上のオブジェクトには垂直方向の間隔のみが調整されます。

[間隔]の値を設定には、選択範囲内で最も一般的な間隔が使用されます。

2次元の選択

オブジェクトを2次元のグリッドのように均等配置する場合、均等配置プロセスは非常に厳密です。オブジェクト間の垂直方向および水平方向の間隔が調整されます。

垂直方向および水平方向の間隔は、開始位置によって異なる場合もあれば、同一あるいは固有の場合もあります。レイヤーの均等配置後、垂直方向と水平方向の間隔を調整できます。

元の選択範囲の境界内にオブジェクトが再配置される「配分」とは異なり、「均等配置」ではすべてのオブジェクトが選択範囲の左上隅に揃えてグリッドに配置されます。

配分か均等配置か

1次元の選択範囲で均等配置をすると、配分と同じに配置されます。均等配置は配分機能にいくつかのロジックが追加された機能といえます。

均等配置機能の主な目的は、レイヤーをスマートセレクションの基準を満たすように配置することです。つまり、レイヤーを等距離間隔に並べて、いずれかの軸に重ね合わせて配置することです。

• 配分はレイヤー間に均等な距離を設定するだけであり、レイヤーがいずれかの軸上重なり合う必要はありません。均等配置は必要に応じて両方を行います。
• 均等配置を使用すると、オブジェクトを両軸に沿って整列させることができます。配分は、水平方向の間隔を配分するか、垂直方向の間隔を配分するか、一度に1つの軸に沿ってのみ機能します。

配分でも均等配置でも、フィールドまたはフィールドに間隔が表示されます。これは最も一般的な間隔値(モード)に基づいています。

位置

キャンバス内のレイヤーの位置を水平方向(X軸)と垂直方向(Y軸)の2つの次元または軸のいずれかに沿って調整することができます。

レイヤーの位置は、X座標とY座標を使用してキャンバス上に表されます。XY座標はレイヤーの境界の左上隅を参照します。

1. 右サイドバーの[デザイン]パネルを開きます。
2. XフィールドとYフィールドを使用して、レイヤーの座標を調整します。
3. 基本的な数式(- + * / ^ ())を使用して、X座標とY座標の値を簡単に調整することもできます。既存の値の前後に式を追加したり、完全に新しい数式で置き換えたりすることができます。数式の詳細↓

レイヤーの調整

矢印キーでレイヤーの位置を調整します。2つのデフォルト調整量([小さな調整]と[大きな調整])を設定することができます。

デフォルトでは、[小さな調整]は1に設定され、[大きな調整]は10に設定されています。これらの値は解像度に依存しないポイントで表されます。小さな調整と大きな調整の値の設定→

矢印でレイヤーを調整する

矢印キーを使用して選択範囲を調整します。矢印キーは小さな調整の設定用です。大きな調整の設定を使用するには、Shiftキーを押したままにしてください。

• ← 左
• ↓ 下
• ↑ 上
• → 右

サイズ

キャンバス内のすべてのレイヤーには独自の寸法があります。レイヤーの寸法を表示するには、次の手順に従います。

1. キャンバスまたはレイヤーパネルでレイヤーを選択します。
2. レイヤーのバウンディングボックスの下にある青いラベルに寸法が表示されます。
3. すべてのレイヤーの寸法は、右サイドバーのWフィールドとHフィールドを使用して表示することもできます。

レイヤーを選択して、レイヤーの寸法を変更します。その後の手順については、いくつかの方法があります。

• レイヤーの幅を調整するには、レイヤーの左または右の境界にカーソルを合わせ、が表示されたらクリックしてドラッグしてサイズを変更します。
• レイヤーの高さを調整するには、レイヤーの上部または下部の境界にカーソルを合わせ、が表示されたらクリックしてドラッグしてサイズを変更します。
• レイヤーの幅と高さを調整するには、レイヤーの境界のいずれかの角にカーソルを合わせ、が表示されたらクリックしてドラッグしてサイズを変更します。
• 右サイドバーでWフィールドとHフィールドを調整します。

縦横比を固定

ボタンを使用して、レイヤーの寸法を現在の比率に制約することができます。この設定は、右サイドバーの寸法設定(WおよびH)の横にあります。

この設定がオンになっていると、サイドバーでレイヤーのサイズを変更する際に、元の幅と高さの比率が維持されます。WまたはHのいずれかを更新すると、もう一方も自動的に更新されます。

回転

オブジェクト、フレーム、グループなどの個々のレイヤーや、選択したレイヤーを回転します。選択領域の水平方向と垂直方向の中心が回転の基準点として使用されます。

キャンバスに追加する各レイヤーの回転は、デフォルトでは0°に設定されています。選択範囲を両方向に180°回転させることができます。

• 正の角度は反時計回りに180°まで開きます。
• 負角度は時計回りに-180°まで開きます。

いずれかの方向に180を超えると、その方向の0°までカウントダウンされます。たとえば、180°を超えて15°進むと、-165°の角度になります。

右サイドバー

右サイドバーのデザインパネル上部に回転フィールドがあります。

1. 回転させるレイヤーまたはオブジェクトを選択します。
2. 右サイドバーのフィールドに回転方法を入力します。

キャンバス

1. アイコンが表示されるまで、レイヤー境界の 1 つのすぐ外側にカーソルを合わせます。
2. クリックしてドラッグして選択範囲を回転させます。
   • 時計回りにドラッグすると、負の角度(-180°に向かって)を回転します。
   • 反時計回りにドラッグすると、正の角度(180°に向かって)を回転します。
3. Shiftキーを押したままにしておくと、回転値が15の倍数にスナップされます。

レイヤーの反転

回転レイヤーの複製に、水平反転と垂直反転の変換を使用することもできます。

右クリックメニューで反転変換を適用するか、キーボードショートカットを使用します。

• 水平反転: ⇧ Shift H
• 垂直反転: ⇧ Shift V

キャンバスに追加するすべてのシェイプ、テキストオブジェクト、画像にはキャンバス内の独自のレイヤーがあり、まとまった複雑なデザインを作成する際に各レイヤーを個別に調整することができます。

キャンバス内のレイヤーの位置を、水平方向(X軸)、垂直方向(Y軸)、深さ(Z軸)のいずれかの次元または軸に沿って調整することができます。

X 軸や Y 軸とは異なり、Z 軸に対して調整できる特定のフィールドはありません。代わりに、レイヤーの深さ(Z 軸)または階層を調整するには、レイヤーパネルで順序を変更します

これにより、キャンバスの前後にレイヤーを移動したり、グループやフレームからレイヤーを移動したりすることができます。 レイヤー間の関係の詳細→

左サイドバーのレイヤーパネルには、現在のページのすべてのレイヤーが表示され、レイヤーが現在積み重なっている順序(一番上のレイヤーが前面、一番下のレイヤーが背面)が反映されます。

レイヤーの順序の変更

レイヤーの順序を調整するには、いくつかの方法があります。

• 1

  レイヤーパネル

  レイヤーパネル内でレイヤーの順序を変更して、レイヤーの位置を調整します。

  1. 左サイドバーのレイヤーパネルを開きます。
  2. レイヤーをクリックしてドラッグし、レイヤー階層内の位置を変更します。
     • レイヤーを上に移動すると、前に移動します
     • レイヤーを下に移動すると、後に移動します
  3. リリースして適用します。

  注: オートレイアウトのフレーム内では、レイヤーの順序が逆になります。これは、オートレイアウトが重なり合うレイヤーをサポートするように設計されていないためです。

  オートレイアウトのフレーム内のレイヤーの順序を変更すると、フレーム内のレイヤーの位置と順序が変更されます。オートレイアウトのフレームの外でレイヤーの順序を変更しても、X軸またはY軸上のレイヤーの位置には影響しません。

  オートレイアウトの使用方法の詳細→

• 2

  キーボードショートカット

  前に移動:

  • Mac: ⌘Command ]
  • Windows: Ctrl ]

  前面に移動:

  • Mac: ⌘ Command ⌥ Option ]
  • Windows: Ctrl Shift ]

  後ろに送る:

  • Mac: ⌘ Command [
  • Windows: Ctrl [

  背面に送る:

  • Mac: ⌘ Command ⌥ Option [
  • Windows: Ctrl Shift [
• 3

  右クリックメニュー

  1. キャンバスでレイヤーを選択します。
  2. 選択肢を右クリックして、コンテキストメニューを開きます。
  3. 次から選択します。
     
     • 前面へ移動
     • 最前面へ移動
     • 背面へ移動
     • 最背面へ移動

値の調整

数式

一部のフィールドでは数式が使えます。これには、位置、寸法、回転のフィールドなどがあります。

既存の値に対して+ の加算、- の減算、* の乗算、/ の除算の数式を使用して、レイヤーのサイズを変更できます。また、フィールド内でかっこ ( )を使用して、より複雑な方程式を作成したり、^ を使用して指数を作成したりすることもできます。

以下に例をいくつか追加しましたが、任意の数字を使用できます。

• + 10現在の値に10を足す
• - 20現在の値から20を引く
• *2現在の値に2を掛ける
• /4現在の値を4で割る
• ^2現在の値を2乗する
• (𝑥/2)+6現在の値を2で割り、6を加える(𝑥=現在の値)
• Mixed+100 異なる値を持つ2つ以上のオブジェクトに100を足す

数式は値の選択が混在している場合にも適用することができます。数式が位置、寸法、回転フィールドに入力されると、すべての選択されたレイヤーに変更が適用されます。

フィールドのスクラブ

手動で値を入力するだけでなく、フィールドを「スクラブ」することもできます。スクラブを使用すると、アクティブなマウスまたはタッチパッドをドラッグして、フィールドの値を簡単に調整することができます。

これは、位置、寸法、回転のフィールドや、右サイドバーのその他のレイヤープロパティと設定に使用できます。

1. キャンバス上のレイヤーまたはオブジェクトを選択します。

2. 入力フィールドの横のラベルにカーソルを重ねると、スクラブカーソルが表示されます。入力フィールド自体にカーソルを重ね、以下の修飾キーを押し続けることもできます。

   • Mac: ⌥ Option
   • Windows: Alt

3. アイコンをクリックしてドラッグし、入力値を変更します。カーソルを左にドラッグすると値が小さくなり、右にドラッグすると大きくなります。

4. フィールドのスクラブ速度を変更します。画面上部にカーソルを移動すればスクラブ速度は上がり、画面下部に移動すれば下がります。

   画面下部に、現在の速度と、カーソル幅の差に関する通知が表示されます。スクラブの速度には、2x、1x、1/2、1/4の4種類があります。