Figmaでデザインする際、コンテンツの横幅を揃えたり配置を整える基準が欲しい時がありますよね。その際に活用すると良いのがレイアウトグリッドです。
レイアウトグリッドは3つの要素で構成されています。
赤：Column（カラム：列）
緑：Margin（マージン：余白）
青：Gutter（ガター：溝）
設定方法は
レイアウトグリッドの「＋」をクリック
グリッドを編集
列を選択
カラムの数、余白、ガターを設定
また、レイアウトグリッドはグリッドスタイルと して保存して置くことで、簡単に再利用することができます。
マテリアルデザイン2ではスクリーンサイズに応じてマージンとカラム数が定義されているので、参考になります。
Webサービスの開発では、CSSグリッドレイアウトを使ってFigmaで定義したグリッドをそのまま使って実装することができるため、レイアウトグリッドはデザインのガイドとして役立つだけでなく実装上のメリットもあります。
この記事の関連シリーズ
Figma
