概要
この記事では、ビューポート幅に応じて要素サイズが動的にスケールするフルイドレスポンシブレイアウトシステムをFigma Variablesで定義する方法を解説します。前回の固定幅レイアウトシステムとは異なり、rem値の連続的なスケーリングにより、新しいデバイスサイズにも自動適応する柔軟なデザインシステムを構築できます。
フルイドレスポンシブレイアウトの基本概念や設計理論については「フルイドレスポンシブレイアウトの設計手法」で詳しく解説していますが、本記事ではFigmaツール上でのDesign Tokensの定義、Variable Modeの活用、開発チームへの効果的な引き継ぎ方法に焦点を当てています。
レイアウトシステム定義
Figma VariablesのMode機能を活用して、Console（デスクトップ・ラップトップ向け）とHandheld（タブレット・モバイル向け）の2つのデバイスタイプに分離し、それぞれに対してブレイクポイントとスケール倍率を定義します。
基準となるデバイスタイプ
まず、フルイドレスポンシブレイアウトシステムの前提となるデバイスタイプと基準値を定義します。これらはシステム設計の理論的な基盤となるもので、後続のFigma実装で参照されることになります。
| 項目 | Console | Handheld |
|---|---|---|
| Mode名 | Console | Handheld |
| デバイスタイプ | コンソールデバイス | ハンドヘルドデバイス |
| 対象デバイス | デスクトップ・ラップトップ | タブレット・モバイル |
| 基準画面幅 | 1920px | 768px |
| 基準rem値 | 16px | 16px |
ブレイクポイント定義
デバイスタイプに対してそれぞれわかりやすい倍率となる3つのブレイクポイントを設定します。ただし、ブレイクポイントはサイトの性質やターゲットとなるユーザーの使用環境に合わせて調整してください。
| ブレイクポイント | Mode | min-width | max-width | rem倍率 | 補足 |
|---|---|---|---|---|---|
| 2xl | Console | 1920px | - | 1.0 | フルHD以上の大画面、基準サイズで表示 |
| lg | Console | 1440px | 1919px | 0.75 | ノートPCの標準的な画面幅 |
| xl | Console | 960px | 1439px | 0.5 | 最小のデスクトップ幅 |
| md | Handheld | 768px | 959px | 1.0 | タブレットの標準幅、基準サイズで表示 |
| sm | Handheld | 640px | 767px | 0.75 | 小型タブレット・大型スマートフォン |
| xs | Handheld | 0px | 639px | 0.5 | 標準的なスマートフォン |
Figma Variablesの設定
レイアウトシステムの定義をもとに、Figma Variablesで実際にデザイントークンを設定していきます。
Variable Collectionの作成
- Figmaで新規ファイルまたは既存のデザインシステムファイルを開く
- 右パネルから「Variables」を選択
- 「Create collection」をクリック
- コレクション名を「Fluid Layout System」に設定
このコレクションをもとに、上記で定義した各ブレイクポイント（2xl、lg、xl、md、sm、xs）をModeとして追加していきます。これにより、デバイスタイプごとのブレイクポイント値を切り替えながらデザインできるようになります。
設定するデザイントークン
実際にVariablesに定義した内容は以下の通りです。CSV形式で公開しています。
| ModeName | 2xl | xl | lg | md | sm | xs |
|---|---|---|---|---|---|---|
| id | 2xl | xl | lg | md | sm | xs |
| breakpoint | 1920 | 1440 | 960 | 768 | 576 | 384 |
| ratio | 1 | 0.75 | 0.5 | 1 | 0.75 | 0.5 |
| rem | 16 | 12 | 8 | 16 | 12 | 8 |
| Spacing/half | 24 | 18 | 12 | 12 | 9 | 6 |
| Spacing/base | 48 | 36 | 24 | 24 | 18 | 12 |
| Spacing/double | 96 | 72 | 48 | 48 | 36 | 24 |
| Spacing/triple | 144 | 108 | 72 | 72 | 54 | 36 |
| Container/base | 1296 | 972 | 648 | 648 | 486 | 324 |
| Container/withPadding | 1392 | 1044 | 696 | 696 | 522 | 348 |
| Grid/count | 12 | 12 | 12 | 12 | 12 | 12 |
| Grid/column | 64 | 48 | 32 | 32 | 24 | 16 |
| Grid/gutter | 48 | 36 | 24 | 24 | 18 | 12 |
| Grid/margin | 48 | 36 | 24 | 24 | 18 | 12 |
| Guide/minor | 16 | 12 | 8 | 16 | 12 | 8 |
| Guide/major | 32 | 24 | 16 | 32 | 24 | 16 |
Figmaファイルサンプル
フルイドレスポンシブレイアウトシステムの実際のFigma Variablesの定義例は以下から確認できます。
まとめ
Figma Variablesを活用することで、Variable ModeによるConsole/Handheld分離とブレイクポイントごとのスケール倍率設定により、デザインと開発の一貫性を確保しつつスケーラブルなフルイドレスポンシブレイアウトシステムをデザインツール上で体系的に定義できます。
フルイドレスポンシブレイアウトシステムについてより深く学びたい場合は、以下の関連記事もご参照ください。
- フルイドレスポンシブレイアウトの設計と実装 - 設計理論とCSS実装の詳細
- Figma Variablesで固定幅レイアウトシステムを構築する - 固定幅レイアウトとの比較
