Figmaのフレームでは Constraints を設定し、リサイズしたときに要素が追従するか固定されるかを決めておく
左右・上下のどこに固定するか、伸び縮みさせるかを要素ごとに決めておくと、フレームの幅を変えるだけでレスポンシブの確認ができる。
どんな問題を解決するか / いつ使うか
デスクトップ用に作ったフレームを狭めると、要素がズレたり、はみ出したりする。幅を変えながら見た目を確かめたいときに。
やり方
- フレームの中の要素を選ぶ（オートレイアウトの外の要素）。
- 右パネルの Constraints で、横方向（Left / Right / Left & Right / Center / Scale）と縦方向（Top / Bottom / Top & Bottom / Center / Scale）を選ぶ。
- ヘッダーのロゴ：Left ＋ Top
- 右上のメニューボタン：Right ＋ Top
- 横幅いっぱいの帯や区切り線：Left & Right
- 中央の見出し：Center
- フレームの端をドラッグして幅を変え、意図どおりに動くか確認する。
注意点
- オートレイアウトの中の要素は Constraints ではなく、Fill / Hug / Fixed のサイズ設定で制御する。両方を使い分ける。
- Constraints は「フレームの端からの距離」で動くので、あくまで確認用。実装のレスポンシブ設計は別に決める。
- 関連：LPはセクションごとにフレーム化し、親をオートレイアウトにして並べ替えを一瞬で行う
出典
- 投稿者: @wokobo_net
- 投稿: @wokobo_net · 2026-10-15
- 収集日: 2026-10-16（JST、10/15・10/16分の巡回をまとめて実施）