概要
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形式で公開しています。
| ModeName | 3xl | 2xl | xl | lg | md | sm | xs |
|---|---|---|---|---|---|---|---|
| id | 3xl | 2xl | xl | lg | md | sm | xs |
| breakpoint | 1920 | 1536 | 1280 | 1024 | 768 | 640 | 384 |
| Spacing/half | 32 | 24 | 16 | 16 | 12 | 8 | 6 |
| Spacing/base | 64 | 48 | 32 | 32 | 24 | 16 | 12 |
| Spacing/double | 128 | 96 | 64 | 64 | 48 | 32 | 24 |
| Spacing/triple | 192 | 144 | 96 | 96 | 72 | 48 | 36 |
| Container/base | 1568 | 1296 | 1024 | 832 | 648 | 560 | 324 |
| Container/with_padding | 1696 | 1392 | 1088 | 896 | 696 | 592 | 348 |
| Grid/count | 12 | 12 | 12 | 12 | 12 | 12 | 12 |
| Grid/column | 72 | 64 | 56 | 40 | 32 | 32 | 16 |
| Grid/gutter | 64 | 48 | 32 | 32 | 24 | 16 | 12 |
| Grid/margin | 64 | 48 | 32 | 32 | 24 | 16 | 12 |
| Guide/minor | 16 | 16 | 8 | 8 | 4 | 4 | 4 |
| Guide/major | 32 | 32 | 16 | 16 | 8 | 8 | 8 |
実際にFigma上に定義したVariablesの画面は以下のようになります。
実例
作成したVariablesを使って、簡易的なレイアウトを組んでみたサンプルです。
実際のFigmaファイルはこちらから確認できます。
レイアウトグリッドを設定するとこのように使うことができます。
また、Variablesを使用しているので Appearance からモードを切り替えるだけで、簡単にブレイクポイントごとのレイアウトを確認できます。
まとめ
Variables Modeの上限が解放されたことで、レイアウトシステムに関するデザイントークンを一元管理しやすくなりましたね。
次回は流動幅レスポンシブ（Fluid Responsive）に関するレイアウトシステムをVariablesで定義する方法について紹介したいと思います。
