概要
この記事では、ビューポート幅に応じて要素サイズが動的にスケールするフルイドレスポンシブレイアウトシステムをFigma Variablesで定義する方法を解説します。前回の固定幅レイアウトシステムとは異なり、rem値の連続的なスケーリングにより、新しいデバイスサイズにも自動適応する柔軟なデザインシステムを構築できます。
フルイドレスポンシブレイアウトの基本概念や設計理論については「フルイドレスポンシブレイアウトの設計手法」で詳しく解説していますが、本記事ではFigmaツール上でのDesign Tokensの定義、Variable Modeの活用、開発チームへの効果的な引き継ぎ方法に焦点を当てています。
レイアウトシステム定義
Figma VariablesのMode機能を活用して、Console（デスクトップ・ラップトップ向け）とHandheld（タブレット・モバイル向け）の2つのデバイスタイプに分離し、それぞれに対してブレイクポイントとスケール倍率を定義します。
基準となるデバイスタイプ
まず、フルイドレスポンシブレイアウトシステムの前提となるデバイスタイプと基準値を定義します。これらはシステム設計の理論的な基盤となるもので、後続のFigma実装で参照されることになります。
ブレイクポイント定義
デバイスタイプに対してそれぞれわかりやすい倍率となる3つのブレイクポイントを設定します。ブレイクポイントはサイトの性質やターゲットユーザーの使用環境に応じて適宜調整します。
Figma Variablesの設定
レイアウトシステムの定義をもとに、Figma Variablesで実際にデザイントークンを設定していきます。
Variable Collectionの作成
- Figmaで新規ファイルまたは既存のデザインシステムファイルを開く
- 右パネルから「Variables」を選択
- 「Create collection」をクリック
- コレクション名を「Fluid Layout System」に設定
このコレクションをもとに、上記で定義した各ブレイクポイント（2xl、lg、xl、md、sm、xs）をModeとして追加していきます。これにより、デバイスタイプごとのブレイクポイント値を切り替えながらデザインできるようになります。
設定するデザイントークン
実際にVariablesに定義した内容は以下の通りです。CSV形式で公開しています。
Figmaファイルサンプル
フルイドレスポンシブレイアウトシステムの実際のFigma Variablesの定義例は以下から確認できます。
まとめ
Figma Variablesを活用することで、Variable ModeによるConsole/Handheld分離とブレイクポイントごとのスケール倍率設定により、デザインと開発の一貫性を確保しつつスケーラブルなフルイドレスポンシブレイアウトシステムをデザインツール上で体系的に定義できます。
フルイドレスポンシブレイアウトシステムについてより深く学びたい場合は、以下の関連記事もご参照ください。
- フルイドレスポンシブレイアウトの設計と実装 - 設計理論とCSS実装の詳細
- Figma Variablesで固定幅レイアウトシステムを構築する - 固定幅レイアウトとの比較
