Figmaの基本操作 その12 「Grid」について

オブジェクトの配置や整列をより正確に行うために、「Canvas」上に「Pixel Grid」を表示することができます。方眼紙のようなマス目を表示させて、マス目を使用することで図形や線を書きやすくしてくれて大変便利です。また、グリッドの大きさを指定したり、グリッドにオブジェクトをスナップさせることができます。

Pixel Grid ピクセルグリッド

「Pixel Grid」を表示するには
トップメニュー→「View」→「Show Pixel Grid」
チェックが入っていない場合は「Show Pixel Grid」を選択してオンにしてください。チェックが入っている場合は「Show Pixel Grid」を再選択するとオフになります。

または、右上の「Zoom」メニュー→「Pixel Grid」
同じようにチェックが入っていない場合は「Pixel Grid」を選択してオンにしてください。チェックが入っている場合は「Pixel Grid」を再選択するとオフになります。

表示した「Pixel Grid」に「Object」をスナップさせることが可能です。
右上の「Zoom」メニュー→「Snap to Pixel Grid」
チェックが入っている場合はスナップ可能です。

「Pixel Grid」は表示を800％以上に「Zoom in」すると表示されます。「Zoom out」した状態で「Pixel Grid」を使用したい場合は「Snap to Pixel Grid」を有効にしておけば表示はされませんが自動でスナップされます。

この機能を有効にするとオブジェクトの配置や移動の際に基本的なグリッドに合わせてオブジェクトが配置されます。これにより、要素をエクスポートする際にピクセルの位置がずれてしまうことを防ぐことができます。

Layout Grids　レイアウトグリッド

「Pixel Grid」がCanvas上にグリッドを引くのに対して「Layout Grids」は、Frame内にグリッドを引きます。Objectを整列させるのに便利で、表示させることでデザインに一貫性を出すことができます。

「Layout Grids」を表示するには
トップメニュー→「View」→「Show Layout Grids」
チェックが入っていない場合は「Show Layout Grids」を選択してオンにしてください。チェックが入っている場合は「Show Layout Grids」を再選択するとオフになります。

「Layout Grids」は、どの「Frame」にも適用でき、右のサイドメニューのプロパティパネルで詳細を設定していきます。「Frame」を選択し右のサイドメニューのプロパティパネルの「Layout grids」の横をクリックします。

「Frame」に「Layout Grids」が表示されます。目のアイコンをクリックすると「Layout Grids」の表示と非表示を選択できます。

３種類の「Layout grids」

「Layout grids」はGrid（正方形）、Columns（列）、Rows（行）の3種類があります。「Layout grids 」下の点が９つ四角に並んだアイコンをクリックすると設定画面が表示されます。設定画面の上部から「Layout grids 」の種類を選択してください。

Grid（正方形）
グリッドのサイズは変更することができます。デフォルトで10ptグリッドのが入っています。グリッドの各マスには「10px × 10px = 100ピクセル 」が入ります。
「Layout grids 」下の点が９つ四角に並んだアイコンをクリックすると設定画面が表示されます。「Size」下に「pt」を入力し、「Color」下にカラーコードを入力してください。

Columns（列）
Columnsはデフォルトで5列入っています。「Layout grids 」下の点が９つ四角に並んだアイコンをクリックすると設定画面が表示されます。「Count」下に何列に設定するか数字を入力し、「Color」下にカラーコードを入力し、「Gutter」で列の間隔を指定し、「Margin」で余白の指定をします。

Rows（行）
Rowsもデフォルトで5行入っています。「Layout grids 」下の点が９つ四角に並んだアイコンをクリックすると設定画面が表示されます。「Count」下に何列に設定するか数字を入力し、「Color」下にカラーコードを入力し、「Gutter」で行の間隔を指定し、「Margin」で余白の指定をします。

設定画面で設定を「Stretch」にすると「Frame」の大きさに合わせて伸縮し、「Frame」のサイズが変更されても「Layout grids 」はそれに合わせて変化します。幅や高さは、フレームのサイズに応じて自動的に決定されます。

グリッドを引くことでObjectを正確に配置できると思います。Figmaでは数種類のグリッドが用意されていますので、目的に合わせて便利に使うと作業の効率化につながるのではないでしょうか。