概要
Figmaにおけるレイアウトシステムの定義方法は様々ありますが、Figma VariablesのMode上限数が解放されたことで、状況が大きく変わりました。Variablesを使用することで、レイアウトシステムに関するデザイントークンの一元管理を効率的に行えるようになります。
さらに多くのバリアブルモード — さらに多くのバリアブルモードで、拡張されたデザインテーマを作成できます。プロフェッショナルプランでは10個、ビジネスプランでは20個を作成できます。
Figma Variablesを活用した固定幅のレイアウトシステム用ライブラリを作成しました。本記事では、その設計思想と具体的な内容を紹介します。
ブレイクポイント
レイアウトシステムのブレイクポイントはTailwind CSSのデフォルト値をベースに、高解像度向けの3xlと最小幅向けのxsを追加した7つで構成されます。
- xs: 384px
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- 2xl: 1536px
- 3xl: 1920px
レイアウトシステムのデザイントークン
ブレイクポイントに対して、余白やContainer幅、グリッドシステムのカラム幅などのデザイントークンを定義しました。 各幅の設計では以下の点を考慮しています。
- 4pxまたは8pxの倍数で設計
- Container幅は固定幅で設計
- 左右のGutter（外側マージン）とカラム間のGutterを同じ幅に設定
- グリッドシステムは12カラムで設計
- カラム幅は整数で設計
デザイントークン一覧
実際にVariablesに定義した内容をCSV形式で公開しています。
Figma上に定義したVariablesの画面は次の通りです。
実例
作成したVariablesを使用した簡易的なレイアウトのサンプルです。
実際のFigmaファイルはこちらから確認できます。
レイアウトグリッドを設定した使用例は次の通りです。
Variablesを使用しているため、Appearanceからモードを切り替えることで、ブレイクポイントごとのレイアウトを確認できます。
まとめ
Variables Modeの上限が解放されたことで、レイアウトシステムに関するデザイントークンを一元管理しやすくなりました。
次回は流動幅レスポンシブ（Fluid Responsive）に関するレイアウトシステムをVariablesで定義する方法について紹介する予定です。
