Figmaでガイドやグリッドを表示・非表示する方法

本記事ではFiomaでガイドやグリッドを表示・非表示する方法について説明します。

ガイドやグリッドを表示・非表示する方法

ガイドやグリッドに関する機能は複数あります。以下に解説します。

ビューの切り替え

ガイドやグリッドは、ビューを切り替えることで表示・非表示できます。ビューを切り替える方法は以下のようなものがあります。

1. 「ズーム/表示オプション」をクリック

画面上部にあるツールバー右端にある表示倍率が%が表示されている「ズーム/表示オプション」の幌をクリックします。

2.ガイドやグリッドに関するメニューが表示される

「ズーム/オプション をクリックすると、トの画備の ガイドやグリッドにするメニューがれます。

3.PC版はメニューバーからもビューの切り替えが可能

ブラウザ版でなくPC版を利用している場合は、画面上部にあるメニューバーがら表示をクリックし、表示されたメニュー項目の中からガイドやグリッドに関するメニューを選択できます。

ピクセルグリッド

以下は、ピクセルグリッドというピクセル単位の格子状のグリッドでビューを表示・非表示する方法です。

1.オブジェクトを拡大

ピクセルグリッドはピクセル単位で表示されるグリッドですので、ズームアウトされていると表示されません。ピクセルグリッドを確認するために、表示をズームアウトしてオブジェクトを拡大しておきます。

2. 「ピクセルグリッド」をONにする

「ズーム/表示オプション」をクリックし、表示されたメニューの中から「ピクセルグリッド」を選択します。左端にチェックマークが表示されている場合はON (表示)の状態、チェックマークが表示されていない場合はOFF (非表示)の状態になります。ここでは、「ピクセルグリッド」を表示させたいのでONにします。

3.ピクセルグリッドが表示される

上の画像のように、よく見ると格子状のピクセルグリッドが表示されているのが確認できます。

ピクセルグリッドにスナップ

以下は、ピクセルグリッドにスナップというオブジェクトをピクセルのガイドに沿って動かす機能をON/OFFする方法です。

1. 「ピクセルグリッドにスナップ」をONにする

「ズーム/表示オプション」をクリックし、表示されたメニューの中から「ピクセルグリッドにスナップ」を選択します。ここでは、「ピクセルグリッドにスナップ」を表示させたいのでONにします。

2. 「ピクセルグリッドにスナップ」の動作を確認

上の動画でピクセルグリッドにスナップする動作が確認できます。「ピクセルグリッドにスナップ」をONにすると、オブジェクトがグリッドのガイドラインに沿って移動するので、動きがカクカクとしたものに変化します。

レイアウトグリッド

レイアウトグリッドは、フレーム内にグリッドを表示させる機能です。

1. 「レイアウトグリッド」をONにする

「ズーム/表示オプション」をクリックし、表示されたメニューの中から「レイアウトグリッド」を選択します。ここでは、「レイアウトグリッド」を表示させたいのでONにします。

2. 「レイアウトグリッド」の+マークをクリック

「レイアウトグリッド」をONにすると、右サイドバーに「レイアウトグリッド」という項目が表示されます。この項目の右端にある+マークをクリックします。

3.グリッドのマークをクリック

+マークをクリックすると、レイアウトグリッドのパネルが表示されます。グリッドのマークが表示されていますので(9個の正方形が並んだベントメニューのようなアイコン)。これをクリックします。

4.グリッドを設定

グリッドのマークをクリックすると、グリッドのサイズやガイドラインの のカラーなどを設定するパネルが表示されます。

グリッドの設定を変更すると、上の画像のように選択したフレーム内のグリッド表示のみが変更されます。

定規(ルーラー)

以下は、定規(ルーラー) というキャンパスに定規を表示させるツールを表示・非表示する方法です。

1.「定規」をONにする

「ズーム/表示オプション」をクリックし、表示されたメニューの中から「定期」を選択します。ここでは、「定規」を表示させたいのでONにします。

2.定規が表示される

上の画像のように、キャンバスの上部と左側に定規が表示されます。

3.定規から任意のガイドラインを設定する

定規をクリックしたままキャンパスにドラッグすると、任意のガイドラインを設定することが可能です。グリッドレイアウトなど、規則的にオブジェクトを配置して、ワイヤーフレームやプロトタイプ、デザインカンプなどを作成したい場合は、この任意に設定できるガイドラインを用いてガイドを作成すると便利です。

アウトライン

以下は、アウトラインというビューを表示・非表示する方法です。

1. 「アウトラインの表示」をONにする

「ズーム/表示オプション」をクリックし、表示されたメニューの中から「アウトライン」にある「アウトラインの表示」を選択します。ここでは、「アウトラインの表示」を表示させたいのでONにします。

2.アウトラインが表示される

上の画像のようにオブジェクトやテキストのパスがアウトライン表示されます。

ガイドやグリッドに関連する補助機能

最後に補足情報として、ガイドやグリッドの表示・非表示に直接関係はありませんが、「ズーム/表示オプション」にあるガイドやグリッドに関連する補助機能についても解説しておきます。

ピクセルプレビュー

ディスプレイ上で、ピクセルのドッドまでプレビューする機能です。

1.ピクセルプレビューがOFFの状態

ピクセルプレビューがONになった状態と比較するために、OFFの状態を確認しておきましょう。アウトラインがきれいに表示されています。

2. 「ピクセルプレビュー」をONにする

「ズーム/表示オプション」をクリックし、表示されたメニューの中から「ピクセルプレビュー」を選択しま
す。ここでは、「ピクセルプレビュー」を表示させたいのでONにします。

3. ピクセルプレビューがONの状態

上の画像が、ピクセルプレビューがONにした状態です。拡大表示するとアウトラインにピクセルのドッドが確認できます。

マルチプレイヤーカーソル

マルチプレイヤーカーソルは、複数のメンバーでプロジェクトを挙動作業する場合に便利な機能です。他のメンバーのカーソルの動きが表示されるようになるビュー機能です。この機能も「ズーム/表示オプション」から表示・非表示の切り替えが可能です。

コメント

コメントも、複数のメンバーでプロジェクトを挙動作業する場合に便利な機能です。他のメンバーのコメントが表示されるようになるビュー機能です。この機能も「ズーム/表示オプション」から表示・非表示の切り替えが可能です。

まとめ
Figmaでガイドやグリッドを表示・非表示にする機能は、ワイヤーフレーム、プロトタイプ、デザインカンプ
を作成する上で重要な知識です。本記事を参考にして、その使い方をしっかりとマスターしておきましょう!