Figmaでレイアウトグリッドを設定する

Webサイトのデザインや模写では必ず、グリッドを設定してからスタートします。グリッドを引いてデザインすることで、「デザイン作業がスムーズになる」「統一感のあるデザインができる」「あえてずらしてリズムを出す」などさまざまなメリットがあります。

ここでは模写をするためのグリッドを設定する方法を紹介します。

PCの設定

まずはコンテンツエリアにレイアウトグリッド（赤）を設定します。
列：12
タイプ：ストレッチ
余白：模写するサイトに合わせる
ガーター：模写するサイトに合わせる

余白はコンテンツエリアに合わせます。ガーターは画像などが横並びになっているセクションを探すと設定やすいです。
どうしても、グリッドからずれてしまう画像やテキストがありますが、可能な限り画像やテキストに沿っているグリッドを探しましょう。模写をしやすくするのが目的です。

次にリキッドレイアウト用のマージン（青）を左右に２つ設定します。
列：1
タイプ：右揃えと左揃え
幅：模写するサイトに合わせる
オフセット：0

ブラウザサイズに追従するロゴやグローバルメニューを探すと、マージンを設定しやすいです。

SPの設定

SPのグリッドは簡単です。列は2つか、多くて4つで十分です。
列：2 or 4
タイプ：ストレッチ
余白：模写するサイトに合わせる
ガーター：模写するサイトに合わせる