レイアウトガイドを作成

レイアウトガイドはフレームに追加される視覚的補助ツールで、オブジェクトを正確に整列させ、異なるプラットフォームやデバイス間でデザインを論理的かつ一貫性のあるものに保つための構造を提供するものです。

レイアウトガイドの特長は次のとおりです。

• 複数プラットフォーム間で整合性を確立できます
• レイアウト定義の際の決定事項が少なくなります
• モックアップやワイヤーフレームのレイアウトを短時間で定義できます
• さまざまなレイアウト手法(ギャラリー、アイコン、ページ全体のレイアウトなど)に対応できます

レイアウトガイドのタイプ

レイアウトガイドには、均等グリッド、列、 行の3つのタイプがあります。

均等グリッド

均等グリッドは、精度が必要な場合に便利な正方形グリッドで、シンボルやアイコンの設計に役立ちます。

均等グリッドを選択すると、色とサイズを調整できます。

列と行

列は、フレームの高さにわたる垂直ガイドです。行は、フレームの幅にわたる水平ガイドです。どちらも、Webやモバイル用のレスポンシブなインターフェースを設計するのに理想的です。

列と行には類似のプロパティタイプがあり、調整することができます。

レイアウトガイドを追加・編集する

どのフレームにもレイアウトガイドを追加できます。コンポーネントもフレームであるため、コンポーネントにも追加できます。

レイアウトガイドを追加する手順は次のとおりです。

1. フレームを選択します。
2. 右サイドバーの[レイアウトガイド]セクションで、レイアウトガイドを追加をクリックします。デフォルトでは、フレームに均等グリッドが適用されます。

レイアウトガイドを編集するには、レイアウトガイド設定アイコンをクリックして、レイアウトガイドのタイプを変更し、設定を調整できます。

レイアウトガイドを組み合わせる

上記で述べたように、レイアウトガイドをひとつのフレームに複数追加することができます。これは、より複雑なレイアウトを開発する際に役立ちます。

例えば、列と行の両方のレイアウトガイドを追加することで、縦方向と横方向の配置をより細かくコントロールできます。

1. 別のレイアウトガイドを追加するフレームを選択します。
2. 右サイドバーの[レイアウトガイド]の横にあるをクリックします。
3. 表示されるドロップダウンからレイアウトガイドを選択します。
4. 関連するその他のプロパティを定義します。
5. フレームにレイアウトガイドをさらに追加する場合は、同じ操作を繰り返します。

レイアウトガイドの表示切り替え

レイアウトガイドの表示と非表示を切り替えることができます。これは、レイアウトガイドを完全に削除せずに非表示にする必要がある場合に役立ちます。レイアウトガイドは非表示になっていても引き続き機能します。

ファイル内のすべてのレイアウトガイドの表示を一度に切り替えるには：

1. 右側のサイドバー上部にあるズーム/閲覧オプションのドロップダウンメニューを開きます。
2. レイアウトガイドをクリックして、設定をチェック(有効化)またはチェックを解除(無効化)します。または、キーボードのShift Gを押して切り替えることもできます。

特定のレイアウトガイドを非表示または表示するには:

1. レイアウトガイドがあるフレームを選択します。
2. 右サイドバーの[レイアウトガイド]セクションから、切り替えたいレイアウトガイドを見つけ、/をクリックして表示/非表示を切り替えます。

レイアウトガイドスタイルを作成して適用する

理想的なレイアウトガイドが完成したら、スタイルを作成してデザイン全体で再利用できます。

スタイルの作成について詳しくは、こちらを参照してください。

レイアウトガイドスタイルの作成

新しいレイアウトガイドスタイルを作成するには：

1. キャンバスでレイアウトガイドが適用されているフレームを選択します。
2. 右サイドバーで、[レイアウトガイド]セクションのスタイルを適用をクリックします。
3. スタイルを作成をクリックします。
4. レイアウトガイドスタイルに名前と説明を設定します。
5. [スタイルを作成]をクリックします。

レイアウトガイドスタイルの適用

レイアウトガイドスタイルを適用するには:

1. キャンバスでフレームを作成または選択します。
2. 右サイドバーで、[レイアウトガイド]セクションのスタイルを適用をクリックします。
3. リストからレイアウトガイドスタイルを選択し、それをフレームに適用します。

レイアウトガイドと制約を使って作業する

より複雑なデザインでは、サイズを変更してもデザインが適切に動作するようにするため、精密さと柔軟性が必要です。

制約は、フレーム内でオブジェクトを配置するための基本的なフレームワークを提供します。レイアウトガイドと組み合わせることで、強力なレイアウトシステムのフレームワークが実現します。

ガイドと制約の組み合わせの詳細についてはこちらをご覧ください。

8ポイントグリッドシステム

8ポイントグリッドシステムは、UIレイアウトのデザインでよく利用されます。8の倍数を使ってデザイン内でのオブジェクトの配置を定義します。

このシステムは、モバイルアプリのように固定制約でデザインするときに使用できますが、レスポンシブレイアウトのデザインにも便利です。

8ポイントシステムを実装するには、2種類の一般的な方法があります。

• ハードグリッド: 8ポイント単位の固定グリッドにオブジェクトが配置されます。Figmaでは、均等グリッドがサイズ8のフレームに適用されます。
• ソフトグリッド: 8で割り切れる間隔でオブジェクトが配置されます。8で割り切れるプロパティを設定した行レイアウトまたは列レイアウトが適用されます。

8ポイントグリッドについては、こちらのSpec.fmの記事で詳しくご覧ください。

よくある質問

すべてのレイアウトガイドを一括で切り替えることはできますか?

できます。この操作は、Figmaの右上隅にある[表示設定]メニューから行うことができます。

詳細については、レイアウトガイドの切り替えのセクションを参照してください。

レイアウトガイドが表示されません。なぜですか?

レイアウトガイドが表示されない理由はいくつかあります。

• 右サイドバーでレイアウトガイドがオフに切り替えられている。
• レイアウトガイドがグローバルにオフに切り替えられている。
• 選択したレイヤーがフレームではない。レイアウトガイドはフレームのみに適用できます。
• フレームが回転されている。レイアウトガイドを適用する前に、オブジェクトの回転を0ºに設定していることを確認してください。

レイアウトガイドをコピーするには、どうしたらよいですか?

単一のレイアウトガイドをコピーし、他のフレームに適用することができます。または、デザインを通して再利用できるレイアウトガイドスタイルを作成することもできます。

詳細については、レイアウトガイドスタイルのセクションを参照してください。