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

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

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

水平方向の制約

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

垂直方向の制約

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

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

レスポンシブデザインのための制約の活用

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