画面をデザインするときには、さまざまなレイアウトを使用します。デザインを適応させるには、正確さと柔軟性の両方が必要となります。

ピクセルグリッドでは、精密な操作を行い、配置をコントロールできます。レイアウトグリッドでは、デザインをより柔軟に実装できます。

レイアウトグリッドに関する詳細情報

• このページの下部にある「よくある質問」の回答を参照してください。
• レイアウトグリッドの使い方の詳細については、Figmaのブログ記事「Grid Pro Quo」を参照してください。

レイアウトグリッドについて

レイアウトグリッドでは、フレーム内にオブジェクトを容易に配置でき、デザインに視覚的な構造を与えることができます。異なるプラットフォームやデバイスの間で、デザインのロジックと整合性を維持できます。

レイアウトグリッドは、ピクセルグリッドに依存していません。つまり、レイアウトグリッドは特定の解像度や寸法に依存していません。

レイアウトグリッドはフレームにのみ適用できます。これは最上位のフレーム、または別のフレーム内にネストされているフレームです。

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

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

レイアウトグリッドの適用

レイアウトグリッドはあらゆるフレームに適用できます。コンポーネントもフレームであるため、コンポーネントにも適用できます。

レイアウトグリッドの設定は右サイドバーにあります。

レイアウトグリッドを適用するには、次の手順に従います。

1. キャンバス上のフレームまたは左サイドバーの[レイヤー]パネルを選択します。
2. 右サイドバーにある[レイアウトグリッド]の横のをクリックします。
3. デフォルトでは、均等グリッドがフレームに適用されます。
4. 次にをクリックすると、レイアウトグリッド設定が開き、プロパティを更新できます。

レイアウトグリッドのプロパティ

使用可能な3種類のレイアウトグリッドは、[グリッド] (同じサイズのマス目)、[列]、[行]です。

均等グリッドでは、グリッドのサイズと色の両方を定義できます。マス目のグリッドは、記号やアイコンのデザインのように、精密さを必要とする場合に便利です。

列グリッドと行グリッドでは、グリッドの幅や高さ、間隔、余白を定義できます。Webやモバイルのレスポンシブインターフェースをデザインする場合に便利です。

グリッドは単独で使用することも、より複雑なレイアウトに対応するために複数のグリッドを組み合わせて使用することもできます。

レイアウトグリッドの組み合わせの詳細はこちら ↓

レイアウトグリッドの変更

グリッドタイプを選択するには、次の手順に従います。

1. 右サイドバーでをクリックします。
2. レイアウトグリッドプロパティのウィンドウでをクリックします。
3. 次のいずれかを選択できます。
   • [グリッド] (均等グリッド)
   • [列] (列グリッド)
   • [行] (行グリッド)

均等グリッドのプロパティ

均等グリッドを選択した場合は、グリッドのサイズを選択できます。これにより、マス目のピクセル数が決定します。

たとえばデフォルトの10ptグリッドでは、グリッドのマス目のピクセル数は100ピクセル(10px × 10px)になります。

1. をクリックして、レイアウトグリッド設定を開きます。
2. [サイズ]フィールドを必要な値に更新します。
3. をクリックしてウィンドウを閉じ、キャンバスに戻ります。

列と行のプロパティ

列または行、あるいはこの両方のレイアウトグリッドを適用できます。列グリッドと行グリッドを使用すると、レイアウトのコントロールと柔軟性が向上します。

グリッドの次のプロパティを定義できます。

グリッドのプロパティ

• [数]は、グリッドの列数または行数です。
• [ガター]は、各列または行の間の距離です。
• [余白]は、端から列または行が始まる位置までの距離です。これは[ストレッチ]グリッドにのみ適用されます。
• [オフセット]は、上端から行が始まる位置までの距離、または左端から列が始まる位置までの距離です。これは上揃えの行または左揃えの列に適用されます。

グリッドのタイプ

レイアウトグリッドには、[固定]と[ストレッチ]の2種類があります。

