FigmaでLayout Grid（レイアウトグリッド）を活用する方法

Figmaでデザインする際、コンテンツの横幅を揃えたり配置を整える基準が欲しい時がありますよね。その際に活用すると良いのがレイアウトグリッドです。

レイアウトグリッドは3つの要素で構成されています。

• 赤：Column（カラム：列）

• 緑：Margin（マージン：余白）

• 青：Gutter（ガター：溝）

設定方法は

1. レイアウトグリッドの「＋」をクリック

2. グリッドを編集

3. 列を選択

4. カラムの数、余白、ガターを設定

また、レイアウトグリッドはグリッドスタイルとして保存して置くことで、簡単に再利用することができます。

マテリアルデザイン2ではスクリーンサイズに応じてマージンとカラム数が定義されているので、参考になります。

Webサービスの開発では、CSSグリッドレイアウトを使ってFigmaで定義したグリッドをそのまま使って実装することができるため、レイアウトグリッドはデザインのガイドとして役立つだけでなく実装上のメリットもあります。

この記事の関連シリーズ

Figmaの役立つTips特集

FigmaでのWebデザインやUIデザイン制作に、知っておくと役立つFigmaの便利な使い方やショートカットを紹介する連載企画。プラグインやウィジェットなど、『Figma Community』に公開されているおすすめのリソースも紹介！