Figmaでフレーム内の配置制御をする制約の使い方
この記事では、Figmaの制約（Constraints）機能について紹介します。フレーム内の要素をオートレイアウトを使用せずに相対的な位置で制御したい、といったシーンでその挙動をコントロールすることができる機能です。
この記事のターゲット
Figmaを使い始めたばかりで、制約機能の使い方がよくわからない方
オートレイアウトは知っているが、制約との違いや使い分けに迷っている方
画面サイズが変わるとレイアウトが崩れてしまい、困っている方
制約（Constraints）とは?
制約（Constraints）とは、親フレーム（コンテナ）のサイズが変更されたときに、その中にある子レイヤー（オブジェクト）がどのように振る舞うかを相対的な位置で定義するルールです。
例えば、スマートフォンの画面デザインをタブレットサイズに引き伸ばしたとき、ボタンが画面の右端に固定されたままにするか、画面幅に合わせて伸び縮みするか、といった挙動を指定できるというわけです。
この設定を正しく行うことで、様々なデバイスサイズに対応できる、壊れにくいデザインを効率的に作成できます。
使用できる制約の種類
制約は、親フレーム内の子レイヤーを選択した状態で、右側のプロパティパネル（デザインタブ内）にある「制約」セクションで設定します。
制約は水平方向（横）と垂直方向（縦）のそれぞれに対して設定する仕組みになっています。
水平方向の制約
左（Left）
親フレームの左端からの距離を固定します
右（Right）
親フレームの右端からの距離を固定します
左+右（Left + Right）
親フレームの左端と右端の両方からの距離を固定します。親フレームの幅が変わると、要素自体の幅が伸縮します
中央（Center）
親フレームの中央に対する相対的な位置を維持します
拡大縮小（Scale）
親フレームの幅の変更に比例して、要素の位置と幅がスケーリング（拡大・縮小）します
垂直方向の制約
上（Top）
親フレームの上端からの距離を固定します
下（Bottom）
親フレームの下端からの距離を固定します
上+下（Top + Bottom）
親フレームの上端と下端の両方からの距離を固定します。親フレームの高さが変わると、要素自体の高さが伸縮します
中央（Center）
親フレームの中央に対する相対的な位置を維持します
拡大縮小（Scale）
親フレームの高さの変更に比例して、要素の位置と高さがスケーリングします
それぞれの動作を実際に試してみると、その違いが理解しやすいと思います。
制約の基本的な使い方
制約は以下の手順で設定します。
1. 子レイヤーの選択
まず、制約を設定したいレイヤー（親フレームの中にある要素）を選択します。
2. プロパティパネルでの設定
右側のプロパティパネルにある「制約」セクションで、目的の動作に合わせて水平方向と垂直方向の制約を選択します。
例えば、画面右上に固定したいヘッダーアイコンの場合は、次のように設定すると良いでしょう。
水平方向:右
垂直方向:上
3. 動作の確認
設定が完了したら、親フレームのサイズ（幅や高さ)をドラッグして変更し、選択した子レイヤーが意図した通りに動くか確認します。
制約とオートレイアウトの違い
Figmaにはレイアウトを制御する機能としてオートレイアウト（Auto Layout）もありますが、「制約」とは役割が異なります。
制約（Constraints)）
親フレームと子レイヤーの関係を定義する
親のサイズ変更に対して、子がどう振る舞うかを決める
オートレイアウト（Auto Layout）
兄弟レイヤー同士の関係（間隔、整列、順序）を定義する
コンテンツの量に応じてフレームのサイズが自動で変わる
多くの場合、これら2つの機能は組み合わせて使用されます。例えば、オートレイアウトで作成したボタン（親フレーム）を、画面（さらに大きな親フレーム）の右下に「制約」で相対位置に配置する、といった使い方です。
両方の機能をうまく組み合わせることで、より柔軟で効率的なデザインパターンを設計するのに役立ちます。
