3-7. ビューの設定とルーラー・レイアウトの設定

1.ビューの設定をする

ビュー機能を使うには、Figma使用時の「Macメニューバー」→「View」から選択することが出来ます。

または、図1のFigmaツールバーの赤枠「%」をクリックするとプルダウンメニューが表示され、選択することが出来ます。

では、一つ一つの機能を解説していきます。

ピクセルプレビューはベクター表示とピクセル表示を切り替えることが出来ます。

ベクター表示ではUIの細かい調整などの場合に使い、ピクセル表示は実際に画面でどのように表示されるのかをチェックを行う場合に使用されます。Figmaでは、ピクセル表示の倍率を1xか2xを選択できるので、場合に応じて選択しましょう。

ショートカットキー : Shift + Command + '

フレーム上に表示されるグリッド(格子線)を表示/非表示を選択することで切り替えることが出来ます。グリッド表示をすることで、1px単位の作業が必要なアイコンなどを作る際に役立ちます。

Snap to Pixel Gridを使用することで、1pxごとにスナップするかしないかを選択することが出来ます。基本的にUIデザインを制作する際はSnap to Pixel GridをONにしておきましょう。

ONにするとグリッドに沿って移動中のオブジェクトが吸着します。

フーレム上に表示されるレイアウトの表示/非表示を切り替える事ができます。レイアウトは、例えばWEBデザインする際のガイドとして役立ちます。Layout Gridの設定は後ほど解説します。

Figmaではリアルタイムで共同作業することが出来ます。Multiplayer Cursorsはチームメンバーのカーソルを表示/非表示の選択をすることが出来ます。

Rulersはキャンバス表示されている定規の表示/非表示を切り替えることが出来ます。後ほどRulersの使い方を解説します。

ルーラーはUIを制作する上で、便利な機能の一つです。ルーラーを使用することでオブジェクトの配置作業時に設定したガイドに対して補助機能が働きます。

ガイドを作成するには、図8のように、ルーラー上でドラックすることで補助線が表示されます。ガイドを置きたい位置でドロップすることでガイドを引くことが可能です。

ガイドを消去・移動したい場合は、図9のようにガイドをドラックすること移動することができ、ルーラー外までガイドをドラック＆ドラップすることで、ガイドを消去することが可能です。

レイアウトグリッドは、複数のプラットフォーム間での一貫性を保つために、オブジェクトを整列するのに役立ちます。

またレイアウトグリッドは、ピクセルグリッドに依存しません。レイアウトグリッドグリッドはフレームにのみ適応することができます。

レイアウトグリッドを適応するには、プロパティパネル「Layout Grid」から「+」でレイアウトグリッドを追加することが出来ます（図10の赤枠）。
デフォルトでは、「+」を押すと、10pxの正方形グリッドが追加されます。

「+」を押しレイアウトグリッドを追加したら、図11赤枠をクリックするとレイアウトグリッドの設定を行うことが出来ます。