[固定]レイアウトグリッドでは、(列の)[幅]と(行の)[高さ]、列または行の[数]を指定できます。

レイアウトグリッドは次のように固定できます。

• [行]の場合は、フレームの[上]または[中央]
• [列]の場合は、フレームの[左]または[中央]

[ストレッチ]グリッドは、フレームのサイズに適応します。このため、フレームのサイズを変更すると、デザインがその変更に対応します。

グリッドの[幅]や[高さ]は、フレームサイズに基づいて自動的に設定されます。

色

レイアウトグリッドのデフォルトの色は赤(#FF0000)、不透明度は10%です。

レイアウトグリッドの[色]と[不透明度]はユーザーが変更できます。

1. 右サイドバーのをクリックします。
2. [色]スウォッチをクリックします。
3. 色選択機能を使って新しい色を選択します。
4. 必要に応じて不透明度を調整します。

レイアウトグリッドの組み合わせ

前述したように、複数のレイアウトグリッドを1つのフレームに適用できます。これは、複雑なレイアウトの開発で役立ちます。

例: [列]と[行]の両方のレイアウトグリッドを適用できます。これにより、縦方向と横方向の配置を細かくコントロールできます。

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

レイアウトグリッドの切り替え

レイアウトグリッドの表示/非表示を切り替えることができます。これは、レイアウトグリッドを削除せずに非表示にする必要がある場合に便利です。

レイアウトグリッドは非表示になっていても引き続き機能します。

すべてのレイアウトグリッドの切り替え

ファイルですべてのレイアウトグリッドの表示を一括で切り替えることができます。

1. 画面右上隅のズームパーセンテージをクリックします。[表示設定]メニューが表示されます。
2. [レイアウトグリッド]オプションの横にチェックマークがない場合は、このオプションをクリックすると、レイアウトグリッドが表示されます。
3. チェックマークが表示されている場合は、[レイアウトグリッド]をクリックすると、レイアウトグリッドが非表示になります。
4. キーボードショートカットを使ってレイアウトグリッドの表示と非表示を切り替えることもできます。
   • Mac: ⌃ Control – G
   • Windows: Control + Shift + 4

個々のレイアウトグリッドの切り替え

1つのレイアウトグリッドを有効または無効にするには、プロパティパネルを使用します。

1. 該当するフレームを選択します。
2. 右サイドバーの[レイアウトグリッド]セクションを見つけます。
3. レイアウトグリッドの横にあるをクリックすると、非表示になります。
4. レイアウトグリッドの横にあるをクリックすると、表示されます。

レイアウトグリッドのスタイル

レイアウトグリッドが完成したら、他のデザインで再利用できるようにスタイルを作成できます。

スタイルの作成の詳細はこちら →

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

1. キャンバスでレイアウトグリッドが適用されているフレームを選択します。
2. 右サイドバーの[レイアウトグリッド]セクションでをクリックします。
3. [グリッドスタイル]ウィンドウでをクリックします。
4. レイアウトグリッドスタイルに覚えやすい名前を付けます。
5. [スタイルを作成]をクリックしてプロセスを完了します。

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

1. キャンバスでフレームを作成または選択します。
2. 右サイドバーでをクリックします。
3. ウィンドウからレイアウトグリッドスタイルを選択します。
4. 選択されているフレームにレイアウトグリッドが適用されます。

グリッドと制約の操作

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

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

グリッドと制約の組み合わせの詳細はこちら →

8ポイントグリッド

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

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

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

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

8ポイントグリッドの詳細については、Spec.fmの記事を参照 →

よくある質問

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

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

詳細については、「レイアウトグリッドセクションの切り替え」を参照 ↑

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

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

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

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

1つのレイアウトグリッドをコピーして、別のフレームに適用できます。または、複数のデザインで再利用できるレイアウトグリッドスタイルを作成できます。

詳細については、「レイアウトグリッドスタイル」セクションを参照 ↑