フレームをリサイズするたびに要素がズレる原因は、constraints（制約）の未設定です。Left / Right / Center / Scale / Left+Rightの5種類を正しく選ぶだけで、PC・スマホ両対応のUIが完成します。この記事では設定手順から実務での使い分けまで解説します。
▶ 3日で初案件PR
この記事でわかること
constraintsの5種類（Left・Right・Center・Scale・Left+Right）の役割と使い分けがわかります。3ステップで設定完了できる具体的な手順を習得できます。「設定したのに効かない」トラブルの原因と3段階の対処法を確認できます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Figmaのconstraintsは「親フレームがリサイズされたとき、子要素をどう動かすか」を指定する機能です。Left・Right・Center・Scale・Left+Rightの5種類を要素の役割に応じて使い分けることで、画面サイズが変わっても崩れないUIを効率よく設計できます。フリーランスとして複数デバイス対応の案件を受けるなら、この設定を一度マスターするだけでリサイズ後の修正作業が大幅に減ります。
今日やるべき1つ
既存のFigmaファイルを開き、ヘッダーの子レイヤーを選択してconstraintsパネルをLeft+Topに設定し、フレーム幅を変えて崩れないかを確認してください（5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| constraintsが何か分からない | Figma constraintsは5種類で崩れを防止 | 3分 |
| 設定場所と手順を確認したい | Figma constraintsは3ステップで設定完了 | 3分 |
| Left/Right/Centerのどれか迷う | Figma constraintsは要素の役割で使い分け | 5分 |
| オートレイアウトとの違いを知りたい | Figma constraintsとAuto Layoutは目的が異なる | 4分 |
| 崩れたときの対処法が知りたい | Figma constraintsが効かないときの3段階対応 | 3分 |
| 実務での活用パターンを知りたい | Figma constraintsは5つの仕組みで実務を効率化 | 7分 |
Figma constraintsは5種類で崩れを防止
「フレームをリサイズするたびにボタンの位置がズレる」という経験をしたことがある方は多いはずです。constraintsが未設定か、意図と異なる制約が選ばれていることが原因です。まずconstraintsの本質的な役割を理解してください。
constraintsは親フレーム基準で子要素の位置を決める仕組み
constraintsとは、親フレームのサイズが変更されたときに、内側の子要素がどう振る舞うかを指定する機能です。重要なのは「絶対座標ではなく、親フレームとの相対関係で位置が決まる」という点です。
「constraintsはframeのサイズが変わったときに、中のUI部品がどう振る舞うかを決めるもの」（Figmaのconstraints徹底解説｜うっくん）という説明が実務での理解軸として的確です。つまり制約を設定しておけば、フレーム幅を375pxから1440pxに広げても、各要素が事前に決めたルール通りに動きます。
この前提を押さえないまま制約を設定すると、「設定したはずなのに動かない」という混乱が起きます。まず親子関係とFrameという構造を確認するのが最初のステップです。
constraintsが機能する前提条件はFrameのみ
constraintsが動作する条件は1つだけです。親要素がFrameであることです。GroupやSectionを親要素にしている場合、constraintsパネルは表示されても意図した動作をしません。
Figma公式ヘルプ「レイヤーのサイズ変更定義への制約の適用」でも、制約はFrame内の子レイヤーに適用するものとして定義されています。constraintsが効かないと感じたら、まず親レイヤーの種類を確認してください。GroupをFrameに変換するには、右クリック→「Frame selection」を選択します。変換後は子要素のconstraints設定を改めて確認する必要があります。
見落としがちな点として、コンポーネントをFrame内に配置した場合、コンポーネント自体にはconstraintsが設定できますが、コンポーネント内部の子要素は別のconstraintsを持っています。外側フレームのconstraints設定を変えても、内部レイアウトには影響しないことを覚えておいてください。
水平方向と垂直方向の5種類の制約
制約は水平方向と垂直方向を独立して設定します。それぞれ5種類あり、組み合わせることで多様な動作を実現できます。
水平方向の選択肢はLeft・Right・Left+Right・Center・Scaleの5種類です。垂直方向はTop・Bottom・Top+Bottom・Center・Scaleの5種類です。例えばボタンを右端に固定したい場合は水平方向をRight、垂直方向をTopに設定します。フッターを画面下部に固定したい場合は垂直方向をBottomにします。5種類それぞれの動作については次のセクションで詳しく解説します。
CHECK
▶ 今すぐやること: 既存ファイルの任意のフレームを選択し、子レイヤーをクリックしてconstraintsパネルが表示されるか確認する（2分）
Q: constraintsはGroupに設定できますか？
A： Groupを親要素にした場合、constraintsの設定項目は表示されますが、Frameのような相対位置制御は機能しません。GroupをFrameに変換してから設定してください。
Q： constraintsを設定しないとどうなりますか？
A： デフォルトではLeft+Topが適用されます。親フレームをリサイズしても子要素は左上からの絶対距離を保ったまま位置が固定されます。フレームが縮んだときに要素がはみ出すことがあります。
Figma constraintsは3ステップで設定完了
設定自体は非常にシンプルで、操作を覚えれば1要素あたり30秒以内で完了します。
ステップ1: 親要素がFrameかどうかを確認する
左側のレイヤーパネルで、設定したい子要素の親レイヤーを確認します。アイコンが四角フレームのもの（#マークに見える枠）がFrameです。親がGroupやSectionの場合はFrameに変換します。変換方法は対象レイヤーを右クリックし「Frame selection」を選択するだけです（所要時間：約30秒）。
この確認を省略すると「設定したのに動かない」という状況が発生します。他のデザイナーから受け取ったファイルや、古いFigmaファイルを流用する場合は必ず確認してください。
ステップ2: 子レイヤーを選択してConstraintsパネルを開く
制約を設定したい子レイヤーを選択します。複数要素を同時に設定したい場合はShiftを押しながら選択します。選択後、右側プロパティパネルの「Constraints / 制約」セクションを確認します。Figmaのバージョンによって「制約」と日本語表記される場合もあります。
パネルが表示されない場合は親要素がFrameになっていない可能性があります。また、Frame自体を選択している場合はconstraintsパネルは表示されず、Frameの子要素を選択する必要があります。「選択しているのは親ではなく子か」を意識してください。
ステップ3: 水平・垂直それぞれの制約を選択してリサイズで確認する
constraintsパネルで水平方向と垂直方向の制約をそれぞれドロップダウンから選択します。選択後は必ず親フレームのハンドルをドラッグしてリサイズし、実際の動作を確認してください。意図と異なる場合はすぐに別の制約に変更できます。
確認のときに押さえておきたいのは、MacはCommandキー、WindowsはCtrlキーを押しながらリサイズすると制約を一時的に無視できるという点です（Figma Help: 制約の適用）。意図的に制約を外したリサイズが必要な場面で使います。
CHECK
▶ 今すぐやること: フレームの子要素を1つ選択し、水平をLeft+Right、垂直をTopに設定してフレーム幅を変えて動作を確認する（3分）
Q: 複数の子要素に一括でconstraintsを設定できますか？
A： Shiftキーを押しながら複数の子要素を選択すると、まとめて同じconstraintsを設定できます。ただし要素ごとに異なる制約が必要な場合は個別に設定してください。
Q： constraintsを変更するとレイアウトが崩れますか？
A： 制約を変更しただけでは現在の表示は変わりません。フレームをリサイズしたときの動作ルールが変わるだけなので、変更後にリサイズして確認するのが安全です。
Figma constraintsは要素の役割で使い分け
Left・Right・Centerのどれを使えばいいか、最初は迷うことも珍しくありません。判断基準は「その要素がフレームリサイズ後にどこにいてほしいか」という問いに答えることです。
Leftは左端固定、Rightは右端固定が基本パターン
Leftは親フレームの左端から子要素の左端までの距離を固定します。フレームが横に広がっても、左端からの距離は変わりません。Rightは右端からの距離を固定します。
実務での使い分けとして、ロゴやハンバーガーメニューなど左寄せに固定したい要素はLeft、通知アイコンやカートボタンなど右端に固定したい要素はRightを使います。ナビゲーションバーの左ロゴと右ボタンを別々に設定することで、フレーム幅が変わっても両端に要素が残り続けます。
Leftだけ選んだときの注意点として、フレームを縮小しすぎると右端の要素と重なることがあります。各要素の最小幅を意識したレイアウト設計が前提になります。
Left+Rightで横幅いっぱいに伸縮する要素を作る
Left+Rightは左端からの距離と右端からの距離を両方固定します。フレームが広がれば要素も広がり、フレームが縮めば要素も縮みます。
テキスト入力フィールド、カード、バナーなど「余白を保ちながら横いっぱいに広がってほしい」要素に最適です。例えば左余白16px・右余白16pxのカードにLeft+Rightを設定すると、フレーム幅が360pxでも1440pxでも常に左右16pxの余白を保ちながら横幅が変化します。レスポンシブ対応で最もよく使われるパターンです。
Left+Rightは要素自体の幅が変わるため、テキストの折り返しや画像の縦横比に影響することがあります。画像に適用する場合は「画像の縦横比が崩れないか」を必ず確認してください。
CenterとScaleはナビ中央・比率保持に特化した制約
Centerは親フレームの中央から子要素の中央までの距離を固定します。フレーム幅が変わっても要素は常にフレームの中央付近にとどまります。ページタイトルや中央配置のCTAボタンに使います。
Scaleは少し性質が異なります。フレームに対する子要素の大きさの比率を保って拡大縮小します。背景装飾、イラスト、写真など「フレームに対して常に一定の割合で表示したい」要素に向いています。ただし要素のサイズそのものが変わるため、フォントサイズも変化します。テキスト要素にScaleを設定すると読みにくいサイズになることがあるため、テキストへの適用は慎重に判断してください。
| 制約 | 動作 | 適した要素 |
| Left | 左端からの距離を固定 | ロゴ、ハンバーガーメニュー |
| Right | 右端からの距離を固定 | 通知アイコン、カートボタン |
| Left+Right | 左右余白を固定して伸縮 | 入力フィールド、カード、バナー |
| Center | 中央からの距離を固定 | ページタイトル、CTAボタン |
| Scale | フレームに対する比率を維持 | 背景イラスト、SVGアイコン |
CHECK
▶ 今すぐやること: ヘッダーの左ロゴにLeft+Top、右ボタンにRight+Topを設定し、フレーム幅を360pxから1440pxに変えて崩れないかを確認する（5分）
Q: CenterとScaleの使い分けはどうすればいいですか？
A： Centerは要素の「位置」を中央に保つもの、Scaleは要素の「サイズ」をフレームに対する比率で変えるものです。テキストや固定サイズのボタンにはCenter、背景イラストや装飾にはScaleを使うと整理しやすいです。
Q： 同じ要素に水平と垂直で異なる制約を設定できますか？
A： 設定できます。例えば水平方向をLeft+Right（横いっぱいに伸縮）、垂直方向をTop（上端固定）という組み合わせが実務ではよく使われます。
PR提供: 日本デザインスクール（デザスク）
Figma constraintsとAuto Layoutは目的が異なる
「constraintsを使えばいいのか、Auto Layoutを使えばいいのか」と迷う方は多いはずです。この2つは競合する機能ではなく、解決する問題が異なります。
constraintsは親基準の位置固定、Auto Layoutは子要素間の並び制御
constraintsは「親フレームに対して子要素がどこにいるか」を決めます。一方Auto Layoutは「複数の子要素が互いにどう並ぶか」を決めます。
制約を正しく設定すると画面サイズが変わってもUIが崩れにくくなりますが、これはconstraintsが得意とする静的な位置固定の話です（Wantedly: Figma制約の実務解説）。Auto Layoutは子要素の追加・削除に応じてコンテナが自動的にサイズ変更される動的な制御を担います。
例えばナビゲーションバーを作る場面を考えます。ロゴを左端に固定してカートボタンを右端に固定するのはconstraints（Left+TopとRight+Top）の仕事です。ナビゲーションリンクを横並びにして、リンクを追加したら自動的にスペースが調整されるようにするのはAuto Layoutの仕事です。
Auto Layoutが使えるときはAuto Layoutを優先する
実務の判断基準として、「子要素の数が増減する可能性があるか」「子要素間のスペースを均等に保ちたいか」のどちらかがYesならAuto Layoutを選択します。両方Noであればconstraintsだけで十分対応できます。
Auto LayoutフレームにもconstraintsはHug / Fill / Fixedという形で存在します（kasoudesign: オートレイアウト vs 制約）。Auto Layout内の要素は「Fill container」を使うことでLeft+Rightと似た伸縮動作を実現できます。Auto Layoutを使いこなしている場合はconstraintsの出番はAuto Layoutの外側フレームに対する位置固定に限られることが多いです。
フリーランスとして複数のクライアント案件をこなすとき、ファイルを受け取った段階でAuto Layoutが使われているかconstraintsのみで設計されているかを把握することが、修正作業の効率に直結します。受け取ったファイルのレイヤーパネルでAuto Layoutアイコンの有無を確認することを習慣にしてください。
両方を使った実務でのレイアウト設計パターン
実務では多くの場合、Auto LayoutとconstraintsをH組み合わせて使います。具体的なパターンを1つ示します。
画面全体を囲む最外フレームにはconstraintsの設定は不要です。最外フレーム内のヘッダー・メインコンテンツ・フッターという各セクションフレームにはTop/Center/BottomなどのVertical制約を設定します。各セクションフレームの内部はAuto Layoutで組み、横並び・縦並びのアイテムを管理します。個々のUI部品（ボタン・アイコン）をAuto Layoutフレーム内でFill containerに設定することで全体が伸縮に対応できます。
CHECK
▶ 今すぐやること: 手元のFigmaファイルでAuto Layoutフレームを1つ選択し、その中の子要素のconstraintsパネルがどう表示されるかを確認する（3分）
Q: Auto Layoutを使っているフレームにconstraintsを設定できますか？
A： Auto Layout内の子要素はFill / Hug / Fixedという専用のサイズ設定を使います。Auto LayoutフレームをFrame内に配置した場合、そのAuto LayoutフレームにはLeft+TopなどのconstraintsをAuto Layout外から設定できます。
Q： constraintsだけでレスポンシブデザインは完成しますか？
A： シンプルな固定レイアウトであれば可能です。要素の追加削除に動的に対応するUIや、コンポーネントリストが伸縮するインターフェイスはAuto Layoutなしでは対応が困難です。実務では両方を組み合わせて使うことをお勧めします。
Figma constraintsが効かないときの3段階対応
「設定したはずなのにリサイズしても動かない」という状況の原因は3つのパターンに絞られます。
原因1: 親要素がFrameではない
最も多い原因です。左側レイヤーパネルで親レイヤーのアイコンを確認します。Groupアイコン（点線の四角）になっている場合はFrameではありません。
対処方法は親レイヤーを選択して右クリック→「Frame selection」を選択することです。GroupがFrameに変換されると、子要素のconstraintsが正常に機能します。Frame変換後、子要素のconstraintsがデフォルト（Left+Top）にリセットされることがあるため、再度設定が必要です。変換後に必ずリサイズして動作確認をしてください。
原因2: フレームリサイズではなくコンテンツの位置を動かしている
constraintsはフレームのサイズを変更したときに機能します。フレームを移動させたり、要素を直接ドラッグして位置を変えたりする操作では制約は発動しません。
確認方法として、フレームを選択した状態で右側パネルのW（幅）またはH（高さ）を数値入力で変更してみてください。この操作でconstraintsが意図通りに機能するか確認できます。ドラッグ操作だと意図せず要素を移動させてしまうことがあるため、数値入力でのリサイズが確実です。
原因3: Auto Layoutフレーム内で通常のconstraintsを設定しようとしている
Auto Layoutが設定されたフレームの子要素には、通常のLeft/Right/Centerなどのconstraintsは表示されません。代わりにFill / Hug / Fixedというサイズ設定が表示されます。
これを「constraintsが効かない」と誤解するケースがよくあります。Auto Layoutフレーム内では「Fill container」が横幅いっぱいに伸縮させるLeft+Right相当の設定です。「Fixed」が固定幅の設定です。「Auto Layoutのとき用の制約設定」として別途理解してください。
| 原因 | 確認方法 | 対処 |
| 親がGroupになっている | レイヤーパネルのアイコン確認 | 右クリック→Frame selectionで変換 |
| 要素をドラッグで動かしている | W/Hを数値入力でリサイズして確認 | 数値入力でフレームをリサイズする |
| Auto Layout内で設定しようとしている | constraintsパネルの表示項目を確認 | Fill/Hug/Fixedを使う |
CHECK
▶ 今すぐやること: 制約が効かない要素を1つ選び、親レイヤーのアイコン種別（FrameかGroupか）を確認する（1分）
Q: Frameに変換したのに制約が動かないのはなぜですか？
A： Frame変換後に子要素のconstraintsがデフォルト値に戻っている可能性があります。子要素を選択して再設定し、リサイズで動作を確認してください。
Q： 制約の一時解除はどうやりますか？
A： MacはCommandキー、WindowsはCtrlキーを押しながら親フレームをリサイズすると、制約を無視したリサイズができます。全体レイアウトの大幅調整時に便利です。
Figma constraintsは5つの仕組みで実務を効率化
実際のフリーランス案件では、constraintsを設定するだけでなく「なぜこの制約にしたか」をクライアントや他のデザイナーに説明できることが求められます。5つの実務ハックを紹介します。
ハック1: 要素タイプ別の制約テンプレートで設定時間を削減
【対象】: 複数画面サイズ対応案件を担当するフリーランスデザイナー
【手順】: 案件開始時に「ヘッダー：ロゴLeft+Top / ボタンRight+Top」「入力フォーム：Left+Right+Top」「フッター：Left+Right+Bottom」をドキュメントに書き出します（10分）。Figmaの各フレームにレイアウト設計を始める前に、このテンプレートを参照しながら制約を先に設定します（5分/フレーム）。全ての主要フレームにテンプレート適用後、各ブレークポイント（360px・768px・1440px）でリサイズして崩れがないか一括確認します（15分）。
【コツと理由】: デザインが完成してから制約を後付けで設定すると「この要素がどう動くべきだったか」を思い出しながら作業することになり、迷いが生じます。レイアウト設計と同時に制約を設定する方が合計作業時間を削減できます。先にテンプレートを作ることで判断コストがなくなるのが根本的な理由です。
【注意点】: テンプレートを全要素に機械的に適用する必要はありません。装飾用の画像やSVGアイコンはScaleが適切なことが多く、テンプレートと異なる判断が必要です。「テンプレートは9割の要素に使い、残り1割はその都度判断する」という運用が現実的です。
ハック2: 3分類での言語化でクライアント説明を正確に伝える
【対象】: クライアントへの仕様説明が必要なフリーランスデザイナー
【手順】: デザイン仕様書またはコメント機能で、設定した制約を「固定（Left/Right）」「伸縮（Left+Right）」「中央維持（Center）」の3分類に翻訳して記載します（5分/画面）。リサイズ後の動作をFigmaのプロトタイプ機能でビデオ録画し、クライアントにSlackやNotionで共有します（10分）。クライアントから修正要望があった場合は「固定・伸縮・中央維持のどれにしたいか」を質問として返し、制約設定に翻訳します（3分/要望）。
【コツと理由】: Left/Right/Center/Scaleという技術用語を使うと「デザイナー任せ」となり、後から「思ったのと違う」という修正が発生しやすくなります。「固定・伸縮・中央維持」の3語に変換して伝える方がクライアントとの認識齟齬が少なくなります。3分類の言語化によって、クライアントが自分でレイアウトの意図を理解・確認できるようになるため、手戻り工数の削減につながります。
【注意点】: 3分類はあくまでコミュニケーション用の簡略化です。Scaleのような特殊な制約は「比率で拡大縮小」と別途説明が必要な場合があります。3分類だけで全てを説明しようとすると逆に混乱が生じるため、例外があることを最初に伝えておくのが安全です。
ハック3: ブレークポイント3点確認で崩れを本番前に防ぐ
【対象】: スマホ・タブレット・PCの3デバイス対応デザインを担当するデザイナー
【手順】: デザイン完了後にFigmaで親フレームの幅を360px（スマホ最小）に変更し、すべての要素が表示範囲内に収まっているかを確認します（5分）。768px（タブレット）に変更して同様に確認します（3分）。1440px（PC最大）に変更して確認し、要素間の余白が過大になっていないかを合わせて確認します（3分）。
【コツと理由】: 制約の設定ミスは表示確認をして初めて発見できます。3つのブレークポイントで実際にリサイズして目視確認することで、本番後のトラブルを防げます。360px確認で「ボタンが画面外にはみ出す」、1440px確認で「余白が広がりすぎてスカスカに見える」という問題を事前に発見できます。
【注意点】: 3点確認で問題なくても、実機での表示と差異が出ることがあります。iOSのセーフエリア（ホームバーエリア）や、ブラウザのアドレスバーの影響を受けるスマホデザインは、Figmaプレビュー機能での実機確認を合わせて行ってください。Figmaのミラーアプリをスマホにインストールしておくと実機確認が即座にできます。
ハック4: 制約コメントで引き継ぎ工数を減らす
【対象】: チームや後任デザイナーへファイルを引き継ぐフリーランス
【手順】: 制約の意図が分かりにくいフレームにFigmaのコメント機能でメモを追加します（例:「このカードはLeft+Right設定。左右余白16px固定のため、幅を変えるときは親フレームを変更すること」）（2分/フレーム）。複雑な制約設定（ScaleとLeft+Rightの組み合わせ等）にはコメントで理由を残します（3分/箇所）。ファイル引き継ぎ時にコメント一覧を相手に確認してもらい、質問があれば補足説明します（15分/引き継ぎ）。
【コツと理由】: Figmaファイルの制約設定は見えにくいため、後から触る人が「なんでこう動くんだろう」と混乱するのが一般的です。なぜこの制約なのかを言語化してコメントで残すことで、引き継ぎ後の問い合わせ時間を削減できます。コメントで意図を残すことで引き継ぎ相手が自律的に判断できるようになります。
【注意点】: コメントを入れすぎると逆にノイズになります。「一目見れば分かる要素（左上固定のロゴ等）にはコメント不要」という基準を持ってください。複雑な制約と組み合わせを使った箇所にだけコメントを残すのが実務では最も効率的です。
ハック5: 装飾要素にScaleを適用して比率崩れを防止する
【対象】: 背景イラストやロゴマークを複数サイズフレームに配置するデザイナー
【手順】: SVGアイコン・イラスト・背景装飾を配置した子レイヤーを選択します（1分）。constraintsパネルで水平方向・垂直方向ともにScaleを選択します（30秒）。親フレームを縮小・拡大してアスペクト比が維持されているかを目視確認します（2分）。
【コツと理由】: SVGアイコンや背景イラストにLeft+Topを設定すると、親フレームが縮んだときに要素が右下にはみ出すことがあります。Scaleはフレームに対する要素の占有比率を記録しており、フレームサイズが変わると同じ比率で要素サイズを自動調整します。比率を自動で維持できるのがScaleを選ぶ根本的な理由です。
【注意点】: テキスト要素にScaleを使うと、フレームサイズに比例してフォントサイズが変わります。12pxのラベルがフレーム縮小時に6pxになって読めなくなるケースがあります。テキストにはScaleを使わないことを基本ルールとして覚えておいてください。
CHECK
▶ 今すぐやること: 現在の案件ファイルでヘッダー・カード・フッターの制約設定を確認し、テンプレートと一致しているか棚卸しする（3分）
Q: コンポーネント化されたボタンにもconstraintsを設定できますか？
A： はい、設定できます。コンポーネントをFrame内に配置した場合、そのコンポーネント要素に対してLeft/Right/Centerなどの制約を設定できます。コンポーネント内部の子要素の制約は、コンポーネントのメインコンポーネントで管理します。
Q： 複数の制約パターンを試すときの効率的な方法はありますか？
A： 対象のフレームをMacはCommand+D、WindowsはCtrl+Dで複製し、複製したフレームで別の制約を試すと、元のデザインを崩さずに比較できます。3〜4パターンを並べてリサイズ比較すると最適な制約が素早く選べます。
constraintsを5種類で使い分けて崩れゼロのUIへ
Figmaのconstraintsは、親フレームのリサイズに対して子要素の動き方を5種類から指定する機能です。Left・Right・Left+Right・Center・Scaleを要素の役割に応じて使い分けることで、360pxから1440pxまで崩れないUIを設計できます。
設定で最初に確認すべきは「親要素がFrameであること」、次に「子要素を選択してconstraintsパネルを開くこと」、そして「設定後にリサイズして実際の動作を確認すること」の3点です。この順番を守るだけで、「設定したのに動かない」というトラブルの大半を防げます。フリーランスとして案件を効率よく進めるために、要素タイプ別のテンプレートを一度作っておくことを強くお勧めします。
| 状況 | 次の一歩 | 所要時間 |
| まだconstraintsを設定したことがない | 既存ファイルのヘッダーにLeft+Topを設定して確認 | 5分 |
| 設定はしているが崩れが直らない | 親要素のFrame確認→子要素再選択→再設定 | 10分 |
| Auto Layoutとの使い分けに迷っている | 子要素が増減するかどうかを判断基準にして決定 | 3分 |
| クライアントへの説明に困っている | 「固定・伸縮・中央維持」の3分類で仕様書に記載 | 15分 |
Figma constraints 使い方に関するよくある質問
Q: Figmaの制約（constraints）はどこで設定しますか？
A： 子レイヤーを選択した状態で、右側プロパティパネルの「Constraints」または「制約」セクションに表示されます。表示されない場合は、親要素がFrameではない可能性があります。親レイヤーを確認してFrameに変換してから再度子要素を選択してください。
Q： constraintsとAuto Layoutはどちらを使うべきですか？
A： 子要素の数が増減する可能性がある場合やアイテム間のスペースを均等に保ちたい場合はAuto Layoutを使います。要素数が固定で、親フレームに対する相対位置を保ちたい場合はconstraintsが適切です。実務では両方を組み合わせることが最も多いパターンです。
Q： constraintsが効かない原因は何ですか？
A： 主な原因は3つです。1つ目は親要素がGroupになっている（Frameに変換が必要）。2つ目はフレームをリサイズしていない（要素をドラッグで動かしても制約は発動しない）。3つ目はAuto Layoutフレームの子要素に通常のconstraintsを設定しようとしている（Auto Layout内ではFill/Hug/Fixedを使います）。
【出典・参照元】
Figma Help: レイヤーのサイズ変更定義への制約の適用 – Figma公式ヘルプ（日本語）
Figmaのconstraints徹底解説｜うっくん – UI/UXデザイナーによる実務解説
Wantedly: Figma制約の実務解説 – ノンデザイナー向け実務視点
kasoudesign: オートレイアウト vs 制約 – Auto LayoutとConstraintsの使い分けガイド