レイヤーのサイズ変更定義への制約の適用

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

すべてのFigmaプランでサポートされます。

編集可アクセス権があれば、誰でも制約を適用および編集できます

制約は、レイヤーのフレームをサイズ変更したときに、レイヤーがどのように対応するか指示するものです。これにより、さまざまな画面サイズやデバイスに対するデザインの表示方法を制御できます。

詳細については、以下のビデオをご覧いただくか、このまま続きをお読みください。

水平方向および垂直方向の制約

x軸(水平方向)とy軸(垂直方法)の両方に制約を適用できます。

水平方向

水平方向の制約は、x軸に沿ってフレームをサイズ変更したときに、レイヤーがどのように動作するかを定義します。

• 左は、フレームの左側に対してレイヤーの位置を維持します。
• 右は、フレームの右側に対してレイヤーの位置を維持します。
• 左右は、フレームの両側に対してレイヤーのサイズと位置を維持します。サイズを変更したときに、レイヤーがx軸に沿って拡大/縮小されることがあります。
• 中央は、フレームの水平方向の中央に対してレイヤーの位置を維持します。
• 拡大縮小は、レイヤーのサイズと位置をフレーム寸法の比率として定義します。これにより、サイズを変更してもその比率は維持されます。
  
  

  例: フレームの幅は100 pxでレイヤーの幅が70 pxの場合、レイヤーが親フレームの70％を占めていることを表します。もしフレームの幅を200 pxにサイズ変更すると、レイヤーの幅は200 pxの70%である140 pxに変更されます。

垂直方向

垂直方向の制約は、y軸に沿ってフレームをサイズ変更したときに、レイヤーがどのように動作するかを定義します。

• 上は、フレームの上部に対してレイヤーの位置を維持します。
• 下は、フレームの下部に対してレイヤーの位置を維持します。
• 上下は、フレームの上下に対してレイヤーのサイズと位置を維持します。サイズを変更したときに、レイヤーがy軸に沿って拡大/縮小されることがあります。
• 中央は、フレームの垂直方向の中央に対してレイヤーの位置を維持します。
• 拡大縮小は、レイヤーのサイズと位置をフレーム寸法の比率として定義します。これにより、サイズを変更してもその比率は維持されます。

レイヤーへの制約の適用

フレーム内のいずれのレイヤーにも制約を適用できます。フレーム外のレイヤー、およびオートレイアウトのフレームのレイヤーに制約を適用することはできません。

• 他のフレーム内でネストしたフレームにも制約を適用できます。
• レイヤーには水平方向および垂直方向の両方の制約を適用できます。
• グループには制約を適用できません。グループは、その中に含まれるレイヤーからグループの境界を継承します。境界を持つ単一のレイヤーとはみなされません。

レイヤーへの制約の設定:

1. フレーム内でレイヤーまたは親を選択します。キャンバス上の青い点は、現在適用されている制約を示しています:
2. プロパティパネルの制約の設定で、垂直方向および水平方向の制約を調整します。
   • ドロップダウンメニューを使用して、レイヤーの制約を設定します。
   • または、インタラクティブダイヤグラムの線をクリックして、[制約]を選択します。

制約の無視

フレームやレイヤーに適用されている制約を使用せずに、フレームやレイヤーをサイズ変更することが必要になる場合があります。修飾キーを長押することで、レイヤーに適用された制約を一時的に無視できます。

• Mac: サイズを変更するときにCommandを長押しします
• Windows: サイズを変更するときにCtrlキーを長押しします