Figmaでレスポンシブデザインを作るときは、PC版とスマホ版の完成画面だけでなく、その間の幅で要素がどう伸び、折り返し、並び替わるかを決めます。画面を縮小コピーするだけでは、文字量やボタンの幅が変わったときの動きを説明できません。
この記事ではFigma Designを対象に、カードUIを例としてAuto Layout、Hug・Fill・Fixed、画面幅ごとの構成変更を組み合わせる考え方を説明します。
まず「伸びる部分」と「切り替わる部分」を分ける
| 変化 | 例 | 設計で決めること |
|---|---|---|
| 幅に合わせて伸縮する | 本文、カード、入力欄 | 親との関係、最大・最小幅、余白 |
| 内容に合わせて高さが変わる | 複数行の見出し、説明文 | 文字の折り返しと親の高さ |
| 配置が切り替わる | 横並びから縦並び | 切り替える幅、順序、間隔 |
| 表示方法が変わる | ナビゲーションからメニューボタンへ | 別状態のデザインと操作 |
Auto Layoutはサイズと配置の関係を作る機能です。使うだけで、Webページのすべてのブレークポイントや操作が自動的に実装されるわけではありません。Figma内で確認する動きと、実装時に指定するルールを分けて用意します。
Hug・Fill・Fixedを軸ごとに選ぶ
幅と高さは、それぞれ別に設定します。ボタンなら幅を内容に合わせ、高さを一定にする、本文なら幅を親に合わせ、高さを文字量に合わせる、といった組み合わせになります。
| 設定 | 基本の動き | 使う例 |
|---|---|---|
| Hug contents | 子要素と余白に合わせて親が収まる | ラベルに合わせるボタン、内容量に応じるカード |
| Fill container | 親の利用可能な空間を埋める | 横幅を揃える本文やカード |
| Fixed | 指定した寸法を保つ | アイコン、確認用の画面幅 |
FillはAuto Layout内の子要素で使う設定で、最上位のフレームへそのまま適用するものではありません。また、同じ軸で「親は子に合わせる」「子は親を埋める」とすると、基準が循環するため設定が変わる場合があります。Figma公式：Auto Layoutガイド
細かな操作を先に確認したい場合は、Auto Layoutの基本的な使い方から進めると理解しやすくなります。
例：画面幅に合わせて伸縮するカードを作る
ここでは練習用として、画像、見出し、説明文、ボタンが縦に並ぶカードを作ります。余白16px、要素間12pxは設計例であり、すべてのUIに必要な値ではありません。
- 画像用の長方形、見出し、説明文、ボタンを用意する。
- それらを縦方向のAuto Layoutフレームへ入れる。
- カードの内側余白を16px、要素間隔を12pxにする。
- カードの幅を確認しやすい固定値にし、高さは内容に追従させる。
- 見出しと説明文の幅をFillにし、文字量で高さが伸びる状態にする。
- カードの幅を変更し、折り返しと高さを確認する。
カードを画面用のAuto Layoutフレームへ入れたら、カードの幅をFillへ変更し、画面側の幅を動かして確認します。どの階層で幅を決めるかを先に決めると、各要素へ固定値を入れ続けずに済みます。
画像をどう伸縮させるかも決めます。幅に合わせて比率を維持するのか、高さを一定にしてトリミングするのかで、見える範囲は変わります。人物の顔や商品が切れないか、異なる画像でも確認してください。
文字が増えた場合を必ず試す
短い見出しだけで完成させると、本番の長いタイトルで崩れることがあります。見出しを2〜3行にし、説明文を倍に増やし、ボタンの文言も長くして確認します。
文字を収めるために高さを固定している場合、文字が重なったり切れたりしやすくなります。全文を表示するのか、行数で省略するのかを決め、それに合う設定と実装ルールを用意します。
日本語だけでなく、長い英単語、URL、数値、空欄も試すと、通常の文章では見えない問題を見つけやすくなります。「きれいに収まる見本文字」だけで判断しないことがポイントです。
PCとスマホで構成を変える場合
画面が狭くなったとき、横並びをそのまま縮めると、本文や操作部品が窮屈になります。スマホ版は縦並びにする、補助情報を後ろへ移すなど、構成を変える条件を決めます。
別フレームやコンポーネントの別状態でPC・スマホの構成を用意し、それぞれの中で幅が変わっても成立するようにします。コンポーネント化していても、画面幅に応じた切り替え条件が実装へ自動的に伝わるとは限らないため、説明を添えます。
ブレークポイントは、特定の端末名だけで決めるより、内容が無理なく収まる限界を見て決めると意図を説明しやすくなります。たとえば、ナビゲーションが2行になる直前や、カードの本文が読みにくくなる幅を確認します。
カード一覧には折り返しやグリッドも使う
複数のカードを並べる場合は、横方向のAuto Layoutの折り返しや、グリッドのAuto Layoutを検討します。行と列の関係を揃えたいのか、内容を順に折り返したいのかで使い分けます。
グリッドでは列や行のサイズ、間隔、セル内の要素サイズを別々に確認します。列幅をFillにしただけで、カードの最小幅や文字の読みやすさまで決まるわけではありません。機能の詳細はFigma公式：グリッドのAuto Layoutを参照してください。
なお、配置の目安を表示するガイド用のグリッドと、子要素を配置するAuto Layoutのグリッドは用途が異なります。ガイドが表示されていても、要素が幅へ追従する設定になっているとは限りません。
崩れたときは、外側から内側へ調べる
- 画面フレームの幅と余白は意図どおりか。
- カードが固定幅のままになっていないか。
- 本文の幅が親を埋める設定になっているか。
- 文字やカードの高さが内容に追従しているか。
- 最小幅や最大幅が伸縮を止めていないか。
- Auto Layoutの流れを無視する設定が入っていないか。
子要素の位置を1pxずつ直す前に、親のサイズと配置ルールを確認します。親の設定が原因なら、個別に直しても別の幅で同じ問題が起きます。
実装へ渡すときに残す情報
PC・スマホの完成図に加え、最小幅と最大幅、余白、並び順の変更、表示・非表示の条件、文字の省略ルールを伝えます。画面幅を変えて確認した中間状態があると、意図を共有しやすくなります。
最後に、狭い幅・中間の幅・広い幅と、短い文字・長い文字の組み合わせを確認します。レスポンシブ設計の完成は、端末別の画面数よりも、内容と幅が変わったときのルールを説明できるかで判断しましょう。