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

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

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

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

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

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

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

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

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

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