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

1.ビューの設定をする

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

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

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

Pixel Preview

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

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

Pixel Grid

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

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

Snap to Pixel Grid

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

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

Layout Grid

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

Multiplayer cursors

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

Rulers

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

2.ルーラーの使い方

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

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

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

3.レイアウトグリッドの設定

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

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

レイアウトグリッドの適応方法

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

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

• 上部のプルダウンメニューから「Grid」「Colums」「Rows」の3種類のグリッドを選択することが出来ます。
• Countはカラム数の設定です。
• Colorはカラムの色を指定することが出来ます。
• Typeは、「Left」「Right」「Stretch」「Center」から選択することができます。
• Widthはカラムの幅を設定出来ます。
• Gutterはマージンの設定です。