Figmaの制約：レスポンシブデザインを簡単に実現する

コンストレイントは、親フレームのサイズ変更時にレイヤーがどのように反応するかを定義し、さまざまな画面サイズやデバイスに対応したレスポンシブデザインを可能にします。フレーム内のオブジェクトは子オブジェクト、フレーム自体は親フレームと呼ばれます。

コンストレイントには水平方向（x軸）と垂直方向（y軸）の設定があります。デフォルトでは、オブジェクトは親フレームの上端および左端に固定されています。

水平方向のコンストレイント

• 左: オブジェクトを左側に対して相対的に配置;
• 右: 右側に対して相対的に配置;
• 左 + 右: オブジェクトのサイズがx軸方向でフレームとともに調整される;
• 中央: オブジェクトを水平方向の中央に配置;
• スケール: オブジェクトのサイズと位置をフレームに比例して調整。

垂直方向のコンストレイント

• 上: 上端に対して相対的に配置;
• 下: 下端に対して相対的に配置;
• 上 + 下: オブジェクトのサイズがy軸方向でフレームとともに調整される;
• 中央: オブジェクトを垂直方向の中央に配置;
• スケール: 水平方向のスケーリングと同様に、y軸方向で調整。

コンストレイントは、デザインパネル内のコンストレイントボックスを使って視覚的にも設定できます。

レスポンシブデザインにおけるコンストレイントの活用

• オブジェクト（例：テキスト、ボタン、画像）をレイアウトグリッドに合わせて正確に配置;
• フレームのサイズ変更時に各オブジェクトがどのように振る舞うべきかに応じてコンストレイントを調整;
• グループやマスクされたオブジェクトが意図通りに動作するよう、フレームにネストし直してコンストレイントを再設定。ショートカットはCTRL + ALT + G（Windows）、またはCommand + Option + G（Mac）;
• 親フレームのサイズを変更して、歪みやズレが発生しないかレスポンシブ性をテスト